【Flask】测试平台开发，产品管理实现添加功能-第五篇

概述

在前面的几篇开发文章中，我们只是让数据在界面上进行了展示，但是没有添加按钮的功能，接下来我们需要开发一个添加的按钮，用户产品功能的创建和添加

抽公共数据链接方法
添加接口掌握post实现和请求数据处理
前端掌握Button\Dilog\Form\Input\Notification组件

服务端实现添加接口

封装数据库链接 在product.py 文件中我们需要增加一个create添加接口，不过再次之前我们需要先封装下面直接写在外边的数据链接对象，因为多方法中如增\改删使用完后会关闭数据库连接，所以不能一次声明到处使用，我们需要在每次接口请求处理业务前，进行新的数据库初始化，保证数据库正在链接状态。

def connectDB():connection = pymysql.connect(host='localhost',   # 数据库IP地址或链接域名user='root',     # 设置的具有增改查权限的用户password='', # 用户对应的密码database='tpmdatas',# 数据表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

添加功能的接口

@app_product.route("/api/product/create",methods=['POST'])
def product_create():# 初始化数据库链接connection = connectDB()# 定义默认返回结构体resp_data = {"code": 20000,"message": "success","data": []}# 获取请求传递json bodybody = request.get_data()body = json.loads(body)with connection:# 先做个查询，判断keyCode是否重复（这里的关键词最初定义为唯一项目编号或者为服务的应用名）with connection.cursor() as cursor:select = "SELECT * FROM `products` WHERE `keyCode`=%s AND `status`=0"cursor.execute(select, (body["keyCode"],))result = cursor.fetchall()# 有数据说明存在相同值，封装提示直接返回if len(result) > 0:resp_data["code"] = 20001resp_data["message"] = "唯一编码keyCode已存在"return resp_datawith 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

添加新增接口之后，后端产品管理页面的完整代码如下

# -*- coding:utf-8 -*-from flask import Blueprint, jsonify
import pymysql.cursors
from flask import request
import json
from configs import config
from dbutils.pooled_db import PooledDBapp_product = Blueprint("app_product", __name__)# 使用用户名密码创建数据库链接
# PyMySQL使用文档  https://pymysql.readthedocs.io
def connectDB():connection = pymysql.connect(host=config.MYSQL_HOST,   # 数据库IP地址或链接域名user=config.MYSQL_USER,     # 设置的具有增改查权限的用户password=config.MYSQL_PASSWORD, # 用户对应的密码database=config.MYSQL_DATABASE,# 数据表charset='utf8mb4',  # 字符编码cursorclass=pymysql.cursors.DictCursor) # 结果作为字典返回游标# 返回新的书库链接对象return connection
// 获取列表数据展示的接口
@app_product.route("/api/product/list", methods=['GET'])
def product_list():# 初始化数据库链接connection = connectDB()# 使用python的with..as控制流语句（相当于简化的try except finally）with connection.cursor() as cursor:# 查询产品信息表-按更新时间新旧排序sql = "SELECT * FROM `products` WHERE `status`=0 ORDER BY `update` DESC"cursor.execute(sql)data = cursor.fetchall()# 按返回模版格式进行json结果返回resp_data = {"code": 20000,"data": data}return resp_data// 添加产品功能的接口
@app_product.route("/api/product/create",methods=['POST'])
def product_create():# 初始化数据库链接connection = connectDB()# 定义默认返回结构体resp_data = {"code": 20000,"message": "success","data": []}# 获取请求传递json bodybody = request.get_data()body = json.loads(body)with connection:# 先做个查询，判断keyCode是否重复（这里的关键词最初定义为唯一项目编号或者为服务的应用名）with connection.cursor() as cursor:select = "SELECT * FROM `products` WHERE `keyCode`=%s AND `status`=0"cursor.execute(select, (body["keyCode"],))result = cursor.fetchall()# 有数据说明存在相同值，封装提示直接返回if len(result) > 0:resp_data["code"] = 20001resp_data["message"] = "唯一编码keyCode已存在"return resp_datawith 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）重复提示

前端实现添加功能

先看下想要实现成的页面样式

定义接口请求 首先对已经测试通过添加接口定义到前端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 = undefinedthis.product.keyCode = ''this.product.title = ''this.product.desc = ''this.product.operator = this.op_user// 弹出对话框设置为truethis.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" 输入组件指定为多行文本框；

其他按钮样式或属性参考官网：

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

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

https://element.eleme.io/#/zh-CN/component/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()})},