經過 Laravel 建立一個 Vue 單頁面應用（六）

時間 2019-11-06

標籤經過 laravel 建立一個 vue 頁面應用简体版

原文原文鏈接

文章轉發自專業的Laravel開發者社區，原始連接：learnku.com/laravel/t/3…php

咱們將完成基本 CURD 的最後一部分：建立新用戶。您已經擁有了咱們以前討論過的主題中所須要的全部工具，所以能夠嘗試建立用戶並將本文與您的工做進行比較。css

若是您須要跟上，咱們在第5部分中中止了刪除用戶的功能，以及在成功刪除後如何重定向用戶。咱們還研究瞭如何將 HTTP 客戶機提取到一個專用模塊中，以便在整個應用程序中重用。 提醒一下，本教程並不關注權限；咱們使用內置的 Laravel users 表演示如何在 Vue 路由器項目的上下文中使用 CURD。前端

如下是迄今爲止的系列概要：vue

添加建立用戶組件

首先，咱們將建立並配置前端組件以建立新用戶。UsersCreate.vue 組件與咱們在中建立的 UsersEdit.vue 組件相似第4部分:laravel

<template>
    <div>
        <h1>Create a User</h1>
        <div v-if="message" class="alert">{{ message }}</div>
        <form @submit.prevent="onSubmit($event)">
          <div class="form-group">
              <label for="user_name">Name</label>
              <input id="user_name" v-model="user.name" />
          </div>
          <div class="form-group">
              <label for="user_email">Email</label>
              <input id="user_email" type="email" v-model="user.email" />
          </div>
          <div class="form-group">
              <label for="user_password">Password</label>
              <input id="user_password" type="password" v-model="user.password" />
          </div>
          <div class="form-group">
              <button type="submit" :disabled="saving">
                  {{ saving ? 'Creating...' : 'Create' }}
              </button>
          </div>
        </form>
    </div>
</template>
<script>
    import api from '../api/users';

    export default {
        data() {
            return {
                saving: false,
                message: false,
                user: {
                    name: '',
                    email: '',
                    password: '',
                }
            }
        },
        methods: {
            onSubmit($event) {
                this.saving = true
                this.message = false
            }
        }
    }
</script>
<style lang="scss" scoped>
$red: lighten(red, 30%);
$darkRed: darken($red, 50%);

.form-group {
    margin-bottom: 1em;
    label {
        display: block;
    }
}
.alert {
    background: $red;
    color: $darkRed;
    padding: 1rem;
    margin-bottom: 1rem;
    width: 50%;
    border: 1px solid $darkRed;
    border-radius: 5px;
}
</style>

複製代碼

咱們添加了表單和輸入，並刪除了一個onSubmit方法。組件的其他部分與 UsersEdit 組件相同，除了添加了 password 輸入。建立新用戶須要密碼。咱們在編輯用戶時跳過了密碼字段，由於一般狀況下，您有一個與編輯用戶不一樣的特定密碼更改流。後端

請注意，咱們能夠花一些時間將 create 和 edit 視圖中的表單提取到一個專用組件中，但咱們會將其保留一段時間（或者能夠自由地獨立處理）。惟一的區別是用現有用戶數據（包括用戶id）填充表單，而不是用空表單建立用戶。api

配置路由

接下來，咱們須要配置 Vue 路由並連接到頁面，以即可以導航到用戶建立頁面。打開 resources/assets/js/app.js 文件並添加如下路由（或者導入）：bash

import UsersCreate from './views/UsersCreate';

// ...

const router = new VueRouter({
    mode: 'history',
    routes: [
        // ...
        {
            path: '/users/create',
            name: 'users.create',
            component: UsersCreate,
        },
        { path: '/404', name: '404', component: NotFound },
        { path: '*', redirect: '/404' },
    ],
});

複製代碼

接下來，咱們將連接添加到 assets/js/views/usersindex.vue 組件中的新組件：服務器

<template>
    <div class="users">
        <!-- ... -->
        <div>
            <router-link :to="{ name: 'users.create' }">Add User</router-link>
        </div>
    </div>
</template>

複製代碼

您如今應該可使用 yarn watch 從新編譯，並看到如下內容：app

提交表單

如今，咱們還沒有定義後端路由，因此當提交時，API會返回 405 Method Not Allowed。讓咱們在不定義路由的狀況下完善 UsersCreate 組件中 onSubmit() 方法，這樣咱們能快捷的看到提交表單時產生的錯誤：

methods: {
    onSubmit($event) {
        this.saving = true
        this.message = false
        api.create(this.user)
            .then((data) => {
                console.log(data);
            })
            .catch((e) => {
                this.message = e.response.data.message || 'There was an issue creating the user.';
            })
            .then(() => this.saving = false)
    }
}

複製代碼

