測試開發【提測平台】分享4-實現資料庫綁定和產品線顯示功能

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

還是先給出本篇關鍵點：

  • 資料庫使用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使用文檔  //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/>

圖片

 

 

 最終前端啟動後實現的效果如下

 

 

至此簡單的持久化查詢實現完成。

 

本次分享程式碼已提交 //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

 

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

 

Tags:

VirMach 便宜 VPS

QNews

QNews