vlambda博客
学习文章列表

Flask+peewee+LayUI实现分页功能

前言

最近在开发 QA 平台的时候,有这样一个需求,就是将后端的数据实现分页,同时前端使用分页参数实现分页数据的获取和渲染。

环境准备

项目结构

Flask+peewee+LayUI实现分页功能
项目结构

后端

后端我们采用 flask 实现,结合 peewee 实现 SQLite 的分页查询。使用 flask-cors 解决跨域问题。

# dev_env:python@3
# 安装flask和flask-cors
pip install flask
pip install flask-cors

代码 web/DbAction/User.py

from peewee import *
from datetime import date
from playhouse.migrate import *

# 如果db不存在,会自动创建
db = SqliteDatabase('datastore.db')

class people(Model):
    # 默认会有ID作为主键自增
    name = CharField()
    birth = DateField()
    people_status = BooleanField(default=True)
    class Meta:
        database = db
if __name__=='__main__':
    for i in range(1,32):
    pp = people.create(name=f'phyger{i}',birth=date(1991,1,int(f'{i}')))
    pp.save()

我们执行以上代码,向数据库中插入 31 条数据。

Flask+peewee+LayUI实现分页功能
预置数据

代码 web/app.py

# -*- coding: utf-8 -*-
from flask import Flask
from flask import render_template,request
from flask_cors import cross_origin,CORS

app = Flask(__name__)
# 打开跨域
CORS(app)

@app.route('/')
@app.route('/<name>')
def hello(name=None):
    return render_template('index.html', name=name)

@app.route('/js')
def js():
    return {'name':'phyger'}

#  后端分页的实现
from peewee import *
from DbAction.User import people
@app.route('/user')
def user():
    # 如果没有传参数,则提示
    if not request.args.get('page'or not request.args.get('limit'):
        return 'check params!'
    # 开启分页
    page = int(request.args.get('page'))
    size = int(request.args.get('limit'))

    print(f'page is {page} | page_size is {size}')
    # 使用这个列表存放数据
    tmp=[]
    # 循环遍历将数据添加到上面的列表中
    for pp in people.select().order_by(people.id).paginate(page,size):
        tmp_date = f'{pp.birth.year}-{pp.birth.month}-{pp.birth.day}'
        tmp.append({'id':pp.id,'name':pp.name,'birth':tmp_date,'status':pp.people_status})
    return {'code':0,'msg':'success!','data':tmp,'count':len(people.select())}

if __name__ == '__main__':
    app.run(host='0.0.0.0')

启动后端

python3 app.py

测试下,/user?page=1&limit=5

Flask+peewee+LayUI实现分页功能
后端分页效果

到此,后端服务准备就绪。

前端

前端我们依然采用对后端友好的 LayUI 框架,直接在 html 中引用 LayUI 的 CDN 加速。逻辑 JS 直接内嵌在 html 页面。

代码 layui/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui分页效果</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
</head>
<body>

    <table id="test"></table>

    <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script>
        layui.use(['table','layer'], function(){
          var table = layui.table;
          var layer = layui.layer;

          table.render({
            elem'#test'
            ,url'https://backend.io/user'
            ,cellMinWidth80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,cols: [[
              {field:'id'title'ID'sorttrue}
              ,{field:'name'title'姓名'}
              ,{field:'birth'title'生日'}
              ,{field:'status'title'状态'sorttrue}
            ]]
            ,pagetrue
            ,donefunction(res, curr, count){
                //如果是异步请求数据方式,res即为你接口返回的信息。
                //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log('当前的数据',res);

                //得到当前页码
                console.log('当前的页码',curr);

                //得到数据总量
                console.log('当前的总数',count);

                layer.msg("查询成功!");
                }
          });
        });
        
</script>
</body>
</html>

启动前端(nginx、python、caddy、httpd 都可)

python -m http.server 9999

查看效果-1

Flask+peewee+LayUI实现分页功能
前端分页效果

查看效果-2

翻页效果

最后

后端我们使用 ORM 框架可以实现很简单的实现分页效果,前端我们使用分页组件也可以快速实现分页效果。虽然各个框架各有特点,但是原理都是一致的。希望本文能够对你的工作学习带来帮助。


往期推荐