摘要: 本文介紹使用Vue2單頁面程序作為前臺，以Yii2搭建后臺提供API，進行前后端分離開發(fā)的入門知識。本文適合Vue2，Yii2愛好者觀看。預(yù)計花費時間30分鐘，跟隨教程操作。

前后端分離之后,后臺語言的選擇一下子多了,只要能處理請求,返回JSON就可以了。不過據(jù)說PHP是世界上最好的語言，所以本教程選的是PHP，當然，站在巨人的肩膀上，選個好用不浮夸的框架也是必要的，不然重復(fù)發(fā)明輪子會占用很多玩耍的時間，不利于身心健康。性能什么的，不要計較太多，如果幸福的煩惱來臨，多花點錢，多搞幾臺機器的事而已。廢話不多說，擼起袖子加油干！

Yii2通過composer-asset-plugin整合bower和npm上的前端庫到composer的安裝上，如果之前安裝過這個插件，就不用安裝啦，直接

composer create-project --prefer-dist yiisoft/yii2-app-basic basic

如果沒有安裝過asset-plugin，就先安裝插件，再創(chuàng)建一個新的Yii2程序：

稍等片刻，就能安裝好啦。 Composer安裝有問題的，請看另外一篇博文：Composer更新慢的終極解決方案

配置下虛擬主機，以apache為例，打開apache目錄下的httpd-vhosts.conf配置文件，添加配置：

DocumentRoot指向的是剛剛創(chuàng)建的Yii2程序的web目錄，ServerName是本地域名，配置好apache配置后，需要再改一下hosts文件，以Win7為例，打開 C:\Windows\System32\drivers\etc\hosts 在文件最后添加一行

保存，重啟Apache，打開瀏覽器，打開地址 http://ckend.local/ 看到熟悉的 Congratulations!大字，說明安裝配置完成啦！

2.1 添加API相關(guān)Controller的基礎(chǔ)類，這里取名BaseAPIController：

主要解決兩個問題：

1. cors問題，就是跨域調(diào)用的問題，這個問題可大可小，展開了還能再寫很多，這里不細說了。

2. 返回的數(shù)據(jù)類型，本例所以請求都返回JSON格式數(shù)據(jù)。

2.1.2 修改接受的請求數(shù)據(jù)格式

傳統(tǒng)的web應(yīng)用，請求類型通常是x-www-form-urlencoded與multipart/form-data, 對應(yīng)普通的表單提交，以及文件內(nèi)容提交，默認Yii2不支持Json格式的請求，需要在config/web.php里修改request組件配置 ：

2.2 添加權(quán)限驗證控制器

簡單起見，不涉及數(shù)據(jù)庫操作，用戶名密碼如果都符合要求，就返回一個token，這個token的值是100-token,為什么是這個值，請看創(chuàng)建好的Yii2項目的Models目錄下的User.php.

2.3 添加需要授權(quán)才能訪問的控制器

重點是，這個ItemController只有通過驗證，才能訪問到Index這個action，這里增加的驗證器HttpBearerAuth就是用來驗證請求的Header里是否帶著剛剛分發(fā)的token, 之所以不對OPTIONS請求做驗證，是因為OPTIONS請求不帶別的信息啊，沒法驗證。瀏覽器非要在請求之前發(fā)個OPTIONS請求，也沒辦法。

2.4 測試

打開瀏覽器訪問http://ckend.local/item 正常情況下，會返回為授權(quán)信息 ：

前端采用Vue2這個單獨好用的js框架，文檔豐富，社區(qū)活躍，最難得的是作者很帥！

現(xiàn)在前端沒有Node簡直寸步難行，所以Node是必須安裝的，去官網(wǎng)下個安裝包，安裝好。然后再安裝vue-cli工具。

運行命令：

會讓您輸入必要的信息，如項目名稱，描述，作者之類的。這里簡單起見，一路默認回車就是啦。

如上面命令行輸出的提示，vue-cli創(chuàng)建項目后，還需要npm install安裝，然后npm run dev運行，看看能不能成功運行。

