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

本文展示了如何在Flask应用中实现分页功能,通过创建page.html来展示页码,student.html用于显示学生信息,app.py文件处理查询和分页逻辑,使用ORM方式操作数据库。页面样式通过CSS调整,提供上一页、下一页及页码链接,实现动态跳转。
摘要由CSDN通过智能技术生成

效果图展示

 实现步骤

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()

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

 

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个基于 Nodejs、Express 和 EJS 的分页查询实现示例: 首先,安装必要的依赖: ``` npm install express ejs mongoose express-flash express-session ``` 然后,创建一个名为 `app.js` 的文件,引入所需模块: ```javascript const express = require('express'); const mongoose = require('mongoose'); const session = require('express-session'); const flash = require('express-flash'); const bodyParser = require('body-parser'); const app = express(); const port = process.env.PORT || 3000; // 连接 MongoDB 数据库 mongoose.connect('mongodb://localhost:27017/test', {useNewUrlParser: true, useUnifiedTopology: true}); // 定义数据库模型 const Article = mongoose.model('Article', { title: String, content: String, created_at: Date }); // 设置模板引擎和静态文件目录 app.set('view engine', 'ejs'); app.use(express.static(__dirname + '/public')); // 设置 session 和 flash app.use(session({ secret: 'mysecretkey', resave: true, saveUninitialized: true })); app.use(flash()); // 设置 bodyParser app.use(bodyParser.urlencoded({ extended: true })); // 定义路由 app.get('/', async function(req, res) { const perPage = 5; const page = req.query.page || 1; const articles = await Article.find() .skip((perPage * page) - perPage) .limit(perPage); const count = await Article.countDocuments(); const totalPages = Math.ceil(count / perPage); res.render('index', { articles: articles, current: page, pages: totalPages }); }); app.listen(port, function() { console.log('Server listening on port ' + port); }); ``` 在 `views` 文件夹中创建一个名为 `index.ejs` 的文件,用于显示分页数据: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页查询</title> </head> <body> <h1>文章列表</h1> <% if (articles.length > 0) { %> <ul> <% articles.forEach(function(article) { %> <li><%= article.title %></li> <% }); %> </ul> <% } else { %> <p>没有文章。</p> <% } %> <% if (pages > 1) { %> <div class="pagination"> <ul> <% if (current == 1) { %> <li class="disabled"><span>«</span></li> <% } else { %> <li><a href="?page=<%= current - 1 %>">«</a></li> <% } %> <% for (var i = 1; i <= pages; i++) { %> <% if (i == current) { %> <li class="active"><span><%= i %></span></li> <% } else { %> <li><a href="?page=<%= i %>"><%= i %></a></li> <% } %> <% } %> <% if (current == pages) { %> <li class="disabled"><span>»</span></li> <% } else { %> <li><a href="?page=<%= current + 1 %>">»</a></li> <% } %> </ul> </div> <% } %> </body> </html> ``` 在上面的示例中,我们使用了 `mongoose` 连接 MongoDB 数据库,并定义了一个名为 `Article` 的数据库模型。在路由中,我们使用 `await` 关键字来等待查询结果,并通过 `skip()` 和 `limit()` 方法来实现分页查询。在视图中,我们使用 EJS 模板引擎来生成分页链接。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值