Flask开发，产品功能搜索功能实现-第八篇

原创于 2025-08-27 08:01:33 发布 · 255 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flask #python #后端

《Flask》开发框架0-1实战开发专栏收录该内容

9 篇文章

订阅专栏

产品搜索和优化，时间展示优化开发

实现模糊搜索功能
使用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:
        # 按照条件进行查询
        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工具里可以在保存后实时编辑渲染的，这样也最大程度看到编码中的效果，在实际的开发过程中也是最为真实的，边编码边看效果，遇到问题和错误及时解决，减少敲了一大堆后的多处错误的回头反查的无头绪。

1: 输入名称进行模糊查询

2:输入关键词模糊查询

其他测试用例

3: 同时输入名称和关键词联合查询，验证显示同时满足的数据

4: 任意一个条件精确搜索查询，验证查询显示正常

5: 不输入空条件，验证返回所有

优化时间列显示

在之前的操作时间列后端直接返回的是数据默认的格式Sun, 08 Aug 2025 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 这个不只可以用于时间，后续比如后端返回的对应的数字转换成英文，返回加工的显示等等