Laravel5.5+vue2 做一个简单的任务管理系统，包含增删改查

先看一下效果，大概就是这样。
demo gif

其实是照着视频做的，地址是https://www.youtube.com/watch?v=F-Bhipbt0K...

第一步：安装laravel，建一个任务表，写接口。

新建task模型以及migration迁移文件php artisan make:model Task -m。

//tasks表迁移文件
Schema::create('tasks', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->boolean('completed')->default(false);
    $table->timestamps();
});

新建资源控制器php artisan make:controller TaskController --resource，接着在route/api.php中编写api路由。

Route::resource('/tasks', 'TaskController', ['except'=>[
    'create', 'show', 'edit'    //排除不需要的几个路由
]]);

然后在TaskController里编写具体的方法。

public function index()
{
    return Task::all();
}

public function store(Request $request)
{
    $task = new Task();
    $task->name = $request->input('name');
    $task->save();

    return $task;
}

public function update(Request $request, $id)
{
    $task = Task::findOrFail($id);
    $task->completed = $request->input('completed');
    $task->save();

    return $task;
}

public function destroy($id)
{
    $task = Task::findOrFail($id);
    $task->delete();

    return 204;
}

以上完成后可以用postman测试接口，路由为/api/tasks，如果正常的话就可以进行下一步了。

第二步：在laravel中写好vue任务组件，测试。

首先安装一下npm依赖，在根目录cnpm i，然后npm run watch可以开始工作了。
在laravel中，路由/进入欢迎界面，编辑welcome.blade.php为:

<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel to do app</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div class="container" id="app">
            wait...
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

进入resource/assets/js/app.js中引入一个新task组件Vue.component('tasks',require('./components/Tasks.vue'))，附上Task.vue全部代码。

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">My Tasks</div>

                    <div class="panel-body">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="task.name" @keydown.enter="create">
                            <span class="input-group-btn">
                                <button class="btn btn-success" @click="create">Add</button>
                            </span>
                        </div>

                        <div class="tasks-list">
                            <div class="alert alert-danger" v-if="!tasks.length">
                                You have no task!
                            </div>
                            <ul class="list-unstyled">
                                <li class="checkbox" v-for="task in tasks" @click="done(task)"
                                    :class="{ done: task.completed}">
                                    <div class="check-box">
                                        <label>
                                            <input type="checkbox" v-model="task.completed"/> {{ task.name }}
                                        </label>
                                        <div class="pull-right">
                                            <a href="#" @click.prevent="remove(task)"> X </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="panel-footer" v-if="tasks.length">
                        <span class="label label-default">You have {{ tasks.length }} tasks</span>
                        <span class="label label-success">{{ remainingTasks() }} tasks completed</span>
                        <span class="label label-warning">{{ completedTasks() }} tasks left</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.fetchData()
        },
        data() {
            return {
                tasks: [],
                task: {
                    name: ''
                }
            }
        },
        methods: {
            fetchData() {
                axios.get('/api/tasks').then(res => {
                    this.tasks = res.data
                }).catch(err => {
                    console.log(err)
                })
            },

            create() {
                if (this.task.name == '') {
                    alert('请先输入任务名')
                    return false
                }
                axios.post('/api/tasks', this.task).then(res => {
                    this.tasks.unshift(res.data)
                    this.task.name = ''
                }).catch(err => {
                    console.log(err)
                })
            },

            done(task) {
                axios.put('/api/tasks/' + task.id, {
                    completed: !task.completed
                }).then(res => {
                    console.log('updated')
                }).catch(err => {
                    console.log(err)
                })
            },

            remove(task) {
                axios.delete('/api/tasks/' + task.id).then(res => {
                    const taskIndex = this.tasks.indexOf(task)
                    this.tasks.splice(taskIndex, 1)
                }).catch(err => {
                    console.log(err)
                })
            },

            remainingTasks() {
                return this.tasks.filter(task => {
                    return !task.completed
                }).length
            },

            completedTasks() {
                return this.tasks.filter(task => {
                    return task.completed
                }).length
            }
        }
    }
</script>

<style>
    body, .tasks-list {
        padding-top: 20px;
    }

    .done label {
        text-decoration: line-through;
    }
</style>

然后就可以在welcome模板中的wait...那里替换成<tasks></tasks>，刷新再看看浏览器的变化。