django框架 中 layUI的流加载运用

django框架对于layui流加载运用，是比较简单的，需要解决的问题如下

1. layui的引用
2. 后端的处理
3. 前端请求与返回数据的接收

让我们逐步分析和解决以上三个问题吧！

layui的引用

layui的引入是比较简单的

我们可以在官网查看引入方法，官网链接如下

开始使用 - Layui 文档

因为我是解决将layui的包直接下载下来的，所以我是这样引入的：

后端的处理

在后端处理前，我们需要了解到，流加载本质上就是 一个分页操作 ，接下来看看如何编写吧

前端是使用ajax进行请求的 (这里我省略路由配置)

我们这边需要收到 前端转递的参数 我这使用的是GET方法

# 文章内容ajax处理
@require_http_methods(['GET', 'POST'])
def essayajax(request):
    #抽出全部数据
    essaydb = essay.objects.filter(status=1).order_by('-created')
    # 获取前端传递的页数，如果没有的话，就赋值为1，就初始为第一页
    page = request.GET.get('page', 1)  
    # 设置获取的页数与数量   我这边设置为 每一页为6条 具体更具你的业务需要去处理
    paginator_data = Paginator(essaydb, 6).get_page(page) 
    #  获取总页  这个传递的layUi的关键参数
    total_pages = Paginator(essaydb, 6).num_pages  
    # 以下就是 将数据转化为json格式
    essaydata = []
    for item in paginator_data:
        date = getdate(item.created)
        content = remove_html_tags(item.content)
        essaydata.append({
            'createtime': date,
            'title': item.title,
            'essayid': item.essayid,
            'typedata': item.typedata.type,
            'content': content
        })
        #result方法是封装的一个返回前端处理格式的方法，
        #result(message, code, count, data)
        #message是信息  code状态码 count 这是总页数  data  显示的数据
    context = result=(1, 200, total_pages, essaydata)
    return JsonResponse(context, safe=False)

这样我们就完成后端的处理了

前端请求与返回数据的接收

先在html中容器

<div class="flow-demo" id="ID-flow-demo" >

编写js代码

layui.use(['layer', 'jquery'], function () {
  layui.use(function () {
    var $ = layui.jquery
    var flow = layui.flow;
    // 流加载实例
    flow.load({
      elem: '#ID-flow-demo', // 流加载容器
      md: 10, //与底部的临界距离，默认50。即当滚动条与底部产生该距离时，触发加载
      done: function (page, next) { // 执行下一页的回调
        var lis = [];
        // 模拟数据插入
        $.ajax({
          type: "GET",
          dataType: 'json', 
          //请求的后端接口  需要带的参数为 page 
          //因为我们的后端做了处理，所以初始化时 前端请求是带参数的 后端使用默认值即 第一页
          url: "{% url 'essay:essayajax' %}?page=" + page + "",
    
          success: function (res) {
            //res.data  这是后端返回的业务数据  
            //res.count	这是总页数
            layui.each(res.data, function (index, item) {
              //这里的部分就是获取到业务数据做渲染 
              //根据自己的业务进行操作
            });
            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
            //page为当前页   res.count为总页数    
             // 下一页的触发条件：只有当前页小于 总页数时才执行
            next(lis.join(''), page < res.count);
          }
        });
      }
    });
  });
});

到这里你就可以愉快的进行流加载了

式样图：