在Flask中对数据进行搜索并对搜索后的数据实现翻页

最新推荐文章于 2024-09-08 16:28:52 发布

m0_65142226

最新推荐文章于 2024-09-08 16:28:52 发布

阅读量766

点赞数 8

文章标签： flask android python

本文链接：https://blog.youkuaiyun.com/m0_65142226/article/details/135996811

版权

在做毕设的时候，我要将数据库中表的信息以表格的形式展示到网页上，若数据超过20条就要进行翻页，也可对数据进行搜索操作，但是我没有在网上找到这样的文章，查阅许多资料后，东拼西凑，最终实现了整个功能，网页效果如图：

实现的步骤如下：

1.在app.py文件中先写展示mysql数据的函数，获取数据库的数据，并将数据传给index.html

@app.route('/index/')
def main():
    page = int(request.args.get('page', 1))
    per_page = int(request.args.get('per_page', 25))
    paginate = Travel.query.paginate(page=page, per_page=per_page,error_out=False)
    pagedata = paginate.items
    titles = ['序号','景点名称','景点地址','景点开放时间','评分','城市','景点类型','详情页']
    return render_template('index.html',paginate=paginate, pagedata=pagedata,titles=titles)

index.html（将数据以表格的形式展示，在网页中写入了搜索框和翻页的页码）

<!DOCTYPE html>
{% extends 'base_main.html' %}
{% block content %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游推荐系统!</title>
    <style>
          ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-left:-5px;
            width: 70px;
            height: 50px;
            background-color: #deffff;
            color:white;
          }
          li::before {
            content: "";
            display: block;
            padding-top: 20%;
            background-color: #deffff;
          }
          body {
              background: url("https://img.zcool.cn/community/01d6d05c245575a8012029ac04c993.jpg@2o.jpg") rgba(255, 255, 255, 0.3);
              filter: brightness(100%);
              background-repeat: no-repeat;
              background-size: cover;
              opacity: 0.7;
              background-blend-mode: overlay;
            }
          a.reset-style {
              background-color: initial;
            }
          input {
              width: 150px;
              height: 25px;
           }
        </style>
</head>
<body >
    <div >
        <div style="text-align:center"><h2>e起去旅游——渝你一起</h2></div>
        <form method="get" action='/search/'>
            <div class="box" style="margin-bottom: 20px;text-align:center">
                <input type="text" class="input" name="name" placeholder="请输入景点名称">
                <input type="text" class="input" name="address" placeholder="请输入景点地址">
                <input type="text" class="input" name="score" placeholder="请输入景点评分(0,5)">
                <input type="text" class="input" name="label" placeholder="请输入景点类型">
                <input type="submit" value="搜索" class="button" style="width:60px;height:30px;font-size:16px">
            </div>
        </form>
        <table border="1" align="center" style="background-color: #ffffff;font-family:'楷体', sans-serif;text-align:center"  >
            <thead>
                <tr>
                    {% for i in titles %}
                        <td>{{ i }}</td>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for data in pagedata %}
                    <tr>
                        <td style="width:45px;">{{ loop.index0 }}</td>
                        <td style="width:150px;"><a href="/detail/?id={{ data.id }}" class="reset-style">{{ data.name }}</a></td>
                        <td style="width:280px;">{{ data.address }}</td>
                        <td style="width:120px;">{{ data.development_time }}</td>
                        <td style="width:70px;">{{ data.score }}</td>
                        <td style="width:80px;">{{ data.city }}</td>
                        <td style="width:90px;">{{ data.label }}</td>
                        <td style="width:70px;"><a href="/detail/?id={{ data.id }}" class="reset-style">详情</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div>
            <ul style="text-align: center;">
                {% if paginate.has_prev %}
                    <li style="display: inline-block;"><a href="/index/?page={{ paginate.prev_num }}">上一页</a></li>
                {% endif %}
                {% for i in paginate.iter_pages() %}
                    {% if i == None %}
                        <li style="display: inline-block;"><a >...</a></li>
                    {% else %}
                        <li style="display: inline-block;"><a href="/index/?page={{ i }}">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if paginate.has_next %}
                    <li style="display: inline-block;"><a href="/index/?page={{ paginate.next_num }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
        <div style="font-size: 12px; text-align: center; margin-top: 20px;margin-bottom: 10px;">
            当前页数：{{ paginate.page }}
            总页数：{{ paginate.pages }}
            一共有{{ paginate.total }}条数据
        </div>
    </div>
</body>
{% endblock %}
</html>

2.在app.py文件中写入处理搜索请求的函数

获取搜索框填入的值，使用filter对数据库的数据进行过滤，将筛选后的值传入html

