如何利用vue和php作先後端分離開發？

時間 2019-11-09

標籤如何利用 vue php 後端分離開發欄目 PHP 简体版

原文原文鏈接

新手上路，前端工程師，剛畢業參加工做兩個月，上面讓我用vue搭建環境和php工程師一塊兒開發，作先後端分離，然而我只用過簡單的vue作一些小組件的經驗，徹底不知道怎樣和php工程師配合，ps： php那邊用的是think5 ，我要如何把vue嵌套進去？我這兩天查資料加學習發現vue-cli有它本身的邏輯目錄，如今整我的很懵逼，可能對於一些有個三五年經驗的工程師來講，之只是一個小問題，可是困擾了我很久，最後總結一下問題，1.如何用vue搭建環境和php工程師作先後端分離開發，2能搭建一個給我看看麼！

之前是寫PHP的，轉前端兩年了吧～之前寫Laravel比較多，前後在百度、大疆實習，總結一下，不知道對你有沒有幫助。

Blade下的Vue

包括Laravel在內的主流PHP框架都是MVC架構的，在視圖層一般都有本身的模板引擎。因此在大一入門的時候我通常是這樣寫的。php

編寫一個Laravel的模板文件，傳進來PHP的變量並渲染。css

<html>
    <body>
        <h1>{{ $hello }}</h1>
    </body>
</html>

經過script標籤引入Vue，而後在標籤內寫vue的邏輯。html

<script src="js/vue.min.js"></script>

配合axios這些ajax庫，前端就能夠只寫在resources/views文件夾裏，不用管其餘的了。前端

構建工具下的Vue

後來以爲沒有NPM和Node實在太不方便了，因而單獨創建了前端頁面的文件夾，編譯到resources/views文件夾裏，不過不久以後Laravel就提供了一體化的構建工具。vue

Laravel Mix提供了一個管道，能夠流式編譯CSS和JS。react

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

相似於Gulp，也是在Node上面跑起來的。webpack

npm install
npm run dev
npm run production

在app.js裏面註冊組件。ios

// app.js
Vue.component('example', require('./components/Example.vue'));

而後就能夠直接寫在PHP的模板裏面了。web

@extends('layouts.app')

@section('content')
    <example></example> // 這裏是使用vue組件的
@endsection

其實原理仍是和以前手動編譯的同樣，先經過webpack翻譯組件，生成正常的PHP模板，給PHP調用。ajax

分離與轉發

再後來，前端和後端項目在一臺服務器，一個文件夾裏，太窩囊了，也不利於擴展。所以，你們開始使用Node轉發。

這裏後端的工做通常是：

編寫Lumen代碼，提供服務
寫好Restful的API文檔
用postman進行測試

前端的工做通常是：

編寫Vue代碼
打包編譯
使用Node轉發API請求，解決跨域問題
使用PM2處理併發請求

結束

如今寫JS比較多了，發現中間層用Koa、express也不錯，因此很久都沒有用PHP了。如今工做中大部分都是CMS的業務，後端JAVA比較多，前端就直接轉發了JAVA的接口。就這樣吧，但願對你有所幫助咯，以上。

https://www.zhihu.com/question/67171606

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。