【Flask】测试平台开发，产品管理实现编辑功能-第六篇

 概述

在上一篇我们已经将添加功能实现了，可以正常添加产品功能，但我们添加完产品后肯定是需要进行编辑操作的，我们接下来开发实现产品的编辑功能

产品线修改功能开发

• 后端python实现数据库更新逻辑接口

• 前端<el-link>文字链接组件实现表菜单操作

• 前端slot-scope插件槽获取Table的行数据

• 前端控件v-if 和：实现动态判断

服务端实现更新接口

更新接口实现可以直接参考上节的添加操作，只是将数据库insert变成根据id条件update操作，更新的时候也需要进行重复的校验，代码如下

@app_product.route("/api/product/update",methods=['POST'])
def product_update():

    # 按返回模版格式进行json结果返回
    resp_data = {
        "code": 20000,
        "message": "success",
        "data": []
    }

    # 获取请求传递json
    body = request.get_data()
    body = json.loads(body)
    # 初始化数据库链接
    connection = connectDB()

    with connection:
        with connection.cursor() as cursor:
            # 查询需要过滤状态为有效的
            select = "SELECT * FROM `products` WHERE `keyCode`=%s AND `status`=0"
            cursor.execute(select, (body["keyCode"],))
            result = cursor.fetchall()

            # 有数据并且不等于本身则为重复，封装提示直接返回
            if len(result) > 0 and result[0]["id"] != body["id"]:
                resp_data["code"] = 20001
                resp_data["message"] = "唯一编码keyCode已存在"
                return resp_data

        # 如果没有重复，定义新的链接，进行更新操作
        with connection.cursor() as cursor:
            # 拼接更新语句,并用参数化%s构造防止基本的SQL注入
            # 条件为id，更新时间用数据库NOW()获取当前时间

            sql = "UPDATE `products` SET `keyCode`=%s, `title`=%s,`desc`=%s,`operator`=%s, `update`= NOW() WHERE id=%s"
            cursor.execute(sql, (body["keyCode"], body["title"], body["desc"], body["operator"], body['id']))
            # 提交执行保存更新数据
            connection.commit()

        return resp_data

Vue页面实现修改

优化对话框表单 修改操作的页面由于之前添加的时候都进行过el-dialog绑定，这的修改对话框可以共用的，只需要定义个状态变量，然后标题通过对属性前加：冒号，以及组件的显示和隐藏通过组件中使用v-if进行判断显示和隐藏，这两种的作用跟语法的if 是一个道理；

• : 是vue中v-bind的语法糖缩写，作用可以使标签动态绑定

• v-if 是判断语句，它还可以和v-else-if ,v-else 配合使用

需要修改的点

1. <el-diglog>中的title动态设置的变量值动态显示，注意判断语法 === （使用三个等于号）

2. 增加一行表单并在dialogProductStatus 是更新操作的时候显示

3. 增加一个修改按钮，并同时优化添加按钮，根据状态决定显示

表格中操作菜单 表格控件中增加一列，列里增加一个编辑按钮，使用组件

Link 文字链接，并带个icon

基本语法：

<el-link icon="el-icon-edit"></el-link>

另外我们在修改操作的时候是对本行进行操作的，要想获取本行的数据，并透传给调用方法，需要使用vue里一个叫插件槽的东西

基本语法：

<template slot-scope="scope"></template>

product.js 增加更新请求接口

// 更新产品的接口
export function apiProductUpdate(requestBody) {
  return request({
    url: '/api/product/update',
    method: 'post',
    data: requestBody
  })
}

product.vue中js 增加方法引用和状态变量

import { apiProductList, apiProductCreate, apiProductUpdate  } from '@/api/product'

dialogProductStatus: 'ADD',

methods中实现dialogProductUpdate()

 // 获取当前编辑行数数据并赋值给product
    dialogProductUpdate(row) {
      // 添加先初始化空状态
      this.product.id = row.id
      this.product.keyCode = row.keyCode
      this.product.title = row.title
      this.product.desc = row.desc
      this.product.operator = this.op_user

      // 标记弹窗是修改操作
      this.dialogProductStatus = 'UPDATE'
      // 弹出对话框设置为true
      this.dialogProductShow = true
    },

methods中实现pUpdate()

  pUpdate() {
      apiProductUpdate(this.product).then(res => {
        this.$notify({
          title: '成功',
          message: '项目或产品修改成功',
          type: 'success'
        })
        // 关闭对话框
        this.dialogProductShow = false
        // 重新查询刷新数据显示
        this.getProductList()
      })
    },

Vue页面实现修改

实现功能和效果展示

CASE1: 修改名称和备注 - 验证保存成功

CASE2: 修改唯一编号其他项目存在 - 验证提示已经存在不保存

关于代码将在下面删除功能讲解完

官方文档参考：

elemeUI :

https://element.eleme.io/#/zh-CN/component/installation

vue：https://v3.cn.vuejs.org