實現搜索功能

服務端實現搜索接口

按照查詢全部接口進行改造，增加兩個參數分別是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

【系列前要閱讀】

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。