在系列前几篇实战分享中，我们从0-1实现了产品管理的中的列表显示和增删改的最为基础的交互操作，本篇将继续学习和实现其搜索和分页。
1. 搜索功能实现
之前只有个全量的列表接口，要实现关键词搜索，还需要创建一个带参数的查询接口。
1.1 服务端条件接口
参照之前的list接口实现，我们定义一个新的接口 /api/product/search，请求方法支持GET和POST，并定义两个URL参数分别为：
- title 产品标题模糊查询
- keyCode 唯一码模糊查询
接口实现代码中注意模糊查询是在参数不为空的逻辑判断成立后才进行拼接。
代码语言：javascript复制@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
}
这里还有个知识点是SQL模糊查询LIKE关键词和语法的使用，基本的语法为[NOT] LIKE '字符串' 用于搜索匹配字段中的指定内容。
- NOT ：可选参数，字段中的内容与指定的字符串不匹配时满足条件
- 字符串：指定用来匹配的字符串，也可以加通配符
LIKE 关键字支持百分号“%”（多个）和下划线“_”（一个）通配符。
1.2 页面查询功能
接口请求：按照实现套路，先在api/product.ts接口定义文件中新增 interface和apiProductSearch 方法，参数的格式为{"title":"value", "keyCode":"value"}
// typescript定义请求参数类型
export interface productParams {
title: string;
keyCode: string;
};
// 后端接口请求GET方法，并通过URL方式传参数
export function apiProductSearch(data: productParams) {
return axios.get<TableData[]>('/api/product/search',{
params: data
});
}
搜索表单：在表格组件上方通过内行表单实现两个input和一个带图标的搜索按钮，表单字典类型数据绑定为productSearch，几处实现参考代码如下：
1）定义搜索参数体
代码语言：javascript复制const productSearch = reactive({
title: undefined,
keyCode: undefined,
})
2）在 template 下方编写表单，其中用到了layout="inline"表单行业排列即独占一行，设置了input的allow-clear允许快捷清空属性，以及通过插槽的方式给查询按钮那增加了搜索图标。
<a-form :model="productSearch" layout="inline">
<a-form-item>
<a-input v-model="productSearch.title" allow-clear placeholder="标题模糊搜索"/>
</a-form-item>
<a-form-item>
<a-input v-model="productSearch.keyCode" allow-clear placeholder="唯一码精确搜索"/>
</a-form-item>
<a-form-item>
<a-button type="primary" >
<template #icon>
<icon-search />
</template>
搜索
</a-button>
</a-form-item
</a-form>
npm run dev 编译运行看下实现是否符合预期（注：忽略样式问题，这部分将在第三小节同一处理）。
搜索事件：最后的步骤就是将表单数据和接口请求，通过搜索按钮点击事件进行绑定就可以了。代码实现src/views/product/index.vue
// HTML搜索按钮增加click事件
<a-button type="primary" @click="btnSearchClick">
// 引入定义的接口方法
import { apiProductSearch } from '@/api/product';
// 搜索点击事件，将查询后的结果赋值给renderList
const btnSearchClick = async () => {
const res = await apiProductSearch(productSearch);
if (res.code === 20000) {
renderList.value = res.data
} else {
console.log("产品搜索失败");
}
};
同样通过GIF演示并测试下关键词搜索的效果
至此一个简单的条件查询功能实现，作为搜索功能实现的基础，大家务必认真对待。
暂停了小半年的系列终于在这个五一宅家假期中重启了，你还记得多少呢？如果忘记了请回到初篇做个回顾把。
