測試開發【提測平臺】分享5-實現產品線的新增

MrZ大奇發表於2021-08-11

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

 

本想按照上節安排,實現新增和更新功能,不過內容有些多,本著每一次進步一點點的原則,將再拆分下,先講明白如何實現新增,同樣給出本篇關鍵點:

  • 抽公共資料連結方法
  • 新增介面掌握post實現和請求資料處理

  • 前端掌握Button\Dilog\Form\Input\Notification元件

服務端實現新增介面

封裝資料庫連結 在product.py 檔案中我們需要增加一個create新增介面,不過再次之前我們需要先封裝下上節直接寫在外邊的資料連結物件,因為多方法中如增\改刪使用完後會關閉資料庫連線,所以不能一次宣告到處使用,我們需要在每次介面請求處理業務前,進行新的資料庫初始化,保證資料庫正在連結狀態。

def connectDB():
    connection = pymysql.connect(host='localhost',   # 資料庫IP地址或連結域名
                             user='mrzcode',     # 設定的具有增改查許可權的使用者
                             password='mrzcode', # 使用者對應的密碼
                             database='TPMStore',# 資料表
                             charset='utf8mb4',  # 字元編碼
                             cursorclass=pymysql.cursors.DictCursor) # 結果作為字典返回遊標
    # 返回新的書庫連結物件
    return connection

 

增加新增介面 同之前的查詢介面一樣,我們設定新的route,用POST方法實現產品新增介面的處理,這裡主要是掌握post的定義,以及請求傳遞的body如何處理,關鍵點如下:

  • methods 定義為POST請求

  • flask request模組的get_data()獲取body

  • json 請求處理請求的JSON格式資料

新增依賴引用

from flask import request
import json

和程式碼均給了詳細註釋

# [POST方法]實現新建資料的資料庫插入
@app_product.route("/api/product/create",methods=['POST'])
def product_create():
    # 初始化資料庫連結
    connection = connectDB()
    # 定義預設返回結構體
    resp_data = {
        "code": 20000,
        "message": "success",
        "data": []
    }

    # 獲取請求傳遞json body
    body = request.get_data()
    body = json.loads(body)

    with connection:
        # 先做個查詢,判斷keyCode是否重複(這裡的關鍵詞最初定義為唯一專案編號或者為服務的應用名)
        with connection.cursor() as cursor:
            select = "SELECT * FROM `products` WHERE `keyCode`=%s"
            cursor.execute(select, (body["keyCode"],))
            result = cursor.fetchall()

        # 有資料說明存在相同值,封裝提示直接返回
        if len(result) > 0:
            resp_data["code"] = 20001
            resp_data["message"] = "唯一編碼keyCode已存在"
            return resp_data

        with connection.cursor() as cursor:
            # 拼接插入語句,並用引數化%s構造防止基本的SQL隱碼攻擊
            # 其中id為自增,插入資料預設資料設定的當前時間
            sql = "INSERT INTO `products` (`keyCode`,`title`,`desc`,`operator`) VALUES (%s,%s,%s,%s)"
            cursor.execute(sql, (body["keyCode"], body["title"], body["desc"], body["operator"]))
            # 提交執行儲存插入資料
            connection.commit()

        # 按返回模版格式進行json結果返回
        return resp_data

對於產品新增中有個欄位keyCode我們需求上定義為專案唯一編碼,所以對於插入不應該有重複項,所以我們需要在正式插入操作前進行查詢判斷,如果重複給出提示,code 定義20001,那麼在前端request.js 進行處理的時候,由於不是20000就會攔截,並按照message內容錯誤提示。

以上編寫完成再次用ide或者命令執行 app.py 啟動後段程式,用postman進行請求測試,驗證產品新增介面服務沒有問題

1)重複提示

 

2)不重複新增成功

 

 

 

前端實現新增功能

先看下想要實現成的頁面樣式

 

定義介面請求 首先對已經測試通過新增介面定義到前端src/api/product.js中,這裡主要就是學會post請求介面的方式,以及注意引數定義,在查詢定義下方,新增如下定義

data: 就是請求的json格式的引數,稍後在前端定義

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

 

定義請求引數 在 product.vue頁面script中的data()返回資料集裡定義

  • 一個變數獲取之前登入的使用者名稱後邊作為操作者值

  • 定義product的json,預設賦值undefined,操作人賦予op_user

  • dialogProductShow 使用者新增對話方塊的顯示和隱藏屬性變數

// 匯入全域性儲存
import store from '@/store'
 
