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

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

 

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

• 抽公共數據連接方法

• 添加接口掌握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" 輸入組件指定爲多行文本框；

 

其餘按鈕樣式或屬性參考官網：

• 對話框Dialog
• 表單Form
• 輸入框Input

實現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實現過程當中的錯誤，由於在寫增長的接口的時候沒有再次初始化連接，關閉再請求致使，就是一開始爲何抽了一個數據連接方法。

 

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

 

*可能需歷史閱讀*

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