本篇文章給大家分享一個(gè)Vue+Laravel開發(fā)教程，介紹一下怎么使用 Vue.js 和 Laravel 共建一個(gè)簡單的 CRUD 應(yīng)用，希望對(duì)大家有所幫助！

CURD （增刪改查）是數(shù)據(jù)存儲(chǔ)的基本操作，也是你作為 Laravel 開發(fā)人員首先要學(xué)習(xí)的內(nèi)容之一

但是，如果要結(jié)合以 Vue.js 作為前端的應(yīng)用程序該注意哪些問題呢？首先，因?yàn)楝F(xiàn)在的操作不刷新頁面，所以你需要異步 CURD 。因此，你需要確保數(shù)據(jù)在前后端的一致性。（學(xué)習(xí)視頻分享：vuejs教程）

在本教程中，我會(huì)演示如何開發(fā)完整的 Laravel&Vue.js 應(yīng)用程序和每個(gè) CURD 的例子。 AJAX 是連接前后端的關(guān)鍵，所以，我會(huì)使用 Axios 作為 HTTP 客戶端。我還將向您展示一些處理這種體系結(jié)構(gòu)的用戶體驗(yàn)方面缺陷的方法。

你可以在 GitHub 中查看完整的項(xiàng)目。

https://github.com/anthonygore/vue-laravel-crud

演示 app

這是一個(gè)讓使用者創(chuàng)建一個(gè) “Cruds“ 的全棧應(yīng)用，當(dāng)我進(jìn)入這個(gè)應(yīng)用時(shí)，它會(huì)創(chuàng)造很多不可思議的東西。外星人獨(dú)特的名稱和可以在紅色，綠色和黑色的自由轉(zhuǎn)換。

Cruds 應(yīng)用展示在主頁，你可以通過 add 按鈕添加 Cruds ， delete 按鈕刪除它們，或者更新它們的顏色。

Laravel 后端的 CRUD

我們將使用 Laravel 后端開始本教程，來完成 CRUD 操作。我將保持這一部分簡短，因?yàn)?Laravel 的 CRUD 是其他地方廣泛涉及的主題.

總之，我們完成以下操作

• 設(shè)置數(shù)據(jù)庫
• 通過資源控制器來編寫一個(gè) RESTful API 的路由
• 在控制器中定義方法，來完成 CRUD 操作

Database

首先是遷移，我們的 Cruds 有兩個(gè)屬性：名稱和顏色，我們將其設(shè)置為 text 類型

2018_02_02_081739_create_cruds_table.php

<?php  ...  class CreateCrudsTable extends Migration {   public function up()   {     Schema::create('cruds', function (Blueprint $table) {       $table->increments('id');       $table->text('name');       $table->text('color');       $table->timestamps();     });   }    ... } ...

API

現(xiàn)在我們來設(shè)置 RESTful API 路由. 這個(gè) resource 方法將自動(dòng)創(chuàng)建我們所需要的所有操作. 但是, 我們不需要 edit, show 和 store 這幾個(gè)路由,因此我們需要排除它們.

routes/api.php

<?php  Route::resource('/cruds', 'CrudsController', [   'except' => ['edit', 'show', 'store'] ]);

有了這些, 我們現(xiàn)在可以在API中使用以下路由:

控制器

我們現(xiàn)在需要在控制器中實(shí)現(xiàn)這些操作：

app/Http/Controllers/CrudsController.php

<?php  namespace AppHttpControllers;  use AppCrud; use IlluminateHttpRequest; use IlluminateHttpResponse; use FakerGenerator;  class CrudsController extends Controller {   // Methods }

我們先簡要概述下每種方法：

create 方法。我們使用 Laravel 附帶的 Faker 包，為 Crud 隨機(jī)生成名稱和顏色字段 。隨后，我們將新生成的數(shù)據(jù)作為 JSON 返回。

<?php  ...  public function create(Generator $faker) {   $crud = new Crud();   $crud->name = $faker->lexify('????????');   $crud->color = $faker->boolean ? 'red' : 'green';   $crud->save();    return response($crud->jsonSerialize(), Response::HTTP_CREATED); }

index方法。我們使用 index 方法返回 Cruds 的全部數(shù)據(jù)。在一個(gè)更嚴(yán)肅的應(yīng)用中，我們會(huì)使用分頁，但是現(xiàn)在我們盡量保持簡潔。

<?php  ...  public function index() {   return response(Crud::all()->jsonSerialize(), Response::HTTP_OK); }

update。此方法允許客戶端更改 Crud 的顏色。

<?php  ...  public function update(Request $request, $id) {   $crud = Crud::findOrFail($id);   $crud->color = $request->color;   $crud->save();    return response(null, Response::HTTP_OK); }

destroy。 刪除 Cruds 的方法。

<?php  ...  public function destroy($id) {   Crud::destroy($id);    return response(null, Response::HTTP_OK); }

Vue.js 應(yīng)用

現(xiàn)在開始處理 Vue 頁面展示部分。先來創(chuàng)建一個(gè)組件 — CrudComponent.vue，用來展示 Cruds 的內(nèi)容。

這個(gè)組件主要是展示的功能，沒有太多的業(yè)務(wù)邏輯。主要有以下幾個(gè)重點(diǎn)：

• 展示一張圖片，圖片的顏色取決于 Crud 的顏色（ 也就是展示 red.png 還是 green.png)
• 有一個(gè)刪除按鈕，當(dāng)點(diǎn)擊時(shí)會(huì)觸發(fā) del 方法，繼而觸發(fā)一個(gè) delete 事件，并攜帶當(dāng)前 Crud 的 ID 作為參數(shù)
• 有一個(gè) HTML 選擇器 ( 用來選擇顏色 )，當(dāng)發(fā)生選擇時(shí)，會(huì)觸發(fā) update 方法，繼而觸發(fā)一個(gè) update 事件，并攜帶當(dāng)前 Crud 的 ID 和新選擇的顏色作為參數(shù)

