Flask连接数据库实现分页效果_flask访问sqlite分页-CSDN博客

本文链接：https://blog.csdn.net/qq_64446707/article/details/130783406

效果图展示

实现步骤

1.在新建好的项目中，新建一个page.html文件，该文件是分页下面的页码。

该page.html文件代码如下,



<!--这个是分页展示下面的页码-->

{%macro my_paginate(pagination,url)%}

<nav>
    <ul class="pagination">

        {%if pagination.has_prev%}
        <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page-1)}}">上一页</a></li>
        {%else%}
        <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
        {%endif%}

            {%for page in pagination.iter_pages()%}
                {%if page%}
                    <li class="page-item {%if page==pagination.page%}active{%endif%}"><a class="page-link" href="{{url_for(url,page=page)}}">{{page}}</a></li>
                {%else%}
                    <li class="page-item disabled"><a class="page-link" href="#">&hellip;</a></li>
                {%endif%}

            {%endfor%}

        {%if pagination.has_next%}
        <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page+1)}}">下一页</a></li>
        {%else%}
        <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
        {%endif%}

    </ul>
</nav>
{%endmacro%}

2.新建一个student.html文件，该文件是用来展示学生的信息文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生</title>
    <style>
        ul {
            margin: auto;
            width: 241px;
        }
        ul li {
            float: left;
            margin-right: 16px;
            list-style: none;
        }
        ul li a {
            text-decoration: none;

        }
        ul li a:hover {
            color: orange;
        }
        .active a{
            color: red ;
        }
        .disabled a {
            color: gray ;
        }
    </style>
</head>
<body>
     <div align="center">
        <h2>用户信息</h2>
        <br><br>
        {% for stu in studentList %}
            编号：{{ stu['id'] }}，姓名：{{ stu['name'] }}，成绩：{{ stu['score'] }}    <br><br>
        {% endfor %}

    </div>

<!--     导入下面的页码-->
    {%import 'page.html' as pg%}
    {{pg.my_paginate(pagination,'query_stu')}}
<!--query_stu是对应的方法名称是什么，然后在点击页码时可以找到该方法，从而展示数据-->

</body>
</html>

3.app.py文件的代码


from flask import Flask,render_template
from flask import redirect
from flask import url_for
from flask_migrate import Migrate

app = Flask(__name__)


# 绑定配置文件
HOSTNAME = '127.0.0.1'
PORT = 3306
# 接口
DATABASE = 's'
# 数据库名称

USERNAME = 'root'
PASSWORD = '****'
app.config['SQLALCHEMY_DATABASE_URI'] = f"mysql+pymysql://{USERNAME}:{PASSWORD}@{HOSTNAME}:{PORT}/{DATABASE}?charset=utf8mb4"

db = SQLAlchemy(app)

migrate = Migrate(app,db)


# todo:orm应用
# 创建数据表
class StudentMore(db.Model):
    __tablename__ = 'StudentMore'
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(108), nullable=False)
    score = db.Column(db.Integer, nullable=False)


# # 数据表提交到数据库中，这个提交一次就行，后续有改动再提交
# with app.app_context():
#     db.create_all()

@app.route('/stu/query/<int:page>', methods=['GET'])
def query_stu(page=None):
    if not page:
        page = 1
    students = StudentMore.query.paginate(page=page,per_page=5)
    # page是第几页，per_page是将每5个一页

    db.session.commit()

    # students.items是分页展示的数据
    return render_template("student.html", studentList=students.items,  pagination=students)


@app.route('/')
def index():
    return redirect(url_for("query_stu",page=1))


if __name__=="__main__":
    app.run()

Flask连接数据库实现分页效果

效果图展示

实现步骤

1.在新建好的项目中，新建一个page.html文件，该文件是分页下面的页码。

该page.html文件代码如下,

2.新建一个student.html文件，该文件是用来展示学生的信息文件

3.app.py文件的代码

4.运行项目，打开浏览器输入：http://127.0.0.1:5000/或 http://127.0.0.1:5000/stu/query/1 都可以查看到该页面结果