【Flask】測試平臺開發，應用管理模塊實現-第十一篇

?概述

通過Element UI抽屜和表單校驗&增改接口合并實現應用管理

Drawer 抽屜

之前產品修改和添加是使用Dialog組件實現的，但這個組件有時候并不滿足我們的需求, 比如表單很長, 亦或是你需要臨時展示一些文檔, Drawer 是可以從側面彈出的一個層，可以容納更多的控件，優化交互體驗。基本用法

<el-drawertitle="我是從右到左側展示的抽屜":visible.sync="drawer"direction="rtl">這里可組合放其他組件Body部分
</el-drawer>
<!..script部分省略..>

顯示和隱藏通過 visible 屬性，類型是 boolean,當為 true 時顯示 Drawer。Drawer 分為兩個部分：title 和 body，title 可省略, direction為設置打開方向, Drawer 默認是從右往左打開，其他方向包括ltr（從左到右）、ttb（從上到下）、btt（從下往上）,更多屬性事件參考官方[注解1]

Form 表單驗證

在之前的產品添加和修改功能都是直接提交的，一些驗證是在后端做的處理，正常情況下，前端提交數據的時候就要進行一些如非空校驗、是否為字符串、是否符合正則規則等，這里Form 組件是直接提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，支持默認屬性綁定和自定義校驗。更多參考[注解2]，示例代碼：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="綁定規則校驗對應prop屬性" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="密碼自定義校驗" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交事件校驗</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('請輸入密碼'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}}，return {ruleForm: {name: ''，checkPass:''},rules: {name: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],pass: [{ validator: validatePass, trigger: 'blur' }]}};},methods: {submitForm(formName) {// 這里是提交前觸發校驗this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {// 清除所有校驗提示this.$refs[formName].resetFields();}}}
</script>

1）表單通過 :rules="rules" ref="ruleForm"進行數據和屬性綁定

2）行項目中 prop=""去綁定規則對應的key，這里最好數據和驗證的key保持一致

3）基本屬性配置包括是否必須，字符的長短等，詳細參考規則async-validator

自定義規則是一些較為復雜的校驗通過回調進行邏輯自定義,參考例子第二個form-item

5）上述被定義required: true規則的控件在會自動增加紅色*號，trigger 定義什么時候觸發校驗

開發頁面

此頁面添加/修改功能需求說明：

點擊添加/編輯彈抽屜，紅色為必填選項
分類來源歸屬分類，外鍵關聯
應用名稱有重名校驗，創建后不可以修改
默認必須有測試、研發和產品負責人，多人郵件用；分隔
目前要求必須填寫代碼地址，以便測試人員了解信息，編寫測試code
以上數據字符長度暫無限制

功能實現（步驟）偽代碼

Python Flask 編寫一個接口同時實現添加和修改數據功能
創建抽屜控件，內嵌form，實現原型中的各控件綁定
控件紅色*標記的規則配置，觸發方式trigger: 'blur'即點擊提交統一校驗，
頁面修改和添加使用同一個Drawer 標題根據上一步操作動態顯示 “應用添加” / “應用編輯”
應用編輯的自增ID不需要顯示，應用ID不可編輯

實踐參考實現

應用增改接口實現

這個合并接口的實現核心的邏輯點就是根據前端是否傳了數據庫id主鍵，如果有便認為是歷史數據，走修改操作，否則走添加邏輯，完整代碼和說明見代碼：

@app_application.route("/api/application/update",methods=['POST'])
def product_update():# 獲取傳遞的數據，并轉換成JSONbody = request.get_data()body = json.loads(body)# 定義默認返回體resp_success = format.resp_format_successresp_failed = format.resp_format_failed# 判斷必填參數if 'appId' not in body:resp_failed['message'] = '應用不能為空'return resp_failedelif 'tester' not in body:resp_failed['message'] = '測試負責人不能為空'return resp_failedelif 'developer' not in body:resp_failed['message'] = '測試負責人不能為空'return resp_failedelif 'producer' not in body:resp_failed['message'] = '產品負責人不能為空'returnif not body.get('note'):body['note'] = ''if not body.get('cCEmail'):body['cCEmail'] = ''if not body.get('gitCode'):body['gitCode'] = ''if not body.get('wiki'):body['wiki'] = ''if not body.get('more'):body['more'] = ''if not body.get('createUser'):body['createUser'] = ''if not body.get('updateUser'):body['updateUser'] = ''# 使用連接池鏈接數據庫connection = pool.connection()# 判斷增加或是修改邏輯with connection:# 如果傳的值有ID，那么進行修改操作，否則為新增數據if 'id' in body and body['id'] != '':with connection.cursor() as cursor:# 拼接修改語句，由于應用名不可修改，不需要做重復校驗appIdsql = "UPDATE `apps` SET `productId`=%s, `note`=%s,`tester`=%s,`developer`=%s,`producer`=%s,`cCEmail`=%s, " \"`gitCode`=%s, `wiki`=%s, `more`=%s, `updateUser`=%s, `updateDate`= NOW() WHERE id=%s"cursor.execute(sql, (body["productId"], body["note"], body["tester"], body["developer"], body['producer'], body["cCEmail"],body["gitCode"], body["wiki"], body["more"], body["updateUser"], body["id"]))# 提交執行保存更新數據connection.commit()else:# 新增需要判斷appId是否重復with connection.cursor() as cursor:select = "SELECT * FROM `apps` WHERE `appId`=%s AND `status`=0"cursor.execute(select, (body["appId"],))result = cursor.fetchall()# 有數據說明存在相同值，封裝提示直接返回if len(result) > 0:resp_failed["code"] = 20001resp_failed["message"] = "唯一編碼keyCode已存在"return resp_failedwith connection.cursor() as cursor:# 拼接插入語句,并用參數化%s構造防止基本的SQL注入# 其中id為自增，插入數據默認數據設置的當前時間sql = "INSERT INTO `apps` (`appId`,`productId`,`note`,`tester`,`developer`,`producer`,`cCEmail`,`gitCode`" \",`wiki`,`more`,`createUser`,`updateUser`) VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"cursor.execute(sql, (body["appId"],body["productId"], body["note"], body["tester"], body["developer"], body['producer'],body["cCEmail"],body["gitCode"],body["wiki"],body["more"],body["createUser"],body["updateUser"]))# 提交執行保存新增數據connection.commit()return resp_success

組合表單的抽屜控件實現

在app.vue 代碼文件<script></script> 添加綁定數據和基本規則

1）不要忘記登錄人的變量導入

2）規則和請求變量的key一定確保一致

3）除了選擇框未改變時候觸發校驗，其他都使用提交時候再做統一校驗

data() {return {
// 獲得登錄的名字op_user: store.getters.name,// 定義動作appAction: 'ADD',// 控制抽屜顯示隱藏drawerVisible: false,// 添加/修改綁定的數據appInfo: {id: '',appId: '',productId: '',note: '',tester: '',developer: '',producer: '',cCEmail: '',gitCode: '',wiki: '',more: '',createUser: '',updateUser: ''},// 規則設定rules: {appId: [{ required: true, message: '請輸應用名稱', trigger: 'blur' }],productId: [{ required: true, message: '請選擇所屬范圍', trigger: 'change' }],tester: [{ required: true, message: '請輸入測試負責人', trigger: 'blur' }],developer: [{ required: true, message: '請輸入開發負責人', trigger: 'blur' }],producer: [{ required: true, message: '請輸入產品負責人', trigger: 'blur' }]}}
}

在app.vue 代碼文件 <div class="app-container"> </div>內編寫組合控件

1）標題和appId是否可編輯根據 appAction 判斷根據

2）歸屬分類沿用搜索里的下拉實現，也可以使用基本方式

3）實現規則一定注意el-form-item 中 prop 的定義和一致性

<el-drawer:title="appAction==='ADD'? '添加應用': '修改應用'":visible.sync="drawerVisible"size="45%"direction="rtl"><div><el-form :model="appInfo" :rules="rules" ref="appInfo" label-width="120px"><el-form-item label="應用ID" prop="appId" ><el-input v-model="appInfo.appId" :disabled="appAction==='ADD'? false : true" style="width: 300px"/></el-form-item><el-form-item label="歸屬分類" prop="productId"><el-select v-model="appInfo.productId" style="width: 300px"><el-optionv-for="item in options":key="item.id":label="item.title":value="item.id"><span style="float: left">{{ item.keyCode }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span></el-option></el-select></el-form-item><el-form-item label="應用描述"><el-input v-model="appInfo.note" style="width: 300px"/></el-form-item><el-form-item label="測試負責" prop="tester"><el-input v-model="appInfo.tester" style="width: 300px"/></el-form-item><el-form-item label="研發負責" prop="developer"><el-input v-model="appInfo.developer" style="width: 300px"/></el-form-item><el-form-item label="產品負責" prop="producer"><el-input v-model="appInfo.producer" style="width: 300px"/></el-form-item><el-form-item label="默認抄送"><el-input v-model="appInfo.cCEmail" style="width: 300px"/></el-form-item><el-form-item label="代碼地址"><el-input v-model="appInfo.gitCode" style="width: 300px"/></el-form-item><el-form-item label="相關wiki"><el-input v-model="appInfo.wiki" style="width: 300px"/></el-form-item><el-form-item label="更多信息"><el-input v-model="appInfo.more" style="width: 300px"/></el-form-item><el-form-item><span class="dialog-footer"><el-button @click="drawerVisible=false">取 消</el-button><el-button type="primary" @click="commitApp('appInfo')">提 交</el-button></span></el-form-item></el-form></div>
</el-drawer>

實現接口請求

在app.js 定義/api/application/update接口模版請求

// 調用應用增加/修改統一接口
export function apiAppsCommit(requestBody) {return request({url: '/api/application/update',method: 'post',data: requestBody})
}

在app.vue 代碼文件<script></script> 實現添加和修改請求方法

1）addApp上節的占位的方法體，這里要實現信息清空和動作定義

2）updateApp 同樣，實現選擇的數據反填和遺留信息清空基本操作

3）請求后端接口要在所有規則校驗通過后才進行真正的提交

addApp() {// 定義動作，以抽屜做判斷this.appAction = 'ADD'// 添加數據初始化this.appInfo.id = ''this.appInfo.appId = ''this.appInfo.productId = ''this.appInfo.note = ''this.appInfo.tester = ''this.appInfo.developer = ''this.appInfo.producer = ''this.appInfo.cCEmail = ''this.appInfo.gitCode = ''this.appInfo.wiki = ''this.appInfo.more = ''this.appInfo.createUser = this.op_userthis.appInfo.updateUser = this.op_user// 初始化完成后顯示抽屜this.drawerVisible = true// 如果有遺留驗證清空this.$nextTick(() => {this.$refs['appInfo'].resetFields()})},updateApp(row) {// 定義動作，以抽屜做判斷this.appAction = 'UPDATE'// 初始化完成后顯示抽屜this.drawerVisible = true// 如果有遺留驗證清空this.$nextTick(() => {this.$refs['appInfo'].resetFields()})// 選擇數據反填抽屜表單中this.appInfo.id = row.idthis.appInfo.appId = row.appIdthis.appInfo.productId = row.productIdthis.appInfo.note = row.notethis.appInfo.tester = row.testerthis.appInfo.developer = row.developerthis.appInfo.producer = row.producerthis.appInfo.cCEmail = row.cCEmailthis.appInfo.gitCode = row.gitCodethis.appInfo.wiki = row.wikithis.appInfo.more = row.morethis.appInfo.createUser = ''this.appInfo.updateUser = row.updateUser},commitApp() {// 上邊form定義ref，驗證通過if valid的方式判斷this.$refs['appInfo'].validate((valid) => {if (valid) {this.appInfo.updateUser = this.op_userapiAppsCommit(this.appInfo).then(response => {// 如果request.js沒有攔截即表示成功，給出對應提示和操作this.$notify({title: '成功',message: this.appAction === 'ADD' ? '應用添加成功' : '應用修改成功',type: 'success'})// 關閉對話框this.drawerVisible = false// 重新查詢刷新數據顯示this.getProductList()})} else {return false}})}