目前，咱們的表單只是將返回值輸出到控制檯，抓取錯誤，而後切換 saving = false 來隱藏「saving」狀態。咱們嘗試從返回值中拿到 message 屬性或給予一個默認的錯誤信息。

下一步，咱們在 resources/assets/js/api/users.js 這個 API 模塊中添加 create() 方法：

export default {
    // ...
    create(data) {
        return client.post('users', data);
    },
    // ...
};

複製代碼

表單將會經過發送一個 POST 請求到 UsersController。這時你提交表單的話會在控制檯看到帶有 405 錯誤狀態的錯誤信息。

添加 API 接口

咱們準備在 Laravel 中添加 API 接口以建立新用戶。這將相似於編輯現有用戶。可是，此響應將返回 201 Created 狀態代碼。

咱們將首先定義經過 API 存儲新用戶的路徑：

// routes/api.php
Route::namespace('Api')->group(function () {
    // ...
    Route::post('/users', 'UsersController@store');
});

複製代碼

接下來，打開 app/http/controllers/userscontroller.php 文件並添加 store（） 方法：

public function store(Request $request)
{
    $data = $request->validate([
        'name' => 'required',
        'email' => 'required|unique:users',
        'password' => 'required|min:8',
    ]);

    return new UserResource(User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),
    ]));
}

複製代碼

當用戶有效時，提交表單時，新用戶的響應相似於如下內容：

{
  "data": {
    "id":51,
    "name":"Paul Redmond",
    "email":"paul@example.com"
  }
}

複製代碼

若是您提交的數據無效，您將收到相似的消息，以下所示：

提交成功

咱們已經處理了服務器錯誤或驗證錯誤的狀況；讓咱們經過建立成功的用戶來結束。咱們將清除表單並重定向到用戶的編輯頁：

onSubmit($event) {
    this.saving = true
    this.message = false
    api.create(this.user)
        .then((response) => {
            this.$router.push({ name: 'users.edit', params: { id: response.data.data.id } });
        })
        .catch((e) => {
            this.message = e.response.data.message || 'There was an issue creating the user.';
        })
        .then(() => this.saving = false)
}

複製代碼

下面是最後一個UsersCreate.vue組件：

<template>
    <div>
        <h1>Create a User</h1>
        <div v-if="message" class="alert">{{ message }}</div>
        <form @submit.prevent="onSubmit($event)">
          <div class="form-group">
              <label for="user_name">Name</label>
              <input id="user_name" v-model="user.name" />
          </div>
          <div class="form-group">
              <label for="user_email">Email</label>
              <input id="user_email" type="email" v-model="user.email" />
          </div>
          <div class="form-group">
              <label for="user_password">Password</label>
              <input id="user_password" type="password" v-model="user.password" />
          </div>
          <div class="form-group">
              <button type="submit" :disabled="saving">
                  {{ saving ? 'Creating...' : 'Create' }}
              </button>
          </div>
        </form>
    </div>
</template>
<script>
    import api from '../api/users';

    export default {
        data() {
            return {
                saving: false,
                message: false,
                user: {
                    name: '',
                    email: '',
                    password: '',
                }
            }
        },
        methods: {
            onSubmit($event) {
                this.saving = true
                this.message = false
                api.create(this.user)
                    .then((response) => {
                        this.$router.push({ name: 'users.edit', params: { id: response.data.data.id } });
                    })
                    .catch((e) => {
                        this.message = e.response.data.message || 'There was an issue creating the user.';
                    })
                    .then(() => this.saving = false)
            }
        }
    }
</script>
<style lang="scss" scoped>
$red: lighten(red, 30%);
$darkRed: darken($red, 50%);

.form-group {
    margin-bottom: 1em;
    label {
        display: block;
    }
}
.alert {
    background: $red;
    color: $darkRed;
    padding: 1rem;
    margin-bottom: 1rem;
    width: 50%;
    border: 1px solid $darkRed;
    border-radius: 5px;
}
</style>

複製代碼

結束

咱們如今有了一個簡單的帶有簡單數據驗證的表單來建立用戶。這個教程帶你瞭解了 Vue 中基礎的 CRUD。

做爲做業，你能夠定義一個單獨的用戶表單組件來處理用戶的新建和編輯（若是你認爲它值得複用）。目前來講，來回複製代碼就夠了，可是，最佳實踐依然是建立可複用的組件。

在此指出，咱們其實還能夠作不少，包括使用一個相似 Bootstrap 的 CSS 框架等等。但爲了讓那些歷來沒有使用過 Vue Router ，也沒有作過單頁應用的人更好上手，我決定只關注核心部分。對一些人來講，這個教程多是微不足道的，但對新手來講，它則着重闡述了單頁應用和傳統的構建服務端應用的主要不一樣之處。

相關標籤/搜索

每日一句

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