本篇文章给大家分享一个Vue+Laravel开发教程，介绍一下怎么使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用，希望对大家有所帮助！
CURD （增删改查）是数据存储的基本操作，也是你作为 Laravel 开发人员首先要学习的内容之一
但是，如果要结合以 Vue.js 作为前端的应用程序该注意哪些问题呢？首先，因为现在的操作不刷新页面，所以你需要异步 CURD 。因此，你需要确保数据在前后端的一致性。（学习视频分享：vuejs教程）
在本教程中，我会演示如何开发完整的 Laravel&Vue.js 应用程序和每个 CURD 的例子。 AJAX 是连接前后端的关键，所以，我会使用 Axios 作为 HTTP 客户端。我还将向您展示一些处理这种体系结构的用户体验方面缺陷的方法。
你可以在 GitHub 中查看完整的项目。
https://github.com/anthonygore/vue-laravel-crud
演示 app
这是一个让使用者创建一个 “Cruds“ 的全栈应用，当我进入这个应用时，它会创造很多不可思议的东西。外星人独特的名称和可以在红色，绿色和黑色的自由转换。
Cruds 应用展示在主页，你可以通过 add 按钮添加 Cruds ， delete 按钮删除它们，或者更新它们的颜色。
Laravel 后端的 CRUD
我们将使用 Laravel 后端开始本教程，来完成 CRUD 操作。我将保持这一部分简短，因为 Laravel 的 CRUD 是其他地方广泛涉及的主题.
总之，我们完成以下操作
设置数据库
通过资源控制器来编写一个 RESTful API 的路由
在控制器中定义方法，来完成 CRUD 操作
Database
首先是迁移，我们的 Cruds 有两个属性：名称和颜色，我们将其设置为 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
现在我们来设置 RESTful API 路由. 这个 resource 方法将自动创建我们所需要的所有操作. 但是, 我们不需要 edit, show 和 store 这几个路由,因此我们需要排除它们.
routes/api.php
<?php Route::resource('/cruds', 'CrudsController', [ 'except' => ['edit', 'show', 'store']]);有了这些, 我们现在可以在API中使用以下路由:
控制器
我们现在需要在控制器中实现这些操作：
app/Http/Controllers/CrudsController.php
<?php namespace App\Http\Controllers; use App\Crud;use Illuminate\Http\Request;use Illuminate\Http\Response;use Faker\Generator; class CrudsController extends Controller{ // Methods}我们先简要概述下每种方法：
create 方法。我们使用 Laravel 附带的 Faker 包，为 Crud 随机生成名称和颜色字段 。随后，我们将新生成的数据作为 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 的全部数据。在一个更严肃的应用中，我们会使用分页，但是现在我们尽量保持简洁。
<?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 应用
现在开始处理 Vue 页面展示部分。先来创建一个组件 --- CrudComponent.vue，用来展示 Cruds 的内容。
这个组件主要是展示的功能，没有太多的业务逻辑。主要有以下几个重点：
展示一张图片，图片的颜色取决于 Crud 的颜色（ 也就是展示 red.png 还是 green.png)
有一个删除按钮，当点击时会触发
del方法，继而触发一个delete事件，并携带当前 Crud 的 ID 作为参数有一个 HTML 选择器 ( 用来选择颜色 )，当发生选择时，会触发
update方法，继而触发一个update事件，并携带当前 Crud 的 ID 和新选择的颜色作为参数
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' : ''" &nbs