当前位置：首页 > news >正文

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

news 2025/8/30 11:36:24

概述

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

产品线修改功能开发

后端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": []}# 获取请求传递jsonbody = 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"] = 20001resp_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 配合使用

需要修改的点

<el-diglog>中的title动态设置的变量值动态显示，注意判断语法 === （使用三个等于号）
增加一行表单并在dialogProductStatus 是更新操作的时候显示
增加一个修改按钮，并同时优化添加按钮，根据状态决定显示

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

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()

 // 获取当前编辑行数数据并赋值给productdialogProductUpdate(row) {// 添加先初始化空状态this.product.id = row.idthis.product.keyCode = row.keyCodethis.product.title = row.titlethis.product.desc = row.descthis.product.operator = this.op_user// 标记弹窗是修改操作this.dialogProductStatus = 'UPDATE'// 弹出对话框设置为truethis.dialogProductShow = true},

methods中实现pUpdate()

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