使用vue.js + laravel開發單頁面應用

最近學了vuejs和laravel，而後順便就擼了簡單的demo，這裏將會根據這個demo介紹下如何使用vuejs+laravel開發一個簡單的單頁面應用，demo的github地址是https://github.com/helbing/laravel-vue-start-kit

開發環境

windows 窮，沒辦法，買不起蘋果
phpstudy windows中最好的php集成開發環境，沒有之一

開發中所需的一些包介紹

package.json

若是會vuejs的話，那麼絕大多數的包就算不用介紹也知道是用來作什麼的

composer.json

這裏將會用dingo api和json web token來開發後臺API
（1）dingo api文檔，https://github.com/dingo/api/wiki
（2）jwt-auth文檔，https://github.com/tymondesigns/jwt-auth/wiki

後端API配置

經過那兩篇文檔，咱們知道須要在以下幾個地方進行配置
（1）在config/app.php中加入

（2）執行php artisan vendor:publish --provider="Dingo\Api\Provider\LaravelServiceProvider"和php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"，而後再config目錄下就會自動生成api.php和jwt.php，接下來執行php artisan jwt:generate生成JWT_SECRET，最後在.env文件中寫入

在app/Http/Kernel.php中加入

（3）jwt-auth依賴於user表，也就是database/migrations/2014_10_12_000000_create_users_table.php，執行php artisan migrate生成user表，並確保app/User.php存在，而後類中加入protected $table = 'user';，否則聲明使用user表，否則會默認使用users表

初嘗dingo api

打開app/Http/routes.php文件
（1）引入dingo api，$api = app('Dingo\Api\Routing\Router');
（2）建立API版本

（3）建立路由

（4）建立相應的controller和action


BaseController爲

在開始訪問API前，咱們先來進行一些開發環境上的配置
打開phpstudy

（1）其餘選項菜單->打開hosts

（2）其餘選項菜單->站點域名管理

（*）網站目錄須要指向項目的public文件，讓/public/index.php做爲項目的入口文件

執行php aritsan api:routes

接下來就能夠在postman調試接口了demo.vue:82/api/test
將.env文件中的API_VERSION修改成v2，再次訪問接口就能夠看到去調用的是Api/V2/Controllers/TestController@index
將.env文件中的API_PREFIX修改成api2，執行php aritsan api:routes，能夠看到

使用jwt-auth

這裏將會以我寫的demo來說解如何使用jwt-auth這個包，打開Api/V1/Controllers/AuthController，能夠看到裏面寫了三個action

（1）me用於獲取用戶信息和驗證token是否過時或有效，經過傳遞token能夠進行解析獲取用戶信息
（2）login用於登陸，password字段是必須傳遞的
（3）register用於用戶註冊，password必須採用bcrypt加密，否則在JWTAuth::attempt的時候會獲取不到token，JWTAuth::attempt會對傳遞進去password自動進行bcrypt加密

接下來咱們註冊相應的路由，而後用postman進行接口調試,（*）使用jwt.auth中間件就意味着每次調用接口的時候必須傳遞token，中間件會對token進行驗證，如demo.vue:82/me?token=token_value

如今咱們經過postman調用demo.vue:82/register接口，並傳入四個參數name，email，password，password_confirmation

能夠看到成功返回了token和name，在數據庫中也能看到用戶確實被建立了

接下來咱們來調試demo.vue:82/login接口，傳入email和password兩個參數
（1）輸入了錯誤的密碼

能夠看到返回的錯誤信息

（2）輸入了正確的密碼

成功返回了token和name，這就說明用戶確實登陸成功了

最後咱們來調試demo.vue:82/me這個接口，因爲該接口使用了jwt.auth這個中間件，因此每次調用接口的時候須要帶上token
（1）傳入了一個不存在的token

（2）傳入了正確的token

成功返回了用戶信息

前端部分

前端部分我不打算講如何一步一步寫代碼，這裏會講一些須要注意的點和一些技巧，參考我寫的demo的代碼，相信你必定能很快學會如何結合laravel和vuejs寫一個單頁面應用

（1）Elixir的使用

Elixir是Laravel提供了一套乾淨、平滑的API用於爲Laravel應用定義基本的Gulp任務

以後gulp && npm run dev，這樣之後保存代碼都會自動gulp，同時還會同步到瀏覽器，大大節約了開發時間

（2）beforeEach和自定義字段的使用

beforeEach和自定義字段的用法能夠查看文檔http://router.vuejs.org/zh-cn/api/before-each.html和http://router.vuejs.org/zh-cn/route.html

首先打開/resources/assets/js/routers.js，能夠看到這段代碼

我在路由跳轉前進行了一些斷定，我在/auth/profile，/dog等路由設置了自定義字段auth: true，讓用戶在跳轉到這些頁面時候斷定token存不存在，不存在則代表用戶未登錄，直接跳轉到/auth/login。在/auth/login，/auth/register我設置了自定義字段guest: true，讓用戶在登錄後（token存在）沒法再跳轉到這些頁面，若是訪問了，則跳轉到/auth/profile

localStroage的使用

由於調用某些接口須要用到token，因此須要將token值存入localStroage中方便取出使用。雖然能夠將token存在store中，然而在有些地方，好比ready()中沒法獲取到store中的值（參考/resource/assets/js/components/Auth/Profile.vue），因此將token值存儲在localStroage比較合適。