測試開發【提測平臺】分享6-產品線修改和軟硬刪除功能實現

微信搜索【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。

學習建議仍是要多動手作，用一首歌的時間看，用半小時去實際實現，才能事半功倍！

本篇掌握功能點：

• 後端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 

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-icon-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

 

【官方文檔參考】

• elemeUI 
• vue

 

【系列前要閱讀】

• 【提測平臺】分享5-實現產品線的添加
• 【提測平臺】分享4-實現數據庫綁定和產品線顯示功能
• 【提測平臺】分享3-正式開發產品需求&項目初始化
• 【提測平臺】分享2-基礎之項目先後端聯調互通
• 【提測平臺】分享1-基礎之技術棧和開源框架選型

原創不易，通過實踐的總結分享更不易，若是你以爲有用，請點擊推薦，也歡迎關注我博客園和微信公衆號。