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

MrZ大奇發表於2021-08-09
資料庫

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

還是先給出本篇關鍵點：

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

 

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

 

相關文章