概述
我们在上一篇实现了基础的tab展示，目前我们需要界面上可以展示我们创建的数据，数据存储在数据当中
数据库使用Mysql本地或者远程云库均可
后端服务通过 实现查询、增加和修改基本操作
前端掌握Table组件显示对于超长字符省略优化
创建数据库和产品表
使用数据IDE 链接mysql数据库，并创建一个数据库tpmdatas和一个Products表，字段分别如下：
也可以参考下边SQL语句进行表格创建顺便添加两条正式测试数据
/*
Navicat Premium Dump SQL
Source Server : rebort-测试开发平台开发
Source Server Type : MySQL
Source Server Version : 80042 (8.0.42)
Source Host : localhost:3306
Source Schema : tpmdatas
Target Server Type : MySQL
Target Server Version : 80042 (8.0.42)
File Encoding : 65001
Date: 25/08/2025 11:01:46
*/
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) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '项目唯一编号',
`title` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '中文项目名',
`desc` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '' COMMENT '描述',
`status` int NOT NULL DEFAULT 0 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`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 59 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '项目产品表' ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of products
-- ----------------------------
INSERT INTO `products` VALUES (35, 'vss', 'vss平台', 'vss平台测试产品项目', 0, 'Super Admin', '2025-08-20 13:45:57');
INSERT INTO `products` VALUES (39, 'vss app', 'vss app', 'vss app 测试项目', 0, 'Super Admin', '2025-08-19 09:17:51');
INSERT INTO `products` VALUES (40, 'License', 'vss License管理平台', 'License授权管理平台项目测试！', 0, 'Super Admin', '2025-08-19 13:41:46');
INSERT INTO `products` VALUES (41, 'player', 'vss player播放器', 'vssplayer项目测试！', 0, 'Super Admin', '2025-08-19 13:41:59');
INSERT INTO `products` VALUES (56, '99999', '99999', '9999', 0, '超级管理员', '2025-08-22 18:34:04');
INSERT INTO `products` VALUES (57, '8888', '888', '8', 0, '超级管理员', '2025-08-22 18:35:16');
INSERT INTO `products` VALUES (58, '88888', '88888', '888', 0, '超级管理员', '2025-08-22 18:35:22');
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='root', # 设置的具有增改查权限的用户
password='', # 用户对应的密码
database='tpmdatas',# 数据表
charset='utf8mb4', # 字符编码
cursorclass=pymysql.cursors.DictCursor) # 结果作为字典返回游标
@app_product.route("/api/product/list", methods=['GET'])
def product_list():
# # 硬编码返回list
# data = [
# {"id": 1, "keyCode": "project1", "title": "项目一", "desc": "这是项目1描述", "operator": "admin",
# "update": "2025-08-06"},
# {"id": 2, "keyCode": "project2", "title": "项目而", "desc": "这是项目2描述", "operator": "user",
# "update": "2025-08-03"}
# ]
# 使用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/>
最终前端启动后实现的效果如下
至此简单的持久化查询实现完成。
遇到启动问题记录
如果你是用MAC运行，那么如果遇到下面这个错误的提示，可以试试按照下面的解决方式解决
可能是由于环境代码以及最新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