经过 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 ，也没有作过单页应用的人更好上手，我决定只关注核心部分。对一些人来讲，这个教程多是微不足道的，但对新手来讲，它则着重阐述了单页应用和传统的构建服务端应用的主要不一样之处。