測試開發【提測平台】分享9-DBUntils優化數據連接&實現應用搜索和分頁功能

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

 

從本期開始知識點講以思維導圖的形式給出，內容點會按照講解-應用-展示的形式體現，這樣會更清晰些。

 

DBUntils連接池

在項目中鏈接數據是直接通過pymysql去做的鏈接請求關閉，每次操作都要獨立重復請求，其實是比較浪費資源，在並發不大的小項目雖然無感知，但如果有頻繁請求的項目中，就會有性能問題，那么可以通過使用連接池技術，管理來進行優化，DBUnitls是一套Python的數據庫連接池包，對鏈接對象進行自動鏈接和釋放，提高高頻高並發下數據訪問性能，大概的原理如：

DBUntils 按照配置初始化多個數據庫連接存儲在連接池中

• 在程序創建連接的時候，從空閑的連接池中獲取，不需要重新初始化連接，提升鏈接速度；

• 在程序使用完畢后，把連接放回連接池，並不真正的關閉，等待其他請求使用，減少頻繁數據的打開和關閉操作。

DBUntils 提供兩種方式，並都能自動管理

• PersistentDB (persistent_db)  提供線程專用的連接

• PooledDB (pooled_db)  提供線程間可共享的連接

官方 [注解-1] 給出的示意圖如下，僅夠參考下，不進行擴展

使用此功能需要安裝依賴

pip install DBUtils

一般比較常用就是共享的方式，以 pooled_db為例子，使用方法很簡單

import pymysql
from dbutils.pooled_db import PooledDB
# 初始化數據庫連接，使用pymysql連接，
pool = PooledDB(pymysql,3,host='',port='',user='',passwd='',database='')

# 一般連接
db = pool.connection()
cur = db.cursor()
cur.execute(...)
res = cur.fetchone()
cur.close() # 關閉使用游標
db.close() # 關閉使用連接

# 或者通過with方式
with pool.connection() as db:
  with db.cursor as cur:
       cur.execute(...)
       res = cur.fetchone()

一些參數說明，上邊說明中第一參數為 creator 指定那種連接模式，第二參數為mincached

• mincached ：啟動時開啟的空的連接數量

• maxcached ：連接池最大可用連接數量

• maxshared : 連接池最大可用共享連接數量

• maxconnections : 最大允許連接數量

• maxusage ：單個麗娜姐最大復用次數

• blocking ：達到最大數量時是否阻塞

這里只是對連接的管理，DBUntils的基本知識點講完了，關於性能對比可以網上搜索相關內容，另外其他的數據庫操作還按照自己使用方法進行操作即可。

 

SQL中limit用法

項目中對於較多的數據顯示，需要實現分頁數據查詢，這可以利用SQL語法關鍵詞 limit ，它可以限制查詢結果返回的數量，也可以指定起始索引，來完成分頁查詢效果，語法形式

# 基本用法
SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset
# 簡化形式
select * from tableName limit i,n

• i：指定第一個返回記錄行的偏移量（可省略即表示從0開始）

• n：第二個參數指定返回記錄行的最大數目

兩個示例如：

... limit 10 # 查詢前10條數據, 也可以表示為limit 0,10
... limit 10,15 # 從11條開始返回后15條數據 即11-25

這里有個 注意事項，網上好多關於limit最后一個參數用 -1 可以表示，指定偏移量到最后，這個目前在新的MYSQL版本已經無效，會報語法錯誤，辦法是用個較大的數代替。

如何實現分頁查詢，通過觀察我們可以這樣，如果前端傳遞的page頁數（初始為1），每頁的數量為page_size，那么第一個參數計算偏移量可設置為  (page-1) * page_size，第二參數表可設置為page_size， 例如 前端請求第一頁20個，則計算后后兩個參數為（ 0, 20），再如請求第2頁20個，則計算后兩個參數為 ( 20, 20 )，這樣就可以實現分頁數據查詢效果。

這個知識點最后，擴展一個小優化，如果是分頁數據特別，第一個參數偏移量太大的時候會帶來性能的問題，優化的方式是使用子查詢優化（前提條件是有自增ID的表），即先通過查詢偏移量ID，然后條件 “>=ID + limit 數量" 進行查詢

