与 Nuxt 页面集成

现在我们已经准备好了服务器端，接下来需要在客户端创建一个用户界面，以便发送和获取数据。我们将在 /pages/users/ 目录下创建三个新页面。这是我们的目录结构：

users
├── index.vue
├── _id.vue
├── add
│   └── index.vue
├── update
│   └── _id.vue
└── delete
└── _id.vue

一旦我们有了这个结构，就可以在接下来的章节中创建页面并从 Nuxt 端（客户端）编写 CRUD 任务了。让我们从下一节的创建（Create）CRUD 任务开始。

创建一个用于添加新用户的添加页面

好的，我们将创建此页面以与服务器端的 POST 路由 /api/user/ 通信，从而添加一个新用户，步骤如下：

在 <template> 块中创建一个表单来收集新用户数据，如下所示：

// pages/users/add/index.vue
<form @submit.prevent="add">
  <p>Name: <input v-model="name" type="text" name="name"></p>
  <p>Slug: <input v-model="slug" type="text" name="slug"></p>
  <button type="submit">Add</button>
  <button @click="cancel">Cancel</button>
</form>

在 <script> 块中创建一个 add 方法以将数据发送到服务器，并创建一个 cancel 方法以取消表单，如下所示：

// pages/users/add/index.vue
export default {
  data() {
    return {
      name: '',
      slug: ''
    };
  },
  methods: {
    async add() {
      let { data } = await this.$axios.post('/api/user/', {
        name: this.name,
        slug: this.slug
      });
      this.$router.push('/users');
    },
    cancel() {
      this.$router.push('/users');
    }
  }
};

通过这两个步骤，我们已在客户端（Nuxt）和服务端（API）成功建立了创建（Create）CRUD 操作。现在，你可以通过刚刚创建的表单在 localhost:3000/users/add 从客户端向数据库添加新用户，该表单用于收集用户数据并将其发送到 API 的 POST 路由 localhost:3000/api/user/。在能够添加新用户之后，我们应该继续进行客户端的更新（Update）CRUD 操作。让我们开始吧。

创建一个用于更新现有用户的更新页面

更新页面与添加页面非常相似。此页面将与服务器端的 PUT 路由 /api/user/ 通信，以更新现有用户，步骤如下：

在 <template> 块中创建一个表单以显示现有数据并收集新数据。更新页面与添加页面的不同之处在于我们绑定到 <form> 元素的方法：
```
// pages/users/update/_id.vue
<form v-on:submit.prevent="update">
    //...
    <button type="submit">Update</button>
</form>
```
在 <script> 块中创建一个 update 方法以将数据发送到服务器。我们将使用 asyncData 方法来获取现有数据，如下所示：

// pages/users/update/_id.vue
export default {
    async asyncData ({ params, error }) {
        let { data } = await axios.get('/api/users/' + params.id)
        let user = data.data
        return {
            id: user._id,
            name: user.name,
            slug: user.slug,
        }
    },
    methods: {
        async update () {
            let { data } = await axios.put('/api/user/', {
                name: this.name,
                slug: this.slug,
                id: this.id,
            })
        }
    }
}

同样地，通过这两个步骤，我们已在客户端（Nuxt）和服务端（API）成功建立了更新（Update）CRUD 操作。现在，你可以通过表单在 localhost:3000/users/update 从客户端更新数据库中已有的用户，该表单用于收集用户数据并将其发送到 API 的 PUT 路由 localhost:3000/api/user/。在能够更新用户之后，我们现在应该继续进行客户端的删除（Delete）CRUD 操作。让我们开始吧。

创建一个用于删除现有用户的删除页面

此页面将与服务器端的 DELETE 路由 /api/user/ 通信，以删除现有用户：

在 <template> 块中创建一个 <button> 元素，我们可以使用它来删除文档。我们不需要表单来发送数据，因为我们可以在 remove 方法中收集数据（仅为文档的 _id 数据）。我们只需要按钮来触发此方法，如下所示：
```
// pages/users/delete/_id.vue
<button v-on:click="remove">Delete</button>
```
按照我们在 <script> 块中的解释，创建 remove 方法以将数据发送到服务器。但首先，我们需要使用 asyncData 方法来获取现有数据：

// pages/users/delete/_id.vue
export default {
    async asyncData ({ params, error }) {
        // Fetch the existing user
        // Same as in update page
    },
    methods: {
        async remove () {
            let payload = { id: this.id }
            let { data } = await axios.delete('/api/user/', {
                data: payload,
            })
        }
    }
}

最后，通过这两个步骤，我们在客户端（Nuxt）与服务器端（API）成功建立了删除 CRUD 任务。现在，你可以通过发送仅包含 ID 的用户数据，并将其发送到 localhost:3000/api/user/ 的 API DELETE 路由，从 localhost:3000/users/delete 上的客户端删除数据库中的现有用户。因此，如果你使用 npm run dev 启动应用程序，你应该看到它在 localhost:3000 上运行。

导航到以下路由以添加、更新、读取和删除用户：

localhost:3000/users：用于读取/列出所有用户
localhost:3000/users/add：用于注入新用户
localhost:3000/users/update/<id>：用于按 ID 更新现有用户
localhost:3000/users/delete/<id>：用于按 ID 删除现有用户

做得好！你终于成功完成了我们在本章中设定的里程碑。对于初学者来说，MongoDB 可能是一个令人望而生畏的主题，但是如果你遵循了我们在本章中提供的指南和里程碑，你可以轻松地创建一个相当不错的 API。当你需要探索本书中解释的 CRUD 操作之外的功能时，请使用我们提供的链接。现在，让我们总结一下你在本章中学到的内容。

你可以在我们的 GitHub 仓库的 /chapter-9/nuxt-universal/koa-mongodb/axios/ 目录下找到本章创建的代码。