resources/assets/js/components/CrudComponent.vue

<template>   <p class="crud">     <p class="col-1">       <img :src="image"/>     </p>     <p class="col-2">       <h3>Name: {{ name | properCase }}</h3>       <select @change="update">         <option           v-for="col in [ 'red', 'green' ]"           :value="col"           :key="col"           :selected="col === color ? 'selected' : ''"         >{{ col | properCase }}</option>       </select>       <button @click="del">Delete</button>     </p>   </p> </template> <script>   export default {     computed: {       image() {         return `/images/${this.color}.png`;       }     },     methods: {       update(val) {         this.$emit('update', this.id, val.target.selectedOptions[0].value);       },       del() {         this.$emit('delete', this.id);       }     },     props: ['id', 'color', 'name'],     filters: {       properCase(string) {         return string.charAt(0).toUpperCase() + string.slice(1);       }     }   } </script> <style>...</style>

在這個(gè)項(xiàng)目中還有一個(gè)組件 App.vue。它在整個(gè)項(xiàng)目中的地位非常重要，所有主要的邏輯都寫在這里。下面就來逐步分析這個(gè)文件。

先從 template 標(biāo)簽開始, 它主要處理了下面這些業(yè)務(wù)：

• 為我們上面提到的 crud-component 組件占位
• 遍歷包含 Crud 對(duì)象的數(shù)組（也就是 cruds 數(shù)組 )，數(shù)組中的每個(gè)元素都對(duì)應(yīng)著一個(gè) crud-component 組件。我們以 props 的形式把每個(gè) Crud 的屬性傳遞給這個(gè)組件，并且監(jiān)聽來自這個(gè)組件的 update 和 delete 事件
• 設(shè)置一個(gè) Add 按鈕，當(dāng)點(diǎn)擊時(shí)，會(huì)觸發(fā) create 方法，從而創(chuàng)建新的 Cruds

resources/assets/js/components/App.vue

<template>   <p id="app">     <p class="heading">       <h1>Cruds</h1>     </p>     <crud-component       v-for="crud in cruds"       v-bind="crud"       :key="crud.id"       @update="update"       @delete="del"     ></crud-component>     <p>       <button @click="create()">Add</button>     </p>   </p> </template>

下面來看 App.js 文件的 script 部分:

• 首先通過 Crud 函數(shù)創(chuàng)建用于展示 Cruds 的對(duì)象, 包括 ID, 顏色和姓名
• 然后， 引入 CrudComponent 組件
• 組件的 cruds 數(shù)組作為 data 的屬性。 關(guān)于對(duì) CRUD 的增刪改查的具體操作， 會(huì)在下一步展開說明。

resources/assets/js/components/App.vue

