通过 Laravel 创建一个 Vue 单页面应用（六）

2019-12-18 11:33:12 浏览数 (1)

我们将完成基本 CURD 的最后一部分：创建新用户。您已经拥有了我们之前讨论过的主题中所需要的所有工具，因此可以尝试创建用户并将本文与您的工作进行比较。

如果您需要跟上，我们在 第5部分  中停止了删除用户的功能，以及在成功删除后如何重定向用户。我们还研究了如何将 HTTP 客户机提取到一个专用模块中，以便在整个应用程序中重用。 提醒一下，本教程并不关注权限；我们使用内置的 Laravel users 表演示如何在 Vue 路由器项目的上下文中使用 CURD。

以下是迄今为止的系列概要：

  • 第1部分 – 设置项目和 Vue 路由器
  • 第2部分 – 在 Vue 路由器中加载异步数据
  • 第3部分 – 在 Laravel 中创建真实的用户端
  • 第4部分 – 编辑用户
  • 第5部分 – 删除用户

添加创建用户组件

首先，我们将创建并配置前端组件以创建新用户。UsersCreate.vue 组件与我们在中创建的 UsersEdit.vue 组件类似 第4部分 :

代码语言：javascript复制
<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）填充表单，而不是用空表单创建用户。

配置路由

接下来，我们需要配置 Vue 路由并链接到页面，以便可以导航到用户创建页面。打开 resources/assets/js/app.js 文件并添加以下路由（或者导入）：

代码语言：javascript复制
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 组件中的新组件：

代码语言：javascript复制
<template>
    <div class="users">
        <!-- ... -->
        <div>
            <router-link :to="{ name: 'users.create' }">Add User</router-link>
        </div>
    </div>
</template>

您现在应该可以使用 yarn watch 重新编译，并看到以下内容：

提交表单

现在，我们尚未定义后端路由，所以当提交时，API会返回 405 Method Not Allowed。让我们在不定义路由的情况下完善 UsersCreate 组件中 onSubmit() 方法，这样我们能快捷的看到提交表单时产生的错误：

代码语言：javascript复制
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() 方法：

代码语言：javascript复制
export default {
    // ...
    create(data) {
        return client.post('users', data);
    },
    // ...
};

表单将会通过发送一个 POST 请求到 UsersController。这时你提交表单的话会在控制台看到带有 405 错误状态的错误信息。

添加 API 接口

我们准备在 Laravel 中添加 API 接口以创建新用户。这将类似于编辑现有用户。但是，此响应将返回 201 Created 状态代码。

我们将首先定义通过 API 存储新用户的路径：

代码语言：javascript复制
// routes/api.php
Route::namespace('Api')->group(function () {
    // ...
    Route::post('/users', 'UsersController@store');
});

接下来，打开 app/http/controllers/userscontroller.php 文件并添加 store（） 方法：

代码语言：javascript复制
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']),
    ]));
}

当用户有效时，提交表单时，新用户的响应类似于以下内容：

代码语言：javascript复制
{
  "data": {
    "id":51,
    "name":"Paul Redmond",
    "email":"paul@example.com"
  }
}

如果您提交的数据无效，您将收到类似的消息，如下所示：

提交成功

我们已经处理了服务器错误或验证错误的情况；让我们通过创建成功的用户来结束。我们将清除表单并重定向到用户的编辑页：

代码语言：javascript复制
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组件：

代码语言：javascript复制
<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 ，也没有做过单页应用的人更好上手，我决定只关注核心部分。对一些人来说，这个教程可能是微不足道的，但对新手来说，它则着重阐述了单页应用和传统的构建服务端应用的主要不同之处。

原文地址：https://laravel-news.com/building-a-vue-spa-with-laravel-part-6

译文地址：https://learnku.com/laravel/t/34880

vue.js api laravel javascript

0 人点赞