Yii框架和Vue的完美結合完成先後端分離項目

背景說明

本文假設你對Yii和Vue都比較熟悉，至少都在項目裏用過，另外筆者新人，之後不定時放一些乾貨，歡迎程序媛關注

Yii是一個PHP全端框架，典型的mvc的項目結構，後端接口都是一個控制器裏放了不少的action，每一個action都是一個接口，能夠返回JSON，也能夠render出一個html5頁面，這些頁面就是mvc的view，結構緊湊強耦合。

Vue是一個前端框架，主要思想就是SPA（單頁面應用），組件化開發是其根本目的。

這二者怎麼去結合使用才能達到工程的最易開發和最易維護是一個很值得思考的問題，小編結合項目需求，設計了一套利用這二者來構建先後端分離項目的架構

Yii項目結構

看一下項目目錄的樣子

這裏有bapp、bmanager、bshare等等多個項目，每一個項目裏的文件結構是這樣的

Vue項目結構

先後端分離思路

既然咱們已經考慮先後端分離了，那麼Yii裏面的view層，咱們就不須要了，相似於這些view的代碼

return $this->render('baseinfo', ['phone' => $contact['mobilephone'], 'isdel' => $isdel]);

var host = "<?= Yii::$app->params['bUrl']?>";var mobilephone="<?php echo $phone ?>";var isdel="<?php echo $isdel ?>";

<div class="base"><span class="name"><?php echo $name; ?></span>&ensp;<span class="mobile"><?php echo $mobilephone; ?></span></div><div class="mark">備註:<?php echo $notes; ?></div>

這些看上去很是醜陋的代碼將不容許出如今項目裏。Vue是一個完整的前端SPA項目，放在服務器上能夠獨立運行。那麼咱們考慮把這個項目打包放在bapp的web目錄下（下面以bapp項目爲案例說明），由於這個web目錄就是Yii裏邊對應站點的根目錄，（例如bapp項目的域名爲bapp.stock.com,在web目錄下放一張圖片，那麼這張圖片的遠程路徑就該是http://bapp.stock.com/IMG_1383.JPG）

這裏有一個關鍵的地方，咱們整個項目叫作bapp，那麼Yii裏面的後端項目取名就叫作bapp，vue前端項目取名也叫bapp，這樣能保持對應，便於理解，這是一個要遵照的規範。

這個是vue成功build以後的文件，存放在web/bapp下，對於一個vue-cli初始化構造的項目，如今就可使用url：http://bapp.stock.com/bapp來訪問你的前端項目了

vue-yii架構完整實現

上面的思路基本就實現了一個簡單的先後端分離過程。實際項目中咱們還有不少須要規範和注意的地方。下面依據咱們須要解決的三個主要問題來進一步設計這個架構

• vue的build項目自動放在yii的web目錄下

這一點對於這種先後端分離的開發模式很重要，vue-cli默認的build路徑是放在dist下，如今必需要讓build的文件自動放在其餘路徑下的yii的web下，這裏就須要修改默認的配置了

因爲vue項目默認是存放在站點的根目錄下，也就是編譯後生成的全部文件必須放在trunk/bapp/web下，這個目錄本來有一些其餘文件，最好不要直接扔過去，建一個新目錄trunk/bapp/web/bapp來存放這些文件將會更加清晰。這樣你會發現一個新問題，你build的項目放在web/bapp下會沒法運行，會找不到文件路徑。這就要修改vue的運行根目錄，用來解決vue項目在子站點裏沒法運行的問題，很簡單，修改路由的base便可

• 開發環境生產環境部署怎麼解決

Vue項目的config下有dev.env.js、test.env.js、prod.env.js，你能夠在這裏設置你的APIURL,請求接口的地方使用process.env.APIURL來獲取，這種模式下，咱們須要在不一樣環境發佈不一樣的webapp包，相似於Android和ios的app開發模式。這種方法在咱們這並不可取，由於PHP在各個環境裏已經配置了站點，vue項目在php項目下，因此咱們要從php來獲取當前的運行環境，這才顯示出咱們這種架構的易維護呀。具體思路就是在vue裏解析當前的url獲取環境了。

