17 反显、修改、提交图书信息功能实战

前言

上节回顾

上一节，我们针对图书列表做了实战练习，主体内容包括顶部的检索区域，中间的el-table数据区域，和底部的el-pagination分页区域，并针对每一块做了讲解，还不太明白上下文的同学可以回过头去看一下：16 使用Vue + 列表检索 + el-table + el-pagination 实现图书列表实战

本节介绍

这是本专栏的第15篇实战内容了，这一小节也是图书管理模块最后一篇文章了，一个模块就算是结束了。这一小节针对修改图书详情信息展开。

前言

一、信息反显

1. 列表页到详情页传参

2. 面包屑的注意事项

3. 信息项的反显

二、信息提交

最后

一、信息反显

修改详情信息，第一步做的就是先将图书信息反显过来，然后用户再针对自己的需求，对需要做出修改的信息项做出修改。

1. 列表页到详情页传参

上一节我们说到，详情页需要用图书id查询反显信息，所以列表页就需要把id传递到详情页去。我们使用了这种方式：

handleEdit(row) {this.$router.push('/create-book?id='+row.id);
},

而在详情页获取这种传参的方式有两种，一种是路由数据里完全使用纯路由的方式，那么在列表给详情页传参的时候，就可以以参数的形式，url?key=value的形式，而详情页这种方式获取参数的方式是：

this.id = this.$route.query.id;

还有一种是路由数据里类似这种定时方式


{path: '/create-book/:id',                     component: () => import("@/views/bookManager/Create"),meta: {title: '新建图书'},fatherTitle: '图书管理',fatherTitleCode: 1,
},

那么在列表页跳转的时候，就需要这样传参：

handleEdit(row) {this.$router.push({path: '/create-book/' + row.id,})
},

而第二种方式传参，在详情页获取的时候，就需要这么获取

this.id = this.$route.params.id;

2. 面包屑的注意事项

我们在开发录入页的时候，面包屑的展示信息是“新建图书”，那么到了修改信息的时候呢，很显然，面包屑的内容还是“新建图书”就不那么合适了，所以需要做出修改，代码如下

<div class="crumbs-box"><a href="/#/index">首页</a>&gt;<a href="/#/book-manager">图书管理</a>&gt;<span>{{ crumbsVal }}</span>
</div>// js部分created() {this.id = this.$route.query.id;if (this.id) {this.crumbsVal = '修改图书';this.getBookDetailInfo();}},

3. 信息项的反显

当提前预备的数据依赖id有值的时候，表示是修改页面了，我们初始化定义id的值为空，然后定义获取图书信息的axios请求

在 src\views\bookManager\Create.vue 中引入 getBookInfo 请求方法，

在录入信息的时候，我们已经将form数据做了整理，而本案例中，返回数据与显示依赖是比较对应的，所以直接赋值即刻，代码如下：

getBookDetailInfo() {let params = {id: this.id}getBookInfo(params).then((res) => {this.form = res.data;})},

二、信息提交

反显既然已经做完了，其实修改数据和之前新建数据的时候操作是相同的，而且修改后，点击提交按钮，还是会做相同的验证操作，所以只要和服务端定义好，新建和修改的区别即可。

本案例中，修改详细和新建信息的接口是相同的，只是修改的时候，入参需要有id，新建则不需要id。所以判断好id是否有值即可。代码如下：

handleSubmit() {this.$refs.form.validate((valid) => {if (valid) {console.log('已验证通过');this.isLoading = true;let params = this.form;// 修改图书if (this.id) {params['id'] = this.id;}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: this.id ? '修改成功' : '提交成功',type: 'success'});let enterTimeout = setTimeout(() => {window.clearTimeout(enterTimeout);enterTimeout = null;this.$router.push('/book-manager');}, 1500)})}})},