SELECT * FROM apps where id >=(SELECT id FROM apps LIMIT 100000,1) LIMIT 20

前端組件

分頁 Pagination

當數據量過多時，使用分頁分解數據。[注解-2]

基本樣式和用法

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage4"
  :page-sizes="[100, 200, 300, 400]"
  :page-size="100"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

設置layout，表示需要顯示的內容，用逗號分隔，布局元素會依次顯示。prev表示上一頁，next為下一頁，pager表示頁碼列表，除此以外還提供了->后的元素會靠右顯示，jumper表示跳頁元素，total表示總條目數，sizes表示每頁顯示條數，size用於設置每頁顯示的頁碼數量（默認10），通過pager-count屬性可以設置最大頁碼按鈕數（默認大於7頁的時候6頁后...縮略 ），使用了size-change和  current-change事件來處理頁碼大小和當前頁變動時候觸發的事件。

選擇器 Select

當選項過多時，使用下拉菜單展示並選擇內容。[注解-3]

基本用法 ：<el-select>控件標記，v-model綁定數據，<el-option> 選項集。

<el-select v-model="value" placeholder="請選擇">
   <el-option key="key1" label="選項1" :value="key1"/>
   <el-option key="key2" label="選項2" :value="key2"/>
</el-select>

自定義用法：<span style="float: left/right">顯示自定義的左右內容

<el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>
</el-select>

樣式如下，具體使用和其他樣式參數參考官方

 

以上是本章在實現“應用管理”模塊顯示功能中新用到的兩個組件，對於要實現分頁，前端請求數據需要給 頁碼current-page和 頁數page_size ，后端數據還要返回一個總量total數據。

模糊查詢與分頁功能實現

通過上邊的新增知識點，下邊按照上一篇的產品需求和原型，進行實際的應用實現，這里會給出實現步驟，可以嘗試利用上邊和以往的內容點，自己去實現，然后不會點再參考實際羅列的代碼編程，還是那觀點，通過自己動手實踐出來的才印象

產品原型頁面

詳細需求參考歷史文章 【平台規划和需求分析】

功能實現（步驟）偽代碼

1. 根據需求羅列所需字段創建 apps應用數據庫表，並插入一些測試數據大於10條以上；

2. 后端創建一個配置文件管理數據相關字段信息；

3. 后端創建application.py 用來實現DBUntils連接和應用管理api；

4. 接口返回的Response抽取出來定一個通用json格式返回；

5. GET 實現/api/application/product 歸屬分類（products表）查詢，只需要 ；id,keyCode,title 數據；

6. POST 實現/api/application/search 多關關鍵詞（apps表）查詢，同時要根據前端傳的分頁；和數量進行分頁查詢，並要返回個表總數；

7. 前端menu菜單實現新目錄結構

8. 創建新的api請求，實現對后端提供的接口請求

9. 前端查詢產品，並使用自定義展示數據，選擇數據后可清除，其他搜索條件參照以往input用法；

10. 使用Table組件綁定數據，使用Pagination 綁定分頁數據和實現切換時候動作方法，樣式使用帶背景，總數，數量選擇，頁碼，以及上、下頁切換。 

實踐參考（本章）實現

1.1 數據庫apps表創建

DROP TABLE IF EXISTS `apps`;
CREATE TABLE `apps` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '自增id',
  `appId` varchar(50) DEFAULT NULL COMMENT '應用服務ID',
  `productId` bigint DEFAULT NULL COMMENT '外鍵關聯產品所屬',
  `note` varchar(100) DEFAULT NULL COMMENT '應用描述',
  `tester` varchar(300) DEFAULT NULL COMMENT '測試負責人',
  `developer` varchar(300) DEFAULT NULL COMMENT '默認研發負責人',
  `producer` varchar(300) DEFAULT NULL COMMENT '默認產品經理',
  `CcEmail` varchar(500) DEFAULT NULL COMMENT '默認抄送郵件或組',
  `gitCode` varchar(200) DEFAULT NULL COMMENT '代碼地址',
  `wiki` varchar(200) DEFAULT NULL COMMENT '項目說明地址',
  `more` text COMMENT '更多的信息',
  `status` char(1) DEFAULT '0' COMMENT '狀態0正常1刪除',
  `creteUser` varchar(20) DEFAULT NULL COMMENT '創建人',
  `createDate` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '創建時間',
  `updateUser` varchar(20) DEFAULT NULL COMMENT '修改人',
  `updateDate` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改時間',
  PRIMARY KEY (`id`),
  UNIQUE KEY `apps_id_uindex` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10014 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='應用管理';

