Vue 2.0 入門系列（12）用面向對象的概念去實現任務列表 (1)

時間 2019-12-12

原文原文鏈接

12. 面向對象的任務列表實現 (1)

後臺

初始化

建立一個新應用:javascript

$ laravel new vue-to-do
$ cd vue-to-do

建立 Task 相關：php

$ php artisan make:model Task -mc
Model created successfully.
Created Migration: 2017_05_01_050911_create_tasks_table
Controller created successfully.

配置數據庫:css

// /.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vue_todo
DB_USERNAME=root
DB_PASSWORD=

編輯遷移文件:html

/database/migrations/2017_05_01_050911_create_tasks_table.php
Schema::create('tasks', function (Blueprint $table) {
   $table->increments('id');
   $table->string('name');
   $table->text('description');
   $table->timestamps();
});

執行遷移:前端

$ php artisan migrate

業務邏輯

路由:vue

/routes/web.php
Route::get('/tasks','TaskController@index');
Route::post('/tasks','TaskController@store');

控制器:java

/app/Http/Controllers/TaskController.php
<?php

namespace App\Http\Controllers;

use App\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    /**
     * 顯示與建立任務列表
     * @return [Response] [view]
     */
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    /**
     * 保存任務列表
     * @return [Response] [message]
     */
    public function store()
    {
        $this->validate(request(), [
            'name' => 'required',
            'description' => 'required'
        ]);

        Task::forceCreate(request('name', 'description'));

        return ['message' => '任務建立成功'];
    }
}

前端

基本功能實現

首先定義視圖：mysql

/resources/views/tasks/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-To-Do-List</title>
</head>
<body>
    <div id="app" class="container">

        @if (count($tasks))
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>任務名</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tasks as $task)
                        <tr>
                            <th>{{ $task['id']}}</th>
                            <td>{{ $task['name'] }}</td>
                            <td>{{ $task['description'] }}</td>
                        </tr>
                    @endforeach

                </tbody>
            </table>
        @endif

        <form method="POST" action="/tasks" @submit.prevent="onSubmit">

            <fieldset class="form-group">
                <label for="name">任務名</label>
                <input type="text" class="form-control" id="name" name="name" v-model="name">
            </fieldset>

            <fieldset class="form-group">
                <label for="description">任務描述</label>
                <input type="text" class="form-control" id="description" name="description" v-model="description">
            </fieldset>

            <button type="submit" class="btn btn-primary">建立</button>
        </form>

    </div>

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.1/axios.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
</body>
</html>

爲了阻止表單的提交，能夠使用 prevent 修飾符，至關於調用 Event.preventDefault() 方法。ios

前端業務邏輯:laravel

/public/js/app.js
Vue.prototype.$http = axios;
var vm = new Vue({
    el: '#app',

    data: {
        name:'',
        description:''
    },

    methods: {
        onSubmit(){
            this.$http.post('/tasks',this.$data)
        }
    }
})

這裏使用了以前介紹的 axios 包，其中，$data 爲實例的 data 對象。在這裏至關於:

this.$http.post('/tasks',{
    name: this.name,
    description: this.description
})

基本的效果以下:

Errors 類

以前只實現了正確提交的功能。接下來實現錯誤提交的狀況。

axios 的 post 請求的基本方法以下:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  // 成功
  .then(function (response) {
    console.log(response);
  })
  // 失敗
  .catch(function (error) {
    console.log(error);
  });

假如提交了一個空的表單，後臺會返回錯誤消息，咱們能夠經過 error.response.data 來訪問。好比

data: {
        name:'',
        description:'',
        errors:{}
    },

    methods: {
        onSubmit(){
            this.$http.post('/tasks',this.$data)
              .catch(error => this.errors = error.response.data);
        }
    }

爲了方便操做，能夠將其封裝成類:

Vue.prototype.$http = axios;

class Errors {

    /**
     * 初始化
     */
    constructor(){
        this.errors = {}
    }

    /**
     * 保存錯誤信息
     */
    record(errors){
        this.errors = errors;
    }

}
var vm = new Vue({
    el: '#app',

    data: {
        name:'',
        description:'',
        errors:new Errors()
    },

    methods: {
        onSubmit(){
            this.$http.post('/tasks',this.$data)
              .catch(error => this.errors.record = error.response.data);
        }
    }
})

在控制檯中查看對應的 errors 實例:

也就是說，能夠經過 errors[name][0] 的方式來訪問錯誤信息，將其寫成方法:

get(field) {
    if (this.errors[field]) {
        return this.errors[field][0];
    }
}

頁面中就能夠顯示錯誤消息了:

<fieldset class="form-group">
    <label for="name">任務名</label>
    <input type="text" class="form-control" id="name" v-model="name">
    <small class="text-danger" v-text="errors.get('name')"></small>
</fieldset>

<fieldset class="form-group">
    <label for="description">任務描述</label>
    <input type="text" class="form-control" id="description" v-model="description">
    <small class="text-danger " v-text="errors.get('description')"></small>
</fieldset>

效果以下:

接着，增長條件判斷，以決定是否顯示錯誤信息的頁面:

<small class="text-danger" v-if="errors.has('name')"  v-text="errors.get('name')"></small>
<small class="text-danger" v-if="errors.has('description')" v-text="errors.get('description')"></small>

對應的方法:

/**
 * 判斷屬性是否存在
 * @param  {string}  field
 */
has(field){
    return this.errors.hasOwnProperty(field);
}

當存在錯誤消息的時候，不容許用戶再次提交:

<button type="submit" class="btn btn-primary" :disabled="errors.any()">建立</button>

對應的方法:

any(){
    return Object.keys(this.errors).length > 0;
}

最後，用戶從新輸入時，應當清空錯誤消息:

<form method="POST" action="/tasks" @submit.prevent="onSubmit" @keydown="errors.clear($event.target.name)">

對應方法:

clear(field){
    if (field) {
        delete this.errors[field];
        return;
    }

    this.errors = {};
}

附錄：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Vue 2.0 入門系列（12）用面向對象的概念去實現任務列表 (1)

12. 面向對象的任務列表實現 (1)

後臺

初始化

業務邏輯

前端

基本功能實現

Errors 類

Vue 2.0 入門系列（12）用面向對象的概念去實現任務列表 (1)