在vue的main.js裏來作這個工做

利用document.location.href獲取運行環境，把api站點存在vuex裏，須要請求接口的地方從vuex裏直接取，上面代碼裏解析完apiurl以後有一個解析路由的過程，這個下面再講

• 原生客戶端怎麼去請求vue頁面

vue項目可能會包含不少頁面，有的頁面多是一個較大的模塊，好比商城系統的全部頁面，有的頁面可能就是一個用戶須知什麼的單頁面，客戶端瀏覽器在調用這些頁面須要按照模塊來調用。這裏就要求vue項目在開發過程當中必須按照不一樣模塊在route下創建不一樣路由的規範去作，這樣既有利於前端代碼碎片化，也有利於客戶端調用更加方便。

在後端控制器裏trunk/bapp/controllers/裏我有一個BuserController的控制器，在這個控制器裏添加了一個action

這個action很是重要，是先後端分離的關鍵

這個action很是重要，是先後端分離的關鍵

這個action很是重要，是先後端分離的關鍵

這個action名字也須要遵循規範都叫作webapp,在後端其餘項目裏，好比個人工程裏還有capp項目，我也能夠在capp下的CuserController裏添加這個webapp的action。

$url = Yii::$app->params['bUrl'] . "bapp/#/{$page}?route={$route}&{$query}&" . $this->sessionQueryString();

其中這行代碼比較關鍵，這個url其實就是bapp/web/bapp的vue項目的地址，

Yii::$app->params['bUrl']

是配置在PHP裏的域名地址

bapp/#/{$page}

是vue的hash路由的調用方式，具體可參看vue官方文檔

$this->sessionQueryString();

是取的sessionid，這個讀者能夠改爲本身系統裏的登陸標記

客戶端顯示的全部h5都經過這個接口獲取，對這個接口的參數有必要重點說明，webapp接收三個入參

1. route（必傳）

route參數由前端定義，好比前端有一個商城的模塊叫作mall，那麼vue的router下應該會有一個mall.js，裏面管理全部商城的頁面分發，客戶端想顯示mall的頁面就在調用webapp時用route=mall，再好比前端有一個活動頁面的模塊activity，那麼vue的router下會有一個activity.js來管理全部活動頁面的分發，客戶端要顯示活動頁面必須傳route=activity

2.page（非必傳）

對於像mall這樣的完整模塊，客戶端可能只須要顯示mall的首頁就能夠了，那麼page就不須要傳，自動進入到vue的router/mall.js的默認頁面，若是像活動模塊，這裏面的頁面可能都不關聯，可能有activity一、activity二、acitivity3等頁面，客戶端想顯示activity2頁面，就必須傳page=activity2

3.addition（非必傳）

用addition傳的是附加參數，客戶端在調用某個頁面時，可能會帶上一些用戶信息，好比手機號，token，session等，這些參數都放在addition中

原生客戶端經過get或post均可以調用這個接口取到頁面，簡單說下兩種調用方式區別

GET：這裏須要注意addition這個附加參數怎麼拼到url裏，例若有這種json

{

"mobile":"18512331232",

"info":{

"name":"jimmy",

"sex":"mail"

}

}

二維數組的get傳參不少同窗都不知道，注意一下

http://xxx.xxx?addition[mobile]=18512331232&addition[info][name]=jimmy&addition[info][sex]=mail

這個地址在原生的webview裏直接loadUrl便可

POST：全部參數都放在post體裏邊，接口返回的是最終須要顯示的h5頁面的代碼，原生在取到這個h5代碼以後

webview須要loadHtml顯示

總結一下規範

1. vue項目和yii項目的命名必須一致

2. vue的build項目必須放在yii的web下的新建文件下，文件夾名稱必須和項目名稱相同

3. yii項目控制器裏創建Webapp的action做爲客戶端訪問H5頁面的惟一入口

4. vue的路由須要按照模塊名稱創建路由文件

結束語

後端代碼核心就是actionWebapp，

前端代碼給你們參考一下：https://github.com/ahuchjm/Vue_Bapp.git

祝生活愉快！！！