前端uniapp调用后端模糊查询
时间: 2025-07-06 20:37:09 浏览: 4
<think>好的,用户想了解如何在UniApp前端调用后端接口实现模糊查询。首先,我需要回忆一下UniApp的基本结构和网络请求的方法。UniApp通常使用uni.request来发送HTTP请求,类似微信小程序的wx.request。
接下来,模糊查询的关键在于前端传递搜索关键词,后端处理SQL的LIKE语句或者正则表达式。用户可能需要知道如何从前端收集输入,然后将参数传递给后端。比如,用户输入一个关键字,前端需要将这个关键字作为参数附加到请求的URL或者放在请求体中。
然后,考虑到示例的重要性,应该提供一个具体的代码示例。比如在UniApp的页面中,有一个输入框绑定到data中的keyword变量,当用户输入时触发搜索函数,使用uni.request发送POST或GET请求到后端接口,后端接口处理模糊查询并返回结果。
另外,需要提到请求的配置,比如header中的Content-Type,特别是当使用POST请求时,可能需要设置为application/x-www-form-urlencoded,否则后端可能无法正确解析参数,导致400错误,这一点在用户提供的引用[2]中有提到。
还要注意错误处理,比如在uni.request的fail或complete回调中处理网络错误或服务器返回的错误信息。此外,后端接口的实现部分,虽然用户主要问的是前端,但简要说明后端的处理逻辑也是有帮助的,比如使用SQL的LIKE语句进行模糊匹配。
最后,生成相关问题,比如优化方法、不同请求方式的区别、用户输入防抖处理等,这些能帮助用户更深入地理解相关知识点。</think>### UniApp前端调用后端接口实现模糊查询方法
#### 1. 前端参数传递
- 用户输入的关键词通过`v-model`绑定到`keyword`变量
- 触发方式可选择输入时实时查询(需防抖)或按钮点击查询
#### 2. 网络请求示例
```javascript
// 页面script部分
export default {
data() {
return {
keyword: '',
resultList: []
}
},
methods: {
doSearch() {
uni.request({
url: 'https://api.example.com/search',
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded' // 关键配置[^2]
},
data: {
keyword: this.keyword
},
success: (res) => {
if(res.statusCode === 200) {
this.resultList = res.data
}
},
fail: (err) => {
uni.showToast({ title: '请求失败', icon: 'none' })
}
})
}
}
}
```
#### 3. 后端接口处理(示例)
```javascript
// Node.js示例
app.post('/search', (req, res) => {
const { keyword } = req.body
const sql = `SELECT * FROM products
WHERE name LIKE '%${keyword}%'
OR description LIKE '%${keyword}%'`
// 执行数据库查询...
})
```
#### 4. 注意事项
1. 输入合法性验证:前端应对特殊字符进行过滤
2. SQL注入防护:后端应使用参数化查询[^1]
3. 性能优化:建议使用防抖函数(300-500ms延迟)
```javascript
// 防抖实现示例
let timer = null
onInput() {
clearTimeout(timer)
timer = setTimeout(() => {
this.doSearch()
}, 500)
}
```
阅读全文
相关推荐














