測試開發【提測平臺】分享7-實現產品搜尋和優化時間顯示

MrZ大奇發表於2021-08-16
優化

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

一首歌的時間去閱讀，再用半小時的時間去coding，動手去實踐才能記得牢，學得會，來吧一起成長進步。

  • 實現模糊搜尋功能
  • 使用table屬性formatter來格式化內容

實現搜尋功能

服務端實現搜尋介面

按照查詢全部介面進行改造，增加兩個引數分別是title和keyCode進行邏輯查詢sql與進行拼接，實現查詢，這裡需要注意的是，在用request.args.get()獲取引數值的話，獲取不到是個None

# 搜尋介面
@app_product.route("/api/product/search",methods=['GET'])
def product_search():
    # 獲取title和keyCode
    title = request.args.get('title')
    keyCode = request.args.get('keyCode')

    # 基礎語句定義
    sql = "SELECT * FROM `products` WHERE `status`=0"

    # 如果title不為空，拼接tilite的模糊查詢
    if title is not None:
        sql = sql + " AND `title` LIKE '%{}%'".format(title)
    # 如果keyCode不為空，拼接tilite的模糊查詢
    if keyCode is not None:
        sql = sql + " AND `keyCode` LIKE '%{}%'".format(keyCode)

    # 排序最後拼接
    sql = sql + " ORDER BY `update` DESC"

    connection = connectDB()
    # 使用python的with..as控制流語句（相當於簡化的try except finally）
    with connection.cursor() as cursor:
        # 按照條件進行查詢
        print(sql)
        cursor.execute(sql)
        data = cursor.fetchall()

    # 按返回模版格式進行json結果返回
    resp_data = {
        "code": 20000,
        "data": data
    }

    return resp_data

 

前端定義請求介面

老模式，先實現product.js 的介面請求實現 apiProductSearch()，params定義的是個josn直接傳過來就行，可以不用二次封裝，上層傳過來的格式如：

{"title":"value", "keyCode":"value"}

// 條件查詢
export function apiProductSearch(params) {
  return request({
    url: '/api/product/search',
    method: 'get',
    params: params
  })
}

 

頁面實現搜尋區域

使用 Form表單 中的 ¶內行表單  即橫向給定兩個輸入框，分別繫結，data（）裡定義的search關鍵字title和keyCode，再增加個button控制元件，最為搜尋的時候的操作，幾個關鍵程式碼分別如下：

繫結資料定義

 

// 搜尋條件
search: {
  title: undefined,
  keyCode: undefined
}

 

搜尋區域和控制元件定義

 

<div class="filter-container">
      <!--搜尋部分開始-->
      <el-form :inline="true" :model="search">
        <el-form-item label="名稱">
          <el-input v-model="search.title" placeholder="支援模糊查詢" style="width: 200px;" clearable/>
        </el-form-item>
        <el-form-item label="關鍵詞">
          <el-input v-model="search.keyCode" placeholder="支援模糊查詢" style="width: 200px;" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="searchProduct()">查詢</el-button>
        </el-form-item>
      </el-form>
      <!--搜尋部分結束-->
      <el-button type="primary" icon="el-icon-plus" style="float:right" @click="dialogProduct()">新增</el-button>
    </div>

 

條件搜尋點選事件

 

// 條件搜尋功能
searchProduct() {
  apiProductSearch(this.search).then(res => {
    this.tableData = res.data
  })
}

實現如上內容後，分別啟動前後端看看實際成功，這裡要說的是，實際上在後端介面測試好後，一直執行者，前端也處於執行狀態就行，前端在ide工具裡可以在儲存後實時編輯渲染的，這樣也最大程度看到編碼中的效果，在實際的開發過程中也是最為真實的，邊編碼邊看效果，遇到問題和錯誤及時解決，減少敲了一大堆後的多處錯誤的回頭反查的無頭緒。

按例進行程式設計後測試

CASE1:  輸入名稱進行模糊查詢

CASE2:輸入關鍵詞模糊查詢

其他測試用例

CASE3: 同時輸入名稱和關鍵詞聯合查詢，驗證顯示同時滿足的資料

CASE4: 任意一個條件精確搜尋查詢，驗證查詢顯示正常

CASE5: 不輸入空條件，驗證返回所有

 

優化時間列顯示

在之前的操作時間列後端直接返回的是資料預設的格式 Sun, 08 Aug 2021 17:56:32 GMT，這樣很不友好，我們在前端進行時間格式化，使用的到是依賴包moment，一個輕量級的JavaScript時間庫，方便開發中對時間的各種操作，官方地址 http://momentjs.cn/

要使用它，需要提前在前端的 package.json 檔案增加這個依賴，當前我增加的版本是 2.29.1 截止到本篇編寫時

這裡還涉及到一個操作，引用後要做依賴更新，直接點選圖片中ide編輯器提示的run 即可，或者按照之前在命令列執行 npm install 

 

在product.vue 全域性js中增加引用

 

import moment from 'moment'

編寫一個時間格式方法，放在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')
    }

 

 

 

接下來重要的是在原來table 的 el-table-column 使用 formatter 屬性引用即可

<el-table-column :formatter="formatDate" prop="update" label="操作時間"/>

 

最後優化的效果如下

:formatter 這個不只可以用於時間，後續比如後端返回的對應的數字轉換成英文，返回加工的顯示等等，所以要掌握使用方法舉一反三。

 

一個思考題

在最後本篇留一個思考題，就是條件搜尋和之前的全量查詢，是否可以合併成一個呢，不妨動手自己改造一下。

 

【程式碼更新】

 

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

 

TAG：TPMShare7

 

【系列前要閱讀】

 

 

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

 

相關文章