# 处理搜索请求
@app.route('/search/')
def searching():
    name = request.args.get('name')
    address = request.args.get('address')
    score = request.args.get('score')
    label = request.args.get('label')
    s = [name,address,score,label]
    page = int(request.args.get('page', 1))
    per_page = int(request.args.get('per_page', 25))
    if score:
        paginate = Travel.query.filter(
            and_(Travel.name.like("%" + name + "%"), Travel.address.like("%" + address + "%"),
                 Travel.label.like("%" + label + "%"), Travel.score >= float(score))).paginate(page=page,
                                                                                                 per_page=per_page,
                                                                                                 error_out=False)
    else:
        paginate = Travel.query.filter(and_(Travel.name.like("%"+name+"%"),Travel.address.like("%"+address+"%"),Travel.label.like("%"+label+"%"))).paginate(page=page, per_page=per_page,error_out=False)
    pagedata = paginate.items
    titles = ['序号', '景点名称', '景点地址', '景点开放时间', '评分', '城市', '景点类型', '详情页']
    return render_template('search.html', paginate=paginate, pagedata=pagedata, titles=titles,s=s)

search.html（用表格的形势，展示后端传入的值）

<!DOCTYPE html>
{% extends 'base_main.html' %}
{% block content %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游推荐系统!</title>
    <style>
          ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          li {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-left:-5px;
            width: 70px;
            height: 50px;
            background-color: #deffff;
            color:white;
          }
          li::before {
            content: "";
            display: block;
            padding-top: 20%;
            background-color: #deffff;
          }
          body {
              background: url("https://img.zcool.cn/community/01d6d05c245575a8012029ac04c993.jpg@2o.jpg") rgba(255, 255, 255, 0.3);
              filter: brightness(100%);
              background-repeat: no-repeat;
              background-size: cover;
              opacity: 0.7;
              background-blend-mode: overlay;
            }
          img {
              mix-blend-mode: multiply;
            }
          a.reset-style {
              background-color: initial;

            }
          input {
              width: 150px;
              height: 25px;
           }
        </style>
</head>
<body >
    <div >
        <div style="text-align:center"><h2>e起去旅游——渝你一起</h2></div>
        <form method="get" action='/search/'>
            <div class="box" style="margin-bottom: 20px;text-align:center;height:25px">
                <input type="text" class="input" name="name" placeholder="请输入景点名称">
                <input type="text" class="input" name="address" placeholder="请输入景点地址">
                <input type="text" class="input" name="score" placeholder="请输入景点评分" >
                <input type="text" class="input" name="label" placeholder="请输入景点类型">
                 <input type="submit" value="搜索" class="button" style="width:60px;height:30px;font-size:16px">
            </div>
        </form>
        <table border="1" align="center" style="font-family:'楷体', sans-serif;text-align:center;background-color:#ffffff"  >
            <thead>
                <tr>
                    {% for i in titles %}
                        <td>{{ i }}</td>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for data in pagedata %}
                    <tr>
                        <td style="width:45px;">{{ loop.index0 }}</td>
                        <td style="width:150px;"><a href="/detail/?id={{ data.id }}" class="reset-style">{{ data.name }}</a></td>
                        <td style="width:280px;">{{ data.address }}</td>
                        <td style="width:120px;">{{ data.development_time }}</td>
                        <td style="width:70px;">{{ data.score }}</td>
                        <td style="width:80px;">{{ data.city }}</td>
                        <td style="width:90px;">{{ data.label }}</td>
                        <td style="width:70px;"><a href="/detail/?id={{ data.id }}" class="reset-style">详情</a></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div>
            <ul style="text-align: center;">
                {% if paginate.has_prev %}
                    <li style="display: inline-block;"><a href="/search/?page={{ paginate.prev_num }}">上一页</a></li>
                {% endif %}
                {% for i in paginate.iter_pages() %}
                    {% if i == None %}
                        <li style="display: inline-block;"><a >...</a></li>
                    {% else %}
                        <li style="display: inline-block;"><a href="/search/?page={{ i }}&name={{s[0]}}&address={{s[1]}}&score={{s[2]}}&label={{s[3]}}">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if paginate.has_next %}
                    <li style="display: inline-block;"><a href="/search/?page={{ paginate.next_num }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
        <div style="font-size: 12px; text-align: center; margin-top: 20px;margin-bottom: 10px;  ">
            当前页数：{{ paginate.page }}
            总页数：{{ paginate.pages }}
            一共有{{ paginate.total }}条数据
        </div>
    </div>
</body>
{% endblock %}
</html>

两个html继承的base_main.html的代码如下

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
        a {
            padding: 10px;
            color:black;
            text-decoration: none;
            marge-left:15px
        }
        a:hover {
            background-color: #FFFFFF;
        }
        body, html {
              margin: 0;
              padding: 0;
              width: 100%;

            }
    </style>
</head>
<body>
  <nav style="background-color: #f1f1f1; padding: 10px;wigth:100%">
    <a href="/index/" style=" " >主页面</a>
    <a href="/recommend">智能推荐</a>
    <a href="/visualization">可视化</a>
    <a href="/" style="margin-left:910px">切换账号</a>
  </nav>
  {% block content %}{% endblock %}
</body>
</html>