// 獲得登入的名字
op_user: store.getters.name,
// 定義產品引數
product: {
  id: undefined,
  title: undefined,
  keyCode: undefined,
  desc: undefined,
  operator: this.op_user
},
// 控制巢狀表單顯示和隱藏
dialogProductShow: false,

這裡要清楚一點是,其他變數的引用需要通過this.來給定

 定義新增按鈕 直接使用element-ui的button元件,在原來介面table之上定義,使用的圖示按鈕,掌握 el-button 另外對於元件的使用,初期都在想用什麼的時候直接去官方參考就行。

<div class="filter-container">
      <el-button type="primary" icon="el-icon-plus" style="float:right" @click="dialogProduct()">新增</el-button>
</div>

本例屬性type=為型別,主要就是不同樣式;

icon=內部的一些圖示,見icon圖示元件說明;

style= 就是自定義的css樣式了

@click 指定點選的時候的動作 dialogProduct() 執行下邊邊自定義方法

其他按鈕樣式或屬性參考官網:https://element.eleme.io/#/zh-CN/component/button 

實現dialogProduct()方法  在product.vue 中的 methods模組中,增加初始化資料和顯示增加對話方塊頁面邏輯

dialogProduct() {
      // 新增先初始化空狀態
      this.product.id = undefined
      this.product.keyCode = ''
      this.product.title = ''
      this.product.desc = ''
      this.product.operator = this.op_user

      // 彈出對話方塊設定為true
      this.dialogProductShow = true
    }

  

頁面實現新增窗體 使用Dialog元件和巢狀form來實現建立表單的頁面,掌握 el-dialog 、 el-form 和 el-input 三個元件,再定義兩個button按鈕實現取消/確定的操作邏輯

<!--對話方塊巢狀表,使用el-dialog-->
    <el-dialog title="新增產品或專案" :visible.sync="dialogProductShow">
      <el-form :model="product">
        <el-form-item label="名稱" label-width="100px">
          <el-input v-model="product.title" placeholder="請填寫中文名稱" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item  label="唯一碼" label-width="100px">
          <el-input v-model="product.keyCode" placeholder="產品/專案唯一碼" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item  label="備註" label-width="100px">
          <el-input v-model="product.desc" type="textarea" placeholder="備註說明" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogProductShow = false">取 消</el-button>
        <el-button type="primary" @click="pCreate()">確 定</el-button>
      </span>
    </el-dialog>

本例 :visible.sync="dialogProductShow" 屬性繫結上邊定義的變數,控制是否顯示此對話方塊,flase為隱藏,true為顯示;

:model="product" 動態資料繫結 v-model 子資料繫結;

label="" 標題;placeholder="" 輸入框內部提示說明;

type="textarea" 輸入元件指定為多行文字框;

 

其他按鈕樣式或屬性參考官網:

實現pCreate()方法 最終彈窗內容填寫後,點選確定按鈕出發真正的儲存操作,由於vue已經在上邊動態的顯示資料繫結,所以參考之前查詢操作,這裡請求apiProductCreate 並給定data()中的product請求資料即可,本列掌握傳參介面請求,以及成功後的 Notification 元件

引入api

// 匯入src/api/proudct 配置的請求列表方法
import { apiProductList, apiProductCreate } from '@/api/product'

具體程式碼實現和其他邏輯處理

pCreate() {
      // 請求API進行新增
      apiProductCreate(this.product).then(response => {
        // 如果request.js沒有攔截即表示成功,給出對應提示和操作
        this.$notify({
          title: '成功',
          message: '專案或產品新增成功',
          type: 'success'
        })
        // 關閉對話方塊
        this.dialogProductShow = false
        // 重新查詢重新整理資料顯示
        this.getProductList()
      })
    }

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

 

以上順利敲下來,就可以npm run dev 啟動檢視最終效果了,如測介面一樣,分別測試下重複新增和正常新增功能是否OK

 

本次分享程式碼已提交 https://github.com/mrzcode/TestProjectManagement

標記TAG:TPMShare5

如果想檢視當前程式碼可以checkout本次TAG即可

 

遇到問題記錄

pymysql.err.Error: Already closed 這是一個python實現過程中的錯誤,因為在寫增加的介面的時候沒有再次初始化連結,關閉再請求導致,就是一開始為什麼抽了一個資料連結方法。

 

原創不易,經過實踐的總結分享更不易,如果你覺得有用,請點選推薦,也歡迎關注我部落格園和微信公眾號。 

 

*可能需歷史閱讀*

 

相關文章