本例需要用到Vue-router這個官方推薦路由，以及axios這個官方推薦http庫。至于官方為什么不推薦原來的vue-resource了，我也不知道，前端喜新厭舊，就是這樣的。

細心的朋友會發(fā)現(xiàn)多安裝了bootstrap 和 iview這兩個庫，沒別的目的，就是想讓界面好看點，聽說也比較火，安裝了吧，反正閑著也是閑著。

稍等片刻，安裝完畢，npm run dev看看效果吧。

邏輯是這樣的，這個前端頁面，是登錄之后才能用的，未登錄用戶，直接給跳轉(zhuǎn)到登錄頁。登錄成功后，跳回首頁，然后調(diào)用Item/index接口，獲取信息然后顯示在頁面上。

好了，計劃完畢，開始寫代碼。在src目錄下創(chuàng)建一個config目錄，加一個setting.js, 內(nèi)容如下：

基本的配置信息就在這里了，包含了后端服務(wù)地址，用戶標志的key名稱。

再在src目錄下創(chuàng)建一個services目錄，加一個auth.js,用來輔助判斷用戶登錄狀態(tài):

就四個函數(shù)，功能不言而喻。

再在services目錄下加一個http.js，用來包裝一下axios：

重點是在request和response兩個攔截器。request里，查看用戶是處于登錄狀態(tài)，如果是，那么就在請求的headers里加上 Bearer ${token}; 這樣后端在接受到請求的時候，用HttpBearerAuth去校驗這個token是不是符合要求，就能夠進行用戶權(quán)限驗證啦。當然，不用攔截器也是可以的，但是每個請求都需要加Headers頭，會不會很累？

response攔截器里，檢查返回的狀態(tài)，如果是401狀態(tài)碼，就是用戶沒有通過權(quán)限驗證，那就去登錄頁面再登錄啦。同樣的，每個請求也是可以檢查狀態(tài)碼的，但是太麻煩，偷懶是美德！

最后，在src目錄下的main.js里把這些工具函數(shù)連接起來:

寫完這一大串后，發(fā)現(xiàn)命令行里報了一堆錯，看了看，應(yīng)該是引入了bootstrap,iview的css，而默認的webpack配置文件沒有相應(yīng)的loader, 于是先安裝下這些loader:

然后，修改webpack.config.js文件，給file-loader加上woff|woff2|ttf|eot，因為bootstrap用到了這些字體文件，然后再加上style-loader!css-loader, 修改如下：

再次npm run dev后，熟悉的首頁又回來啦。

打開App.vue，修改后的App.vue如下：

其實就是用App這個組件作為總的樹根，然后Home和Login兩個組件作為路由子組件加載進來。

添加components目錄，再添加Login.vue和Home.vue

Home.vue

添加完畢后，npm run dev 就可以測試了。按照之前設(shè)計的邏輯，首先請求，http://localhost:8080, 由于/路由對應(yīng)的是Home.vue,而Home組建創(chuàng)建的時候，調(diào)用了一個后端需要權(quán)限的API，于是返回401錯誤，然后被重定向到login去登錄。

登錄的時候，發(fā)現(xiàn)報錯：

意思是說跨域了，http://localhost:8080， 不被后端接受。跨域問題有很多解決方法，本人傾向于用應(yīng)用服務(wù)器配置解決，這里以 Apache為例，在后端的web目錄下，加上一.htaccess文件，內(nèi)容如下:

告訴Apache，不要管跨域問題啦。Nginx的話，添加：

跨越問題其實挺復(fù)雜， 建議多看看相關(guān)資料，這里就不多說了。

加了.htaccess文件后，刷新下頁面，發(fā)現(xiàn)來到了登錄頁面，這就對啦。

繼續(xù)用admin，admin登錄。相信就能正常啦。

本文花了1天時間寫成，踩坑花了至少3天時間，如果您讀到這里，恭喜您，您是一個有耐心和愛學(xué)習(xí)的人。沒有更多內(nèi)容了。代碼已上傳到碼云，隨意獲取查看：

前臺：http://git.oschina.net/linwx/basic_front 后臺：http://git.oschina.net/linwx/basic_backend

希望您也能感受到使用Vue2和Yii2快速開發(fā)的樂趣！