基于Vue + 数据组装 + axios请求接口实现图书信息提交功能实战

前言

上节回顾

上一节针对图书信息录入前的准备做了讲解，主要是使用ElementUI的el-form做录入界面基本布局，包含了el-input el-select el-date-picker 还有图片上传等组件。同时在布局完成后，配合使用el-form自带的rules进行数据提交前验证。还不明白上下文的同学可以去看一看：使用Vue + el-form + rules实现图书信息录入功能实战

本节介绍

这一节已经是本专栏的第13篇实战博客了，在上一节的基础上，提交数据已经验证完成了，该开始组装数据，再利用axios进行提交了。一旦提交成功，项目中一大块功能就算完成了，接下来就该图书列表模块了。

一、数据组装

现在一般接口提交数据，前后端都会协调使用JSON格式的，也就是说接口的请求头中 Content-Type 属性值为 application/json。

1. 默认数据组装

在使用Vue项目之前，我们在提交数据的时候，需要对入参数据做组装，或是更早习惯使用form表单的时候，表单中元素的name值就是要提交的数据。那么正常JSON数据组装，在本案例中应该是这样的

let params = {
            bookName: this.form.bookName,
            bookNo: this.form.bookNo,
            bookType: this.form.bookType,
            author: this.form.author,
            publisher: this.form.publisher,
            publishDate: this.form.publishDate,
            description: this.form.description,
            coverImage: this.form.coverImage,
}

2. Vue项目JSON数据的组装

但是在Vue项目中，数据依赖除了可以和DOM部分一一对应，其实你会发现，数据依赖中的form正好就是提交数组的预组装，所以可以直接这样：

let params = this.form;

这样一来，params拿到的JSON数据正好就是form的数据。不够在本案例中，form的数据正好和接口提交数据对应上了，可以这样轻松搞定。但现实工作中，一定会有幺蛾子类型的项目，需要使用上一种组装方式。所以第一种组装数据的方式也一定是用得到的。

二、axios请求的功能点

数据已经组装完成，接下来就是要发送axios请求了，那么在本项目中都需要做哪些准备呢，一起来看一下

1. 新建api文件

到了一个新模块了，所以发送请求的实例方法要新建一个文件了，新建文件 src\api\bookManager.js

2. 维护录入图书url

在 src\config\httpUrl.js 文件中，添加录入图书的接口url，这个url是服务端人员定义好，然后给我们的，如图

3. 添加录入图书信息的请求方法

在刚刚新建的 src\api\bookManager.js 文件中，添加请求方法，后续整个图书管理的模块，请求方法都会在这个文件里，之前上传图片的接口方法单独放了一个文件，是因为项目中可能有多处需求需要用到图片上传，所以图片上传算作是一个公共方法，就不往这个文件里加了，代码如下

import request from '../utils/httpRequire.js';
import { URLS } from '../config/httpUrl.js';

// 录入图书信息
export function enterBook(data) {
    return request({
        url: URLS.createBook,
        method: 'post',
        data,
    });
}

三、业务组件内发送请求

入参数据准备好了，axios请求的零件准备好了，接下来就该回到业务组件内，真正的触发，发送录入图书信息的请求了。

1. 引入请求方法

在 src\views\bookManager\Create.vue 文件中引入axios实例方法

import { enterBook } from '@/api/bookManager.js';

2. 发送请求

上一节说道，提交按钮调用了 handleSubmit 方法，这个方法在验证数据通过后，为了避免按钮被重复连续点击，所以加了 isLoading 的开关限制，默认设置为false，当开始提交数据的时候，更改为true，然后提交按钮就开始处于loading提交中的状态。代码如下：

handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('已验证通过');
          this.isLoading = true;

          let params = this.form;

          enterBook(params).then((res) => {
            console.log(res);
            if (res.code != 200) {
              this.isLoading = false;
              this.$message.error(res.message);
              return;
            }

            this.isLoading = false;
            this.$message({
              message: '提交成功',
              type: 'success'
            });

            let enterTimeout = setTimeout(() => {
              window.clearTimeout(enterTimeout);
              enterTimeout = null;
              this.$router.push('/book-manager');
            }, 1500)
          })
        }
      })
},

3. 接口返回数据的处理

接口返回一定会存在正常与异常的情况，所以当接口异常的情况下，也就是返回的code值不是200的时候，我们给用户提示msg信息，并且使isLoading开关变量变为false，使用户处理完异常情况后可以继续提交，同时添加 return 代码，使代码停止继续执行

如果接口返回正常的情况，那么则正常弹出“提交成功”的提示，并且在用户看到弹框提示后，延迟1500毫秒跳转到图书列表页面去。

4. setTimeout要不要手动清除

很多人觉得setTimeout如果内部没有引用外部复合变量，或者没有用于递归计算的话，可以不用手动清除，浏览器会自动将其释放掉。不过狗哥建议，凡是用到setTimeout的地方，不管内部做了多么简单的事情，都要将其手动清除。而且代码也不复杂，顺手的事儿。因为在代码后续维护中，谁也不知道谁会在代码里搞什么，谁也说不清未来的技术会出什么幺蛾子事，就像早先没人说setInterval这个啦，那个啦，突然某一天，面试官都开始问setInterval有什么问题，就像某一天一觉醒来，公司的服务端开始升级log4j了，而且很多人喜欢使用第三方组件啥的，那install一下，很多人谁注意都安装啥了，万一哪天用户正在使用，突然蹦出一个精彩信息来呢，哈哈，说远了。

最后

本专栏是我和服务端天哥（天哥主页）共同打造的前后端分离项目实战系列，天哥的服务端是：SpringBoot+Vue前后端分离项目实战。天哥接口已经出了不少了，我最近想写本书，正在没日没夜的勤奋刻苦，所以进度落后了不少，我会加把劲儿的，好多购买了专栏的小伙伴也获取了最新的源码，祝你们好运。