<template>...</template> <script>   function Crud({ id, color, name}) {     this.id = id;     this.color = color;     this.name = name;   }    import CrudComponent from './CrudComponent.vue';    export default {     data() {       return {         cruds: []       }     },     methods: {       create() {         // 待完善       },       read() {         // 待完善       },       update(id, color) {         // 待完善       },       del(id) {         // 待完善       }     },     components: {       CrudComponent     }   } </script>

前端通過 AJAX 觸發(fā) CURD

在一個(gè)完整的項(xiàng)目中，所有的 CRUD 操作都是在后端完成的，因?yàn)閿?shù)據(jù)庫是跟后端交互的。然而，觸發(fā) CRUD 的操作幾乎都是在前端完成的。

因此，一個(gè) HTTP 客戶端（也就是負(fù)責(zé)在前后端之間交互數(shù)據(jù)的橋梁）的作用是非常重要的。被 Laravel 前端默認(rèn)封裝的 Axios， 就是一個(gè)非常好用的 HTTP 客戶端。

再來看下資源表，每個(gè) AJAX 請(qǐng)求都需要有一個(gè)明確的 API 接口：

Read

首先來看 read 方法。這個(gè)方法是負(fù)責(zé)在前端發(fā)起 Cruds 請(qǐng)求的，對(duì)應(yīng)后端的處理在是控制器里的 index 方法，因此使用 GET 請(qǐng)求 /api/cruds。

由于 Laravel 前端默認(rèn)把 Axios 設(shè)置為 window 的一個(gè)屬性， 因此我們可以使用 window.axios.get 來發(fā)起一個(gè) GET 請(qǐng)求。

對(duì)于像 get, post 等 Axios 方法的返回結(jié)果，我們可以再繼續(xù)鏈?zhǔn)秸{(diào)用 then 方法，在 then 方法里可以獲取到 AJAX 響應(yīng)數(shù)據(jù)的主體 data 屬性。

resources/assets/js/components/App.vue

...  methods() {   read() {     window.axios.get('/api/cruds').then(({ data }) => {       // console.log(data)     });   },   ... }  /* Sample response:  [   {     "id": 0,     "name": "ijjpfodc",     "color": "green",     "created_at": "2018-02-02 09:15:24",     "updated_at": "2018-02-02 09:24:12"   },   {     "id": 1,     "name": "wjwxecrf",     "color": "red",     "created_at": "2018-02-03 09:26:31",     "updated_at": "2018-02-03 09:26:31"   } ] */

從上面的返回結(jié)果可以看出，返回的結(jié)果是 JSON 數(shù)組。Axios 會(huì)自動(dòng)將其解析并轉(zhuǎn)成 JavaScript 對(duì)象返給我們。這樣方便我們?cè)诨卣{(diào)函數(shù)里對(duì)結(jié)果進(jìn)行遍歷，并通過 Crud 工廠方法創(chuàng)建新的 Cruds，并存到 data 屬性的 cruds 數(shù)組中，例如 this.cruds.push(...)。

resources/assets/js/components/App.vue

...  methods() {   read() {     window.axios.get('/api/cruds').then(({ data }) => {       data.forEach(crud => {         this.cruds.push(new Crud(crud));       });     });   }, }, ... created() {   this.read(); }

注意：我們通過 created 方法，可以使程序在剛一加載時(shí)就觸發(fā) read 方法，但這并非最佳實(shí)踐。最好方案應(yīng)該是直接去掉 read 方法，當(dāng)程序第一次加載的時(shí)候，就把應(yīng)用的初始狀態(tài)都包含在文檔投中。

通過上面的步驟，我們就能看到 Cruds 展示在界面上了：

更新 (以及狀態(tài)同步)

執(zhí)行 update 方法需要發(fā)送表單數(shù)據(jù)，比如 color，這樣控制器才知道要更新哪些數(shù)據(jù)。Crud 的 ID 是從服務(wù)端獲取的。

還記得我在本文開篇就提到關(guān)于前后端數(shù)據(jù)一致的問題，這里就是一個(gè)很好的例子。

當(dāng)需要執(zhí)行 update 方法時(shí)，我們可以不用等待服務(wù)器返回結(jié)果，就在前端更新 Crud 對(duì)象，因?yàn)槲覀兒芮宄潞髴?yīng)該是什么狀態(tài)。

但是，我們不應(yīng)該這么做。為什么？因?yàn)橛泻芏嘣蚩赡軙?huì)導(dǎo)致更新數(shù)據(jù)的請(qǐng)求失敗，比如網(wǎng)絡(luò)突然中斷，或者更新的值被數(shù)據(jù)庫拒絕等。

所以等待服務(wù)器返回更新成功的信息后，再刷新前端的狀態(tài)是非常重要的，這樣我們才能確保前后端數(shù)據(jù)的一致。

resources/assets/js/components/App.vue

methods: {   read() {     ...   },   update(id, color) {     window.axios.put(`/api/cruds/${id}`, { color }).then(() => {       // 一旦請(qǐng)求成功，就更新 Crud 的顏色       this.cruds.find(crud => crud.id === id).color = color;     });   },   ... }

你可能會(huì)說這樣非必要的等待會(huì)影響用戶體驗(yàn)，但是我想說，我們?cè)诓淮_定的情況下更新狀態(tài)，誤導(dǎo)用戶，這應(yīng)該會(huì)造成更差的用戶體驗(yàn)。

創(chuàng)建和刪除

現(xiàn)在你已經(jīng)明白整個(gè)架構(gòu)的關(guān)鍵點(diǎn)了，剩下兩個(gè)方法，不需要我解釋，你也應(yīng)該能夠理解其中的邏輯了：

resources/assets/js/components/App.vue

methods: {   read() {     ...   },   update(id, color) {     ...   },   create() {     window.axios.get('/api/cruds/create').then(({ data }) => {       this.cruds.push(new Crud(data));     });   },   del(id) {     window.axios.delete(`/api/cruds/${id}`).then(() => {       let index = this.cruds.findIndex(crud => crud.id === id);       this.cruds.splice(index, 1);     });   } }

加載界面 和 禁止互動(dòng)

你應(yīng)該知道，我們這個(gè)項(xiàng)目VUE前端的CRUD操作都是異步方式的，所以前端AJAX請(qǐng)求服務(wù)器并等待服務(wù)器響應(yīng)返回響應(yīng)，總會(huì)有一點(diǎn)延遲。因?yàn)橛脩舨恢谰W(wǎng)站在做什么，此空檔期用戶的體驗(yàn)不是很好，這學(xué)問關(guān)聯(lián)到UX。

為了改善這UX問題，因此最好添加上一些加載界面并在等待當(dāng)前操作解決時(shí)禁用任何交互。這可以讓用戶知道網(wǎng)站在做了什么，而且可以確保數(shù)據(jù)的狀態(tài)。

Vuejs有很多很好的插件能完成這個(gè)功能，但是在此為了讓學(xué)者更好的理解，做一些簡單的快速的邏輯來完成這個(gè)功能，我將創(chuàng)建一個(gè)半透明的p，在AJAX操作過程中覆蓋整個(gè)屏幕，這個(gè)邏輯能完成兩個(gè)功能：加載界面和禁止互動(dòng)。一石兩鳥，完美~

resources/views/index.blade.php

<body> <p id="mute"></p> <p id="app"></p> <script src="js/app.js"></script> </body>

當(dāng)進(jìn)行 AJAX 請(qǐng)求的時(shí)候，就把 mute 的值從 false 改為 true, 通過這個(gè)值的變化，控制半透明 p 的顯示或隱藏。

resources/assets/js/components/App.vue

export default {   data() {     return {       cruds: [],       mute: false     }   },   ... }

下面就是在 update 方法中切換 mute 值的過程。當(dāng)執(zhí)行 update 方法時(shí)，mute 值被設(shè)為 true。當(dāng)請(qǐng)求成功，再把 mute 值設(shè)為 false, 這樣用戶就可以繼續(xù)操作應(yīng)用了。

resources/assets/js/components/App.vue

update(id, color) {   this.mute = true;   window.axios.put(`/api/cruds/${id}`, { color }).then(() => {     this.cruds.find(crud => crud.id === id).color = color;     this.mute = false;   }); },

在 CRUDE 的每個(gè)方法里都要有這樣的操作，在此，為了節(jié)約篇幅，我就不一一寫明了。

為了保證大家不會(huì)忘記這個(gè)重要的操作，我們直接在 <p id="app"></p> 元素上方增加了 <p id="mute"></p> 元素。

從下面的代碼可以看到，當(dāng) <p id="mute"> 元素被加上 class on 后，它將以灰色調(diào)完全覆蓋整個(gè)應(yīng)用，并阻止所有的點(diǎn)擊事件：

resources/views/index.blade.php

<!doctype html> <html lang="{{ app()->getLocale() }}"> <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1">   <meta name="csrf-token" content="{{ csrf_token() }}">   <title>Cruds</title>   <style>     html, body {       margin: 0;       padding: 0;,       height: 100%;       width: 100%;       background-color: #d1d1d1     }     #mute {       position: absolute;     }     #mute.on {       opacity: 0.7;       z-index: 1000;       background: white;       height: 100%;       width: 100%;     }   </style> </head> <body> <p id="mute"></p> <p id="app"></p> <script src="js/app.js"></script> </body> </html>

最后一個(gè)問題是對(duì)于 on class 的管理，我們可以在 mute 的值上加一個(gè) watch，每當(dāng) mute 的值發(fā)生改變的時(shí)候，就加上或刪除 on class：

export default {   ...   watch: {     mute(val) {       document.getElementById('mute').className = val ? "on" : "";     }   } }

完成上面所有的步驟，你就可以擁有一個(gè)帶有加載指示器的全棧Vue / Laravel CRUD 的應(yīng)用程序了。再來看下完整效果吧：

你可以從 GitHub 獲取代碼，如果有任何問題或者想法，歡迎給我留言！

英文原文地址：https://vuejsdevelopers.com/2018/02/05/vue-laravel-crud/

譯文地址：https://learnku.com/vuejs/t/24724

（學(xué)習(xí)視頻分享：web前端開發(fā)、編程入門）