第二十课 编写编辑功能

一、编写后台的通过id获取数据接口

server-api/mocks/新增getbookid.js

/**
 * 信息编辑接口
 *
 * @url getbookid?id=1
 *
 */

 module.exports = function (req) {
   
    if (req.query.id) {
        return {
          code: 200,
          flag: true,
          message: "查询成功",
          "data": {
            "id|+1": 1,
            'bookISBN': '123123',
            "bookName": "@ctitle(4,12)",
            "author": "@cname",
            "press|1": ['清华大学出版社', '北京大学出版社', '北京理工大学出版社', '人民邮电出版社'],
            "publicationdate": '@date(yyy-mm-dd)',
            "price": "@float(10,99,0,1)",
            "quantity|50-1000": 1,
            "bookType|1": ['1', '2', "3", "4"]
          }
        }
    }
  };

二、编写接口封装的编辑

src/api/bookinfo.js中新增

 getBookById(id){
        return myaxios({
            url:'/getbookid?id='+id,
            method:'get',
       })
    }

三、编写回显数据逻辑

 handleEdit(id) {
        this.dialogFormVisible = true;
        bookinfoApi.getBookById(id).then(response=>{
            const resp = response.data
            if(resp.flag){
                this.form = resp.data
            }else{
                this.$message({
                    message:resp.message,
                    type:"warning"
                })
            }
        })
    },

四、如何区别是添加还是编辑

用过维护一个变量来判断是否是新增还是编辑

data中定义isAdd:true

<el-button type="primary" @click="dialogFormVisible = true; isAdd = true"
>新增</el-button>

handleEdit(id) {
        this.isAdd = false
        this.dialogFormVisible = true;
        bookinfoApi.getBookById(id).then(response=>{
            const resp = response.data
            if(resp.flag){
                this.form = resp.data
            }else{
                this.$message({
                    message:resp.message,
                    type:"warning"
                })
            }
        })
    },
    
    addData(formName){
        this.$refs[formName].validate((valid)=>{
            if(valid){
              let ajaxUrl=""
              if(this.isAdd){
                ajaxUrl = 'add'
              }else{
                ajaxUrl = 'update'
              }
               bookinfoApi[ajaxUrl](this.form).then(response=>{
                   const resp = response.data
                   if(resp.flag){
                       this.fetchData()
                       this.dialogFormVisible = false;
                       this.$nextTick(()=>{
                           this.$refs['addForm'].resetFields();
                       })
                   }else{
                      this.$message({
                         message:resp.message
                       })
                   }
               })
            }
        })
    }

五、加入后台更新接口

server-api/mocks/updatebook.js

/**
 * 信息列表更新接口
 *
 * @url updatebook
 *
 */
 
 module.exports = function (req) {
    return {
      code: 200,
      flag:true,
      message:"更新成功",
    }
  };

六、编写封装接口中的更新接口

src/api/updatebook.js

update(bookform){
        return myaxios({
            url:'/updatebook',
            method:'get',
            data:bookform
       })
    }