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

news2024/11/19 10:37:10

前言

上节回顾

上一节，我们针对图书列表做了实战练习，主体内容包括顶部的检索区域，中间的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)
          })
        }
      })
    },