Flask+SQLite用户搜索功能故障排查与实现需求

问题概述 #

• 基于Python Flask + SQLite开发用户搜索功能，需求包括：
  • 支持单字符模糊搜索、用户名全称匹配、邮箱匹配查找用户
  • 搜索结果需支持修改用户角色、删除用户操作
• 当前问题：按教程实现后无法完成搜索，多方排查无果，附错误日志、截图及相关代码（response.html、admin.js、app.py）

排查步骤 #

1. 前端请求排查（admin.js） #

• 确认搜索请求的参数传递：检查是否正确携带search_query参数，请求方法（GET/POST）是否与后端一致
• 查看浏览器Network面板：
  • 验证请求URL是否指向正确的后端路由（如/admin/search）
  • 检查参数是否正确传递，名称是否与后端接收字段匹配
  • 查看响应状态码：4xx/5xx对应后端路由或逻辑错误；200但无数据则检查后端返回内容
• 检查触发逻辑：输入框回车或搜索按钮点击时，是否正确调用请求函数

2. 后端逻辑排查（app.py） #

• 确认路由定义：确保搜索路由的请求方法与前端匹配，例如@app.route('/admin/search', methods=['GET'])
• 检查SQL查询语句：
  • 模糊搜索必须使用LIKE关键字并搭配通配符%，示例：

    search_query = request.args.get('search_query', '').strip()
    users = User.query.filter(
        or_(
            User.username.like(f'%{search_query}%'),
            User.email.like(f'%{search_query}%')
        )
    ).all()
    

  • 避免SQL注入，建议使用参数化写法：

    users = User.query.filter(
        or_(
            User.username.like('%{}%'.format(search_query)),
            User.email.like('%{}%'.format(search_query))
        )
    ).all()
    

• 验证数据库模型：确认User模型的username、email字段定义正确，数据库中存在测试数据
• 添加调试日志：在路由中打印search_query和查询到的用户数量，确认参数接收与查询结果是否符合预期

3. 模板渲染排查（response.html） #

• 确认模板正确接收users变量，循环渲染前添加判断（如{% if users %}）
• 检查DOM结构：排查是否因CSS隐藏或渲染错误导致搜索结果不可见

常见问题修复示例 #

后端路由示例（app.py） #

from flask import Flask, request, render_template, redirect
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import or_

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    role = db.Column(db.String(20), default='user')

@app.route('/admin/search', methods=['GET'])
def admin_search():
    search_query = request.args.get('search_query', '').strip()
    if search_query:
        users = User.query.filter(
            or_(
                User.username.like(f'%{search_query}%'),
                User.email.like(f'%{search_query}%')
            )
        ).all()
    else:
        users = User.query.all()  # 无搜索词时返回全部用户
    return render_template('response.html', users=users)

@app.route('/admin/update_role/<int:user_id>', methods=['POST'])
def update_role(user_id):
    user = User.query.get_or_404(user_id)
    new_role = request.form.get('new_role')
    if new_role in ['user', 'admin', 'moderator']:
        user.role = new_role
        db.session.commit()
    return redirect(f'/admin/search?search_query={request.args.get("search_query", "")}')

@app.route('/admin/delete_user/<int:user_id>', methods=['POST'])
def delete_user(user_id):
    user = User.query.get_or_404(user_id)
    db.session.delete(user)
    db.session.commit()
    return redirect(f'/admin/search?search_query={request.args.get("search_query", "")}')

if __name__ == '__main__':
    app.run(debug=True)

前端JS示例（admin.js） #

// 搜索请求
document.getElementById('search-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const searchQuery = document.getElementById('search-input').value.trim();
    fetch(`/admin/search?search_query=${encodeURIComponent(searchQuery)}`)
        .then(res => res.text())
        .then(html => document.getElementById('search-results').innerHTML = html)
        .catch(err => console.error('搜索失败:', err));
});

// 修改角色
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('update-role-btn')) {
        const userId = e.target.dataset.userId;
        const newRole = prompt('输入新角色（user/admin/moderator）:');
        if (newRole) {
            const searchQuery = document.getElementById('search-input').value.trim();
            fetch(`/admin/update_role/${userId}`, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: `new_role=${encodeURIComponent(newRole)}&search_query=${encodeURIComponent(searchQuery)}`
            }).then(res => res.redirected && (window.location.href = res.url))
              .catch(err => console.error('修改角色失败:', err));
        }
    }
});

// 删除用户
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-user-btn')) {
        const userId = e.target.dataset.userId;
        if (confirm('确定删除该用户？')) {
            const searchQuery = document.getElementById('search-input').value.trim();
            fetch(`/admin/delete_user/${userId}`, {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                body: `search_query=${encodeURIComponent(searchQuery)}`
            }).then(res => res.redirected && (window.location.href = res.url))
              .catch(err => console.error('删除用户失败:', err));
        }
    }
});

模板示例（response.html） #

<div id="search-results">
    {% if users %}
        <table>
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.role }}</td>
                    <td>
                        <button class="update-role-btn" data-user-id="{{ user.id }}">修改角色</button>
                        <button class="delete-user-btn" data-user-id="{{ user.id }}">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>未找到匹配用户</p>
    {% endif %}
</div>

内容的提问来源于stack exchange，提问作者AstroideX Adam