微信搜索【大奇測試開】，關注這個堅持分享測試開發干貨的家伙。
還是先給出本篇關鍵點：
- 數據庫使用Mysql本地或者遠程雲庫均可
- 后端服務通過PyMySQL實現查詢基本操作
- 前端掌握Table組件顯示對於超長字符省略優化
創建數據庫和產品表
使用數據IDE 鏈接mysql數據庫，並創建一個數據庫TPMDatas和一個Products表，字段分別如下：
也可以參考下邊SQL語句進行表格創建順便添加兩條正式測試數據
SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for products -- ---------------------------- DROP TABLE IF EXISTS `products`; CREATE TABLE `products` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '編號自增', `keyCode` varchar(200) NOT NULL COMMENT '項目唯一編號', `title` varchar(200) NOT NULL COMMENT '中文項目名', `desc` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '描述', `operator` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '操作者', `update` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '操作時間', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='項目產品表'; -- ---------------------------- -- Records of products -- ---------------------------- BEGIN; INSERT INTO `products` VALUES (1, 'bigdata', '數據大盤', '內部一個數據技術分析的項目，用於分析各種數據聚合平台', 'daqi', '2021-07-17 20:38:37'); INSERT INTO `products` VALUES (2, 'payment', '收銀台', '支付聚合收銀台', 'lili', '2021-07-17 20:40:29'); COMMIT; SET FOREIGN_KEY_CHECKS = 1;
改造項目產品查詢接口之前的接口 /api/product/list 是硬編碼返回，我們這里改造成持久化的方式python實現mysql的數據的方式目前支持度較好的有如：
- mysqlclient （github Star 1.9K）
- PyMySQL (github Star 6.5K）
- mysql.connector (Mysql官方的驅動庫)
綜合使用度和后續可能使用ORM(對象關系映射)優化，本項目選擇PyMySQL
# 安裝依賴包 python3 -m pip install PyMySQL
然后主要就是引入包，實現數據庫的連接和查詢操作
# -*- coding:utf-8 -*-
from flask import Blueprint
import pymysql.cursors
app_product = Blueprint("app_product", __name__)
# 使用用戶名密碼創建數據庫鏈接
# PyMySQL使用文檔 https://pymysql.readthedocs.io
connection = pymysql.connect(host='localhost', # 數據庫IP地址或鏈接域名
user='mrzcode', # 設置的具有增改查權限的用戶
password='mrzcode', # 用戶對應的密碼
database='TPMStore',# 數據表
charset='utf8mb4', # 字符編碼
cursorclass=pymysql.cursors.DictCursor) # 結果作為字典返回游標
@app_product.route("/api/product/list",methods=['GET'])
def product_list():
# 使用python的with..as控制流語句（相當於簡化的try except finally）
with connection.cursor() as cursor:
# 查詢產品信息表-按更新時間新舊排序
sql = "SELECT * FROM `Products` ORDER BY `Update` DESC"
cursor.execute(sql)
data = cursor.fetchall()
# 按返回模版格式進行json結果返回
resp_data = {
"code": 20000,
"data": data
}
return resp_data
前端產品頁面優化
前端產品頁面優化對於本頁數據由於后端是按照之前格式返回的，所以整體不用做什么改造，這里僅增加一個描述列用於顯示描述信息，然后對於描述可能很長的情況，我們做個省略的顯示的優化功能，主要是使用了element ui屬性 show-overflow-tooltip
<el-table-column prop="desc" label="描述" show-overflow-tooltip/>
最終前端啟動后實現的效果如下
至此簡單的持久化查詢實現完成。
本次分享代碼已提交 https://github.com/mrzcode/TestProjectManagement
標記TAG：TPMShare4
如果想查看當前代碼可以checkout本次TAG即可
遇到啟動問題記錄
在做本次更新分享的時候，可能是由於環境代碼以及最新mac系統的關系，提示相關 Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime 的啟動錯誤。解決方式：把node-sass升級到最新版本
npm install node-sass --dev
原創不易，經過實踐的總結分享更不易，如果你覺得有用，請點擊推薦，也歡迎關注我博客園和微信公眾號。
*可能需歷史閱讀*