学习 Vue.js:与 Laravel 结合持久化 Todo 数据(准备篇)

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

准备工作

Laravel

  1. 创建项目
$ laravel new ApiServer
  1. 下载 barryvdh/laravel-cors

Laravel API 默认会阻止跨域请求(Cross-Origin Resource Sharing),这个包能开放跨域请求。

$ composer require barryvdh/laravel-cors

配置过程参看 文档

  1. 迁移 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
  1. 创建 Todo Model
$ php artisan make:model Models\Todo

修改

protected $fillable = [
    'title', 'completed',
];
  1. 写 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)」的地方,输入 Yvue-router 与 vue 结合,给单页应用提供路由功能。

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

$ cd todos
$ npm install
$ npm run dev

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

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