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

時間 2021-08-12

標籤 html 前端 node python mysql git github sql 數據庫 npm 欄目 SQL 简体版

原文原文鏈接

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

仍是先給出本篇關鍵點：前端

數據庫使用Mysql本地或者遠程雲庫都可
後端服務經過PyMySQL實現查詢基本操做
前端掌握Table組件顯示對於超長字符省略優化

建立數據庫和產品表

使用數據IDE 連接mysql數據庫，並建立一個數據庫TPMDatas和一個Products表，字段分別以下：node

也能夠參考下邊SQL語句進行表格建立順便添加兩條正式測試數據python

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的數據的方式目前支持度較好的有如：mysql

mysqlclient （github Star 1.9K）
PyMySQL (github Star 6.5K）
mysql.connector (Mysql官方的驅動庫)

綜合使用度和後續可能使用ORM(對象關係映射)優化，本項目選擇PyMySQLgit

# 安裝依賴包
python3 -m pip install PyMySQL

而後主要就是引入包，實現數據庫的鏈接和查詢操做github

# -*- 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-tooltipsql

<el-table-column prop="desc" label="描述" show-overflow-tooltip/>

最終前端啓動後實現的效果以下數據庫

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

本次分享代碼已提交 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升級到最新版本