为类别 API 构建用户界面：添加类别

---

路由配置

我们将为项目添加路由功能。首先运行上述代码，然后按“Ctrl + C”停止终端。

接着执行命令：vue add router。

该命令会创建一个 router 目录，并在其中生成 index.js 文件。
同时还会创建一个 views 目录，包含以下两个文件：

1. About.vue
2. Home.vue

接下来再次运行 npm run serve 命令。

运行后，你将在首页看到两个导航链接。也可以直接在下方代码编辑器中预览已配置好的路由：

删除 Helloworld 组件

删除 Helloworld 组件，并移除 Home.vue 文件中第 4、10 和 15 行的内容，即 Vue Logo 图片和对 HelloWorld 的引用。

1<template>
2  <div class="home">
3    <img alt="Vue logo" src="../assets/logo.png"> <!-- 删除此行 -->
4    <HelloWorld msg="Welcome to Your Vue.js App"/> <!-- 删除此行 -->
5  </div>
6</template>
7
8<script>
9// @ 是 /src 的别名
10import HelloWorld from '@/components/HelloWorld.vue' <!-- 删除此行 -->
11
12export default {
13  name: 'Home',
14  components: {
15    HelloWorld <!-- 删除此行 -->
16  }
17}
18</script>

应用样式美化

打开 index.html 文件，将内容替换为以下代码：

注意：我们已引入基础字体、Bootstrap CSS 和 jQuery。

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0">
7  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8  <title>Demo 电商应用</title>
9
10  <!-- Google 字体 -->
11  <link rel="preconnect" href="https://fonts.gstatic.com">
12  <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
13  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;1,300;1,400&display=swap" rel="stylesheet">
14  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
15  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
16
17  <!-- Bootstrap CSS -->
18  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
19
20  <!-- Bootstrap Icons -->
21  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
22  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
23</head>
24<body>
25<noscript>
26  <strong>很抱歉，当前页面需要启用 JavaScript 才能正常运行。请开启后继续。</strong>
27</noscript>
28<div id="app"></div>
29
30<script type="module" src="https://unpkg.com/ionicons@5.2.3/dist/ionicons/ionicons.esm.js"></script>
31
32<!-- Bootstrap JS 脚本 -->
33<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
34<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
35<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
36
37<!-- 打包后的文件将自动注入 -->
38</body>
39</html>

AddCategory.vue 文件

本节我们将学习如何创建用于添加分类的表单：

1. 在 views 目录下新建一个 Category 文件夹。
2. 创建名为 AddCategory.vue 的文件。

1<template>
2  <div class="container">
3    <div class="row">
4      <div class="col-12 text-center">
5        <h3 class="pt-3">添加新分类</h3>
6      </div>
7    </div>
8
9    <div class="row">
10      <div class="col-3"></div>
11      <div class="col-md-6 px-5 px-md-0">
12        <form>
13          <div class="form-group">
14            <label>分类名称</label>
15            <input type="text" class="form-control" v-model="categoryName" required>
16          </div>
17          <div class="form-group">
18            <label>描述</label>
19            <input type="text" class="form-control" v-model="description" required>
20          </div>
21          <div class="form-group">
22            <label>图片链接</label>
23            <input type="url" class="form-control" v-model="imageURL" required>
24          </div>
25          <button type="button" class="btn btn-primary">提交</button>
26        </form>
27      </div>
28      <div class="col-3"></div>
29    </div>
30  </div>
31</template>
32
33<script>
34export default {
35  data() {
36    return {
37      categoryName: null,
38      description: null,
39      imageURL: null,
40    }
41  },
42  props: [],
43  methods: {}
44}
45</script>
46
47<style scoped>
48h4 {
49  font-family: 'Roboto', sans-serif;
50  color: #484848;
51  font-weight: 700;
52}
53</style>

更新路由路径

为了让单页应用正常运行，我们需要为新创建的组件配置路由路径。打开 src/router/index.js 文件并进行如下修改：

1import { createRouter, createWebHistory } from 'vue-router'
2import Home from '../views/Home.vue'
3import AddCategory from "../views/Category/AddCategory";
4
5const routes = [
6  {
7    path: "/",
8    name: "Home",
9    component: Home,
10  },
11  {
12    path: "/about",
13    name: "About",
14    component: () =>
15      import(/* webpackChunkName: "about" */ "../views/About.vue"),
16  },
17  {
18    path: "/admin/category/add",
19    name: "AddCategory",
20    component: AddCategory,
21  },
22];
23
24const router = createRouter({
25  history: createWebHistory(process.env.BASE_URL),
26  routes
27})
28
29export default router

效果预览

以下是添加分类表单的最终效果预览：

集成 Axios

Axios 是一个流行的基于 Promise 的 HTTP 客户端，支持简洁易用的 API，可在浏览器和 Node.js 环境中使用。

1. 执行命令：npm install --save axios
2. 在 main.js 中添加一行代码：window.axios = require('axios')

集成 Sweet Alert

Sweet Alert 是 JavaScript alert 方法的美观替代方案，功能相同但界面更友好。

安装命令：npm install --save sweetalert

同时添加以下代码：

1import swal from 'sweetalert';
2window.Swal = swal

现在整个应用都可以使用 axios 和 sweetalert。

发起 API 请求

1. 点击提交按钮时触发 addCategory 函数。通过在按钮上添加 @click="addCategory" 实现。

1<button type="button" class="btn btn-primary" @click="addCategory">提交</button>

在 <script> 标签的 methods 区域定义该函数：

1<script>
2var axios = require('axios')
3import swal from 'sweetalert';
4
5export default {
6  data() {
7    return {
8      categoryName: null,
9      description: null,
10      imageURL: null,
11    }
12  },
13  methods: {
14    async addCategory() {
15      const newCategory = {
16        categoryName: this.categoryName,
17        description: this.description,
18        imageUrl: this.imageURL,
19      };
20
21      const baseURL = "https://limitless-lake-55070.herokuapp.com/";
22
23      await axios({
24        method: 'post',
25        url: baseURL + "category/create",
26        data: JSON.stringify(newCategory),
27        headers: {
28          'Content-Type': 'application/json'
29        }
30      })
31      .then(() => {
32        swal({
33          text: "分类添加成功！",
34          icon: "success",
35          closeOnClickOutside: false,
36        });
37      })
38      .catch(err => console.log(err));
39    }
40  },
41  mounted() {}
42}
43</script>

点击按钮即可查看效果。

最终代码