1.2 方便的測試數據

BEGIN;
INSERT INTO `apps` VALUES (10000, 'goods_server', 11, '商品中心服務', '[e-mail]', '[e-mail]', '[e-mail]', '[e-mail];[e-mail]', 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15103321.html', '商品中心為訂單的基礎上游服務，有訂單業務團隊負責', '0', 'MrzCode', '2021-09-05 17:50:09', 'MrzCodeUpdate', '2021-09-07 09:59:51');
INSERT INTO `apps` VALUES (10001, 'payment_core', 2, '支付核心服務', '[e-mail]', '[e-mail]', '[e-mail]', NULL, NULL, 'https://www.cnblogs.com/mrzcode/p/15118881.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:16', 'MrzCodeUpdate', '2021-09-07 10:00:48');
INSERT INTO `apps` VALUES (10002, 'risk_control', 16, '風控服務', '[e-mail]', '[e-mail];[e-mail]', '[e-mail]', NULL, 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15130629.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:20', 'MrzCodeUpdate', '2021-09-07 10:00:53');
INSERT INTO `apps` VALUES (10003, 'order_new', 16, '新訂單服務', '[e-mail]', '[e-mail]', NULL, '[e-mail];[e-mail]', NULL, 'https://www.cnblogs.com/mrzcode/p/15139227.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:23', 'MrzCodeUpdate', '2021-09-07 10:00:55');
INSERT INTO `apps` VALUES (10004, 'message_server', 16, '消息服務中心', '[e-mail];[e-mail]', '[e-mail];[e-mail];[e-mail]', '[e-mail]', NULL, 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15136302.html', NULL, '0', 'MrzCode', '2021-09-05 17:50:27', 'MrzCodeUpdate', '2021-09-07 10:00:57');
INSERT INTO `apps` VALUES (10005, 'user_center', 10, '用戶服務中心', '[e-mail]', '[e-mail]', '[e-mail]', NULL, NULL, 'https://www.cnblogs.com/mrzcode/p/15160329.html', '基礎服務，用戶模塊，管理公司內部用戶和外網所有用戶信息', '0', 'MrzCode', '2021-09-05 17:50:31', 'MrzCodeUpdate', '2021-09-07 10:00:10');
INSERT INTO `apps` VALUES (10006, 'finance_web', 10, '財務服務系統', '[e-mail]', '[e-mail]', NULL, NULL, NULL, NULL, NULL, '0', 'MrzCode', '2021-09-05 17:55:41', NULL, '2021-09-07 10:00:23');
INSERT INTO `apps` VALUES (10007, 'search_all', 17, '全域搜索', '[e-mail]', '[e-mail]', NULL, NULL, NULL, NULL, NULL, '0', 'MrzCode', '2021-09-05 17:55:47', NULL, '2021-09-07 10:00:20');
INSERT INTO `apps` VALUES (10008, 'domain_server', 17, '域名服務系統', '[e-mail]', '[e-mail]', NULL, NULL, 'https://github.com/mrzcode/TestProjectManagement', 'https://www.cnblogs.com/mrzcode/p/15216885.html', NULL, '0', 'MrzCode', '2021-09-05 20:21:12', NULL, '2021-09-07 10:00:18');
INSERT INTO `apps` VALUES (10009, 'email_server', 16, '郵件系統', '[e-mail]', '[e-mail]', NULL, NULL, NULL, NULL, NULL, '0', 'MrzCode', '2021-09-05 20:21:29', NULL, '2021-09-07 10:00:58');
INSERT INTO `apps` VALUES (10010, 'hr_services', 10, '人力資源系統', '[e-mail]', '[e-mail]', '[e-mail]', '[e-mail]', NULL, NULL, NULL, '0', 'DaQi', '2021-09-05 20:21:58', NULL, '2021-09-07 10:00:07');
INSERT INTO `apps` VALUES (10011, 'config_center', 16, '配置中心', '[e-mail]', '[e-mail]', NULL, NULL, NULL, 'https://www.cnblogs.com/mrzcode/p/15216885.html', NULL, '0', 'DaQi', '2021-09-05 20:22:28', NULL, '2021-09-07 10:01:00');
INSERT INTO `apps` VALUES (10012, 'case_platform', 16, '用例管理平台', '[e-mail]', '[e-mail]', NULL, NULL, NULL, NULL, NULL, '0', 'DaQi', '2021-09-05 20:23:24', NULL, '2021-09-07 10:01:02');
INSERT INTO `apps` VALUES (10013, 'qa_manger', 16, '測試中心', '[e-mail]', '[e-mail]', '[e-mail]', '', '', '', '', '0', 'DaQi', '2021-09-05 20:27:07', 'DaQi', '2021-09-07 10:01:01');
COMMIT;

SET FOREIGN_KEY_CHECKS = 1;

2. 創建一個常量配置

目錄/configs/config.py

# config.py
# 數據庫配置
MYSQL_HOST= 'localhost'
MYSQL_PORT = 3306
MYSQL_DATABASE = 'TPMStore'
MYSQL_USER = 'mrzcode'
MYSQL_PASSWORD = 'mrzcode'

3. 創建新的藍圖api應用管理模塊，實現DBUntils初始化連接

路徑 /apis/application.py ，並導入config數據庫配置，以及dbutils模塊

from flask import Blueprint
from dbutils.pooled_db import PooledDB
from configs import config

import pymysql.cursors

# 使用數據庫連接池的方式鏈接數據庫，提高資源利用率
pool = PooledDB(pymysql, mincached=2, maxcached=5,host=config.MYSQL_HOST, port=config.MYSQL_PORT,
                user=config.MYSQL_USER, passwd= config.MYSQL_PASSWORD, database=config.MYSQL_DATABASE,
                cursorclass=pymysql.cursors.DictCursor)

app_application = Blueprint("app_application", __name__)

4. 創建一個統一格式類

目錄/configs/ 添加一個統一Response返回

# format.py
resp_format_success = {
    "code": 20000,
    "message": "success",
    "data": [],
    "total": 0
}

5. 實現所屬分類查詢用於條件篩選

@app_application.route("/api/application/product",methods=['GET'])
def getProduct():
    # 使用連接池鏈接數據庫
    connection = pool.connection()

    with connection.cursor() as cursor:
        # 查詢產品信息表-按更新時間新舊排序
        sql = "SELECT id,keyCode,title FROM `products` WHERE `status`=0 ORDER BY `update` DESC"
        cursor.execute(sql)
        data = cursor.fetchall()

    # 按返回模版格式進行json結果返回
    response = format.resp_format_success
    response['data'] = data
    return response

6. 實現分頁查詢應用

需要對查詢條件進行按需拼接，還需要通過兩次查詢，一次查詢總數量，一次是limit分頁查詢

@app_application.route("/api/application/search",methods=['POST'])
def searchBykey():
    body = request.get_data()
    body = json.loads(body)

    # 基礎語句定義
    sql = ""

    # 獲取pageSize和
    pageSize = 10 if body['pageSize'] is None else body['pageSize']
    currentPage = 1 if body['currentPage'] is None else body['currentPage']


    # 拼接查詢條件
    if 'productId' in body and body['productId'] != '':
        sql = sql + " AND `productId` = '{}'".format(body['productId'])
    if 'appId' in body and body['appId'] != '':
        sql = sql + " AND `appId` LIKE '%{}%'".format(body['appId'])
    if 'note' in body and body['note'] != '':
        sql = sql + " AND `note` LIKE '%{}%'".format(body['note'])
    if 'tester' in body and body['tester'] != '':
        sql = sql + " AND `tester` LIKE '%{}%'".format(body['tester'])
    if 'developer' in body and body['developer'] != '':
        sql = sql + " AND `developer` LIKE '%{}%'".format(body['developer'])
    if 'producer' in body and body['producer'] != '':
        sql = sql + " AND `producer` LIKE '%{}%'".format(body['producer'])

    # 排序和頁數拼接
    sql = sql +' ORDER BY `updateDate` DESC LIMIT {},{}'.format((currentPage-1)*pageSize, pageSize)
    print(sql)

    # 使用連接池鏈接數據庫
    connection = pool.connection()

    with connection:
        # 先查詢總數
        with connection.cursor() as cursor:
            cursor.execute('SELECT COUNT(*) as `count` FROM `apps` WHERE `status`=0' + sql)
            total = cursor.fetchall()

        # 執行查詢
        with connection.cursor() as cursor:
            # 按照條件進行查詢
            cursor.execute('SELECT P.title, A.* FROM apps AS A,products AS P WHERE A.productId = P.id and A.`status`=0' + sql)
            data = cursor.fetchall()

    # 按分頁模版返回查詢數據
    response = format.resp_format_success
    response['data'] = data
    response['total'] = total[0]['count']
    return response

接口文件全部實現完可不要忘記app.py文件中添加注冊

from apis.application import app_application
....
app.register_blueprint(app_application)

7. vue前端對左側目錄進行重新整理

路徑 /src/router/index.js 變更，其中涉及到子菜單用法，用children，這沒有而外講，直接照着代碼一看就明白了。

{
  path: '/settings',
  component: Layout,
  redirect: '/settings',
  meta: { title: '基礎管理', icon: 'dashboard' },
  children: [{
    path: 'product',
    name: 'Product',
    component: () => import('@/views/product/product'),
    meta: { title: '項目產品分類', icon: 'dashboard' }
  },
  {
    path: 'apps',
    name: 'apps',
    component: () => import('@/views/product/apps'),
    meta: { title: '服務應用管理', icon: 'dashboard' }
  }
  ]
},

8. 創建應用頁面的api請求文件和方法

目錄/src/api/apps.js 組裝產品列表和應用搜索接口請求

import request from '@/utils/request'

// 應用搜索接口
export function apiAppsSearch(requestBody) {
  return request({
    url: '/api/application/search',
    method: 'post',
    data: requestBody
  })
}

// 產品選擇項目列表
export function apiAppsProduct() {
  return request({
    url: '/api/application/product',
    method: 'get'
  })
}

9. 實現搜索區域功能

先要創建app管理頁面，路徑/src/views/product/apps.vue ，然后分別利用上邊的知識點實現自定義選擇框的綁定，和其他input字段的綁定，另外有個添加 按鈕（本篇不實現）占位，html區域如下，js內容最后統一給出。

<div class="filter-container">
  <el-form :inline="true" :model="search">
    <el-form-item label="歸屬分類">
      <el-select v-model="search.productId" filterable="true" clearable>
        <el-option value="" label="所有"></el-option>
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.title"
          :value="item.id">
          <span style="float: left">{{ item.keyCode }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="應用ID">
      <el-input v-model="search.appId" placeholder="服務ID關鍵詞" style="width: 200px;" clearable/>
    </el-form-item>
    <el-form-item label="描 述">
      <el-input v-model="search.note" placeholder="描述模糊搜索" style="width: 200px;" clearable/>
    </el-form-item>
    <br>
    <el-form-item label="研 發">
      <el-input v-model="search.developer" placeholder="默認研發" style="width: 210px;" clearable/>
    </el-form-item>
    <el-form-item label="產 品">
      <el-input v-model="search.producer" placeholder="默認產品" style="width: 210px;" clearable/>
    </el-form-item>
    <el-form-item label="測 試">
      <el-input v-model="search.tester" placeholder="默認測試" style="width: 210px;" clearable/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" plain @click="searchClick()">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" icon="el-icon-plus" style="float:right" @click="addApp()">添加應用</el-button>
</div>

10.1 表格數據的綁定

歷史table的內容，可按照產品頁實現來，這里注意依然有時間格式的問題，另外還需要添加個操作列是實現 編輯 功能（本篇不實現）占位。

<el-table :data="tableData">
  <!--:data prop綁定{}中的key，label為自定義顯示的列表頭-->
  <el-table-column prop="appId" label="應用ID"/>
  <el-table-column prop="note" label="描述" show-overflow-tooltip/>
  <el-table-column prop="title" label="歸屬分類"/>
  <el-table-column prop="developer" label="默認研發" />
  <el-table-column prop="producer" label="默認產品"/>
  <el-table-column prop="tester" label="默認測試"/>
  <el-table-column prop="updateUser" label="更新人"/>
  <el-table-column :formatter="formatDate" prop="updateDate" label="更新時間"/>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-link icon="el-icon-edit" @click="updateApp(scope.row)">修改</el-link>
    </template>
  </el-table-column>
</el-table>

10.2 表格下方的分頁控件實現

帶背景的頁碼，以及其他上下頁，總數，自定義數量選擇。

<div>
  <el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="search.currentPage"
    :page-size="search.pageSize"
    layout="total, sizes, prev, pager, next"
    :page-sizes="[5, 10, 20, 30, 50]"
    :total=total>
  </el-pagination>
</div>　

 

最后所有 script 部分的代碼如下

<script>
import moment from 'moment'
import { apiAppsProduct, apiAppsSearch } from '@/api/apps'

export default {
  name: 'Apps',
  data() {
    return {
      search: {
        productId: '',
        appId: '',
        note: '',
        developer: '',
        producer: '',
        tester: '',
        pageSize: 10,
        currentPage: 1
      },
      options: [],
      total: 0,
      tableData: []
    }
  },
  // 頁面生命周期中的創建階段調用
  created() {
    // 調用methods的方法，即初次加載就請求數據
    this.productList()
    this.searchClick()
  },
  methods: {
    formatDate(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      // 使用moment格式化時間，由於我的數據庫是默認時區，偏移量設置0，各自根據情況進行配置
      return moment(date).utcOffset(0).format('YYYY-MM-DD HH:mm')
    },
    productList() {
      apiAppsProduct().then(resp => {
        this.options = resp.data
      })
    },
    searchClick() {
      apiAppsSearch(this.search).then(response => {
        // 將返回的結果賦值給表格自動匹配
        this.tableData = response.data
        this.total = response.total
      })
    },
    handleSizeChange(val) {
      // console.log(`每頁 ${val} 條`)
      this.search.pageSize = val
      this.searchClick()
    },
    handleCurrentChange(val) {
      // console.log(`當前頁: ${val}`)
      this.search.currentPage = val
      this.searchClick()
    },
    addApp() {
      this.$message({
        message: '我是待實現的CASE',
        type: 'warning'
      })
    },
    updateApp() {
      this.$message({
        message: '我是待實現的CASE',
        type: 'warning'
      })
    }
  }
}
</script>

 

如果你是一步步自己走下來，或者參考下來，實際上還是方式，完成一個步驟進行一個驗證，有問題解決掉，然后進行下個，那么你到最后應該都不是有有問題，分別啟動前后的頁面實現效果如下：

問題集錦

1. Python Myql查詢數據返回的是元組類型，而非字典類型

在編碼中優化使用DBUnitls創建數據連接時候，沒有給定參數cursorclass，導致默認返回數據為元組類型，這樣對返回數據還要進行二次轉換操作，比較麻煩，添加 cursorclass=pymysql.cursors.DictCursor 可以設定返回類型為字典，之前項目中使用的時候還沒太注意這個參數的意義，現在通過問題發現它的功能了。

2. 分別更改對其方式

element-ui的分頁組件使用后，默認是居左側對其的，但一般常見產品頁面都會放在中間或者右側對其，但組件本身又沒有提供對其的屬性可設定，通過搜索，可以通過在樣式代碼塊中，自定義下 .el-pagination 的css樣式就行。

<style scoped>
  .el-pagination {
    text-align: right;
  }
</style>

 

【代碼更新】

• 地址：https://github.com/mrzcode/TestProjectManagement

• TAG：TPMShare9

【注解&參考】

1. [注解-1] :https://webwareforpython.github.io/DBUtils/main.html

2. [注解-2] :https://element.eleme.io/#/zh-CN/component/pagination

3. [注解-3] :https://element.eleme.io/#/zh-CN/component/select

堅持原創，堅持實踐，堅持干貨，如果你覺得有用，請點擊推薦，也歡迎關注我博客園和微信公眾號。