flask+vue的模糊查询可以怎么实现
时间: 2024-01-31 19:04:23 浏览: 152
模糊查询可以通过在后端使用 SQL 的 LIKE 运算符或者正则表达式来实现,前端使用 Vue 来发送 Ajax 请求。
在 Flask 后端中,你可以通过使用 SQLAlchemy ORM 来执行 SQL 查询,例如:
```python
from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@hostname/database'
db = SQLAlchemy(app)
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50))
@app.route('/users')
def get_users():
search_query = request.args.get('q')
if search_query:
users = User.query.filter(User.name.like(f'%{search_query}%')).all()
else:
users = User.query.all()
return jsonify([{'id': user.id, 'name': user.name} for user in users])
```
在上面的代码中,我们使用 `request.args` 获取前端传递的查询参数,并通过 `User.query.filter()` 方法来构建查询条件,使用 `like` 方法来匹配模糊查询的条件。最后,我们将查询结果通过 `jsonify` 方法返回给前端。
在 Vue 前端中,你可以通过使用 axios 来发送 Ajax 请求,例如:
```javascript
<template>
<div>
<input type="text" v-model="searchQuery" @input="getUsers">
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
searchQuery: '',
users: []
}
},
methods: {
getUsers() {
axios.get('/users', { params: { q: this.searchQuery } })
.then(response => {
this.users = response.data
})
}
}
}
</script>
```
在上面的代码中,我们通过 `axios.get()` 方法发送 GET 请求,并通过 `params` 参数来传递查询参数。在成功响应后,我们将查询结果赋值给 `users` 数组,并在模板中通过 `v-for` 指令来渲染查询结果。
阅读全文