本文主要是在基于ThinkPHP5和前端框架layui开发的内容管理系统中,利用thinkPHP5的api特性和layui的信息流加载实现文章的自动加载,即列表不分页,自动加载下一页信息。关于thinkPHP5和layui的更多内容,请移步阅读官方文档,也可在本站搜索一下,应该还要一些相关内容,更多内容正在补充中。
本例中场景为:网站首页默认加载10篇文章,往下拖动滚动条,自动再加载10篇文章,直至展示完所有文章为止。
首先,实现首页控制器IndexController,读取10篇文章,并展示出来,控制器关键代码如下:
上述代码中使用到了数据库的查询缓存操作cache,cache可以用于select、find、value和column等方法,以及其衍生方法,使用cache方法后,在缓存有效期之内访问页面将不会进行数据库查询操作,而是直接获取缓存中的数据,关于thinkPHP5缓存问题的更多内容请查看thinkPHP5文档。
然后,将默认查出的数据在页面中进行展示,相关的关键代码如下:
thinkPHP5的内置标签:foreach循环标签foreach是thinkPHP5模板的内置标签,用法和PHP语法非常接近,用于循环输出数组或者对象的属性,不多介绍,用过ThinkPHP3的朋友们也应该知道,是一样的。
第三,在首页的HTML模板中,使用layui的流加载模块对上述代码中articles容器进行渲染,关键代码如下:
layui的流加载模块对容器渲染的js代码layui的流加载模块包含了信息流加载、图片懒加载两大核心,对服务端和前端体验,都有比较不错的提升,关于layui流加载的更多内容请查看layui官方文档,也给贤心大神送些流量吧。
第四,实现信息流加载的ajax请求,从服务器获取下一页数据,我在index控制器中通过get_article_flow()方法实现,关键代码如下:
简单明了,直接return查到的数据。好了,看下一最终效果:
layui信息流加载结束的效果