前后端配合实现简单的分页功能

简介: 前后端配合实现简单的分页功能

前言


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


环境准备


项目结构


网络异常,图片无法展示
|


后端


后端我们采用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条数据。


网络异常,图片无法展示
|


代码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


网络异常,图片无法展示
|


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


前端


前端我们依然采用对后端友好的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'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            ,cols: [[
              {field:'id', title: 'ID', sort: true}
              ,{field:'name', title: '姓名'}
              ,{field:'birth', title: '生日'}
              ,{field:'status', title: '状态', sort: true}
            ]]
            ,page: true
            ,done: function(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


网络异常,图片无法展示
|


查看效果-2


网络异常,图片无法展示
|


最后


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

相关文章
|
前端开发
react跳转锚点
react跳转锚点
200 1
|
7月前
|
自然语言处理 关系型数据库 MySQL
MySQL索引有哪些类型?
● 普通索引:最基本的索引,没有任何限制。 ● 唯一索引:索引列的值必须唯一,但可以有空值。可以创建组合索引,则列值的组合必须唯一。 ● 主键索引:是特殊的唯一索引,不可以有空值,且表中只存在一个该值。 ● 组合索引:多列值组成一个索引,用于组合搜索,效率高于索引合并。 ● 全文索引:对文本的内容进行分词,进行搜索。
|
机器学习/深度学习 人工智能 TensorFlow
利用AI技术实现智能垃圾分类
【8月更文挑战第67天】随着人工智能技术的不断发展,越来越多的应用场景开始涌现。本文将介绍如何利用AI技术实现智能垃圾分类,通过代码示例和实际应用案例,帮助读者了解AI技术在垃圾分类领域的应用价值和潜力。
797 19
|
安全 网络安全 数据安全/隐私保护
|
JSON 数据格式
jackson使用@JsonSerialize格式化BigDecimal解决.00不显示问题
jackson使用@JsonSerialize格式化BigDecimal解决.00不显示问题
1075 0
|
安全 关系型数据库 MySQL
MySQL权限管理大揭秘:用户、组、权限解析
MySQL权限管理大揭秘:用户、组、权限解析
1112 0
|
前端开发 API 开发者
前端 CSS 经典:边框转圈动画效果
前端 CSS 经典:边框转圈动画效果
417 0
|
开发框架 安全 搜索推荐
如何使用vscode启动Flask并实现无公网IP远程访问内网服务
如何使用vscode启动Flask并实现无公网IP远程访问内网服务
441 0
|
存储 前端开发 Java
①实现基于session的登录流程:发送验证码、登录注册、校验登陆状态
①实现基于session的登录流程:发送验证码、登录注册、校验登陆状态
455 0
|
JavaScript
layui框架实战案例(7):时间范围选择及时间处理的解决方案
layui框架实战案例(7):时间范围选择及时间处理的解决方案
681 0