您的位置:首页 > 其它

测试开发【提测平台】分享6-产品线修改和软硬删除功能实现

2021-08-13 21:39 281 查看 https://www.cnblogs.com/mrzcod

微信搜索【大奇测试开】,关注这个坚持分享测试开发干货的家伙。

学习建议还是要多动手做,用一首歌的时间看,用半小时去实际实现,才能事半功倍!

本篇掌握功能点:

  • 后端python实现数据库更新逻辑接口
  • 前端<el-link>文字链接组件实现表菜单操作
  • 前端slot-scope插件槽获取Table的行数据
  • 前端控件v-if 和:实现动态判断
  • 后端删除软和硬两种实现方法
  • 前端掌握$confirm执行前的确认组件

项目/产品线修改功能实现

服务端实现更新接口

Flask更新接口实现

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

# [POST方法]实现新建数据的数据库插入
@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"
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[code] 

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>

    几个要掌握的关键点已经大致说完,剩下我直接给api和方法的代码

      product.js 增加更新请求接口

    export function apiProductUpdate(requestBody) {
    return request({
    url: '/api/product/update',
    method: 'post',
    data: requestBody
    })
    }


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

    // <script>...</script> 头部追加
    import { apiProductList, apiProductCreate, apiProductUpdate } from '@/api/product'
    
    // data() { return {...} } 内添加
    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()
    })
    }


    联调运行修改

    前后端重新启动,运行查看效果如下:

    需要进行一下简单的测试:

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

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

     

    后端实现删除功能

    实现硬删除功能

    1.服务端实现Delete删除逻辑接口

    按照标准的RefAPI,通过定义methods = delete方法定义请求接口,参数只需要对应数据的id即可,这里并增加一个请求是否传了id的参数校验,这个接口是真正的数据删除,即所谓的硬删除,这个实现当中额外增加一个参数校验的逻辑,具体的实现代码如下:

    # [DELETE方法]根据id实际删除项目信息
    @app_product.route("/api/product/delete", methods=['DELETE'])
    def product_delete():
    # 返回的reponse
    resp_data = {
    "code": 20000,
    "message": "success",
    "data": []
    }
    # 方式1:通过params 获取id
    ID = request.args.get('id')
    # 做个参数必填校验
    if ID is None:
    resp_data["code"] = 20002
    resp_data["message"] = "请求id参数为空"
    return resp_data
    # 重新链接数据库
    connection = connectDB()
    with connection.cursor() as cursor:
    sql = "DELETE from `products` where id=%s"
    cursor.execute(sql, ID)
    connection.commit()
    return resp_data

    其实一个好的后端接口是需要增加各种校验的,保证代码的健壮性,可以每个方法自己写,也可以采用统一的异常处理形式。

     

    2.前端实现删除功能

    按照之前修改,我们在产品项目管理的菜单处增加一个删除的el-link并给定一个待实现的方法 pHardRemove(),其中scope.row.id表所在行数据的ID值

    <el-link icon="el-ic
    25f4
    on-delete" @click="pHardRemove(scope.row.id)">删除</el-link>

     接着继续按照规定模式js实现接口请求定义,vue删除方引用和实现

    src/api/product.js 增加代码

    // 调用真实删除数据库接口
    export function apiProductDelete(id) {
    return request({
    url: '/api/product/delete',
    method: 'delete',
    params: {
    'id': id
    }
    })
    }

     

    在 src/view/product/product.vue 的methods{ 实现pHarRemove }

    最先不要忘记接口方法引用

    import { apiProductDelete } from '@/api/product'

    在这里的删除逻辑里一般要给个二次确认是否进行操作,使用的是组件 MessageBox 弹框 中 确认消息 功能是提示用户确认其已经触发的动作,并询问是否进行此操作,确认继续执行或者取消此操作,调用的是

    $confirm
    对应可设置
    type
    字段表明消息类型,可以为 
    success
    error
    info 
    和 
    warning 
    更多定制属性可直接参考官方,详细代码和说明如下(methods):

    pHardRemove(id) {
    // 对应的参数是 (提示内容,标题 {自定义确定按钮文案,自定义取消按钮文案, 对话框类型}
    this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
    // then 点击confirmButton后执行的方法,否则是不执行关闭对话框
    }).then(() => {
    // vue click时候传d的id需要定义参数
    apiProductDelete(id).then(res => {
    this.$message({
    type: 'success',
    message: '删除成功!'
    })
    // 重新查询刷新数据显示
    this.getProductList()
    })
    }).catch(() => {
    this.$message({
    type: 'info',
    message: '已取消删除'
    })
    })
    }

     

    3. 运行测试硬删除

    后端IDE运行或者运行命令 # TPMServer路径下

    $ python3 app.py

    前端IDE运营或者运行命令 # TPMWeb 路径下

    $ npm run dev

    点击"删除"后的界面如下

     进行用例测试

    CASE1 : 选择任意行点删除,对话框选择取消,验证取消成功数据未删除

    CASE2: 添加一行数据,再选择删除-确定,验证查看新增的数据已删除 ,同步需确认数据库表中是否真删除

     

    优化实现软删除

    在通常的业务操作中数据都不是真的删除的,尤其像产品/项目这种会有下游依赖的数据,一般做法都是表数据增加对应的状态字段,用数字或者字符表示状态,所需要做的操作就是“删除”触发的是更新操作,这里我们叫“停用”更为合适一些,这也就是所谓的软删除,仅标记状态不做实际数据删除。

    1. 数据库优化products表

    需要对TPMStore数据中products表增加字段status,其中默认数字 0 为有效数据,数字 1 为已停用数据

    alter table products add status int default 0 not null comment '状态有效0,无效0' after `desc`;优化查询接口

     

    2. 后端实现软删除接口

    参考产品修改接口实现对应的如下代码,注意同上边一样,需要增加个参数校验逻辑

    # [POST方法]根据id更新状态项目状态,做软删除
    @app_product.route("/api/product/remove", methods=['POST'])
    def product_remove():
    # 返回的reponse
    resp_data = {
    "code": 20000,
    "message": "success",
    "data": []
    }
    ID = request.args.get('id')
    # 做个参数必填校验
    if ID is None:
    resp_data["code"] = 20002
    resp_data["message"] = "请求id参数为空"
    return resp_data
    # 重新链接数据库
    connection = connectDB()
    with connection.cursor() as cursor:
    # 状态默认正常状态为0,删除状态为1
    # alter table products add status int default 0 not null comment '状态有效0,无效0' after `desc`;
    sql = "UPDATE `products` SET `status`=1 WHERE id=%s"
    cursor.execute(sql, ID)
    connection.commit()
    
    return resp_data
     

    3. 后端优化其他接口

    由于表增加了一个标记状态字段,其他的已实现的接口我们需要做下优化处理,其中 查询接口需要修改查询语句增加条件过滤 status = 0 即只返回有效的数据

    # 查询产品信息表-按更新时间新旧排序 且 状态为0有效
    sql = "SELECT * FROM `products` WHERE `status`=0 ORDER BY `update` DESC"

     

    在新增product_create和更新接口方法 product_update() 中的 查重语句增加状态条件有效,即已停用的keycode不应该算作重复(这里前提业务需求是停用不可恢复)

    # 查询需要过滤状态为有效的 且 状态为0有效
    select = "SELECT * FROM `products` WHERE `keyCode`=%s AND `status`=0"

     

    4.前端实现软删除

    页面参考上边的流程和编码,分别是增加新的 el-link 动作按钮、接口请求定义、vue实现删除,这里不在多赘述,稍作改动,代码如下:

    product.js部分

    // 软删除,更改数据状态
    export function apiProductRemove(id) {
    return request({
    url: '/api/product/remove',
    method: 'post',
    params: {
    'id': id
    }
    })
    }

    product.vue <template> 部分

    <el-link icon="el-icon-delete" @click="pSoftRemove(scope.row.id)">停用</el-link>

    product.vue js部分

    import { apiProductRemove } from '@/api/product'
    pSoftRemove(id) {
    this.$confirm('此操作将停用不显示, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
    }).then(() => {
    apiProductRemove(id).then(res => {
    this.$message({
    type: 'success',
    message: '删除成功!'
    })
    // 重新查询刷新数据显示
    this.getProductList()
    })
    }).catch(() => {
    this.$message({
    type: 'info',
    message: '已取消删除'
    })
    })
    }

     

    5.前后端联调

    重新运行前后端,便可看到最终实现界面

    同样写完程序要进行必要测试

    CASE1 : 选择任意行点停用,对话框选择取消,验证取消成功数据未删除

    CASE2: 选择任意数据删除-确定,验证页面刷新正常和删除数据不显示 ,同步需确认数据库表中数据并未删除,只是标记status为1

    CASE3: 新增和修改的填写已删除数据的keyCode,验证添加和更新正常

     

    【代码更新】

    地址:https://github.com/mrzcode/TestProjectManagement

    TAG:TPMShare6

     

    【官方文档参考】

     

    【系列前要阅读】

    原创不易,经过实践的总结分享更不易,如果你觉得有用,请点击推荐,也欢迎关注我博客园和微信公众号。 

    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: 
    相关文章推荐