学习 Vue.js：与 Laravel 结合持久化 Todo 数据（准备篇）

前面用 vue.js 写了一个 Todo 小样，但没有做持久化，下面完成。完成的具体方式是：Laravel 作为 API Server，数据存入 MySQL，前台采用 Vue Webpack Template。

准备工作

Laravel

1. 创建项目

$ laravel new ApiServer

2. 下载 barryvdh/laravel-cors

Laravel API 默认会阻止跨域请求（Cross-Origin Resource Sharing），这个包能开放跨域请求。

$ composer require barryvdh/laravel-cors

配置过程参看 文档。

3. 迁移 todos 表

创建 todos 表的迁移文件。

$ php artisan make:migration create_todos_table --create=todos

设定表格字段。

Schema::create('todos', function (Blueprint $table) {
    $table->increments('id');
    $table->string('title')->unique();
    $table->boolean('completed')->default(false);
    $table->timestamps();
});

执行迁移。

$ php artisan migrate

4. 创建 Todo Model

$ php artisan make:model Models\Todo

修改

protected $fillable = [
    'title', 'completed',
];

5. 写 API。

前台页面有对 Todo 的增、删、改（完成状态）和查的操作，总共 5 个 API，在 routes/api.php 中写。

Route::get('/todos', function (Request $request) {
    $todos = Todo::all();

    return $todos;
});

Route::get('/todo/{id}', function (Request $request, $id) {
    $todo = Todo::find($id);

    if (is_null($todo)) {
        return ['id' => -1, 'title' => '哎呀', 'desc' => '请求有误'];
    }

    return $todo;
});

Route::patch('/todo/{id}/toggleComplete', function (Request $request, $id) {
    $todo = Todo::findOrFail($id);

    $todo->completed = ! $todo->completed;
    $todo->save();

    return $todo;
});

Route::post('/todos/create', function (Request $request) {
    $data = $request->only('title');
    $data = array_merge($data, [
      'completed' => false,
    ]);

    $todo = Todo::create($data);

    return $todo;
});

Route::delete('/todo/{id}/delete', function (Request $request, $id) {
    return Todo::destroy($id);
});

Vue Webpack Template

写基于 Vue 的前端项目，有脚手架模板可以用，就像写 PHP 项目时用 Laravel，会带来开发上的极大便利。

创建 Laravel 项目使用 laravel 命令，创建 Vue 前端项目使用 vue 命令，为了能用 vue 命令，我们要安装 vue-cli。

$ npm install -g vue-cli

Vue Webpack Template 就是使用 Webpack 作为前端构建工具的脚手架模板，没有意外都是从这个模板开始开发项目的。下面创建项目 todos。

$ vue init webpack todos

安装过程中 Project name、Project description、Author 和 Vue build 走默认即可。

在提示「Install vue-router?（Y/n）」的地方，输入 Y。vue-router 与 vue 结合，给单页应用提供路由功能。

ESLint、Karma + Mocha 和 Nightwatch 都不需要安装。

$ cd todos
$ npm install
$ npm run dev

浏览器看到 http://localhost:8080/#/ 地址被打开，显示欢迎页，表示 vue 项目安装成功。地址里的 #/ 说明成功安装了 vue-router，以后的操作都是在一个页面里的。

下一节将介绍在 vue 项目中怎样与 Laravel 后台 API 交互，并且完成项目功能。

本作品采用《CC 协议》，转载必须注明作者和本文链接