使用Layui的流加载来实现图片加载

记录一下第一次写博客2333

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

emmmmm，最近有做图片的前端展示，遇到的问题也蛮多的，包括浏览器不能直接加载磁盘里的图片文件（我一直以为可以。。。），图片怎样在界面上异步加载出来，但是如果图片较多一次性加载又比较费资源，正好用到了layui，里面有流加载，结合起来刚好解决了问题。本项目使用的是springboot，用的mybatis-plus。

最终界面展示

直接上代码

前端代码图片

后台代码图片

这是serviceImpl层的代码，controller就懒得贴了

定义的全局返回对象


单个图片获取的接口，filePath定义的一个默认图片路径，如果没有传参数的话。

前端代码

代码片段

/*layui图片流加载*/
layui.use('flow', function(){

   var flow = layui.flow;//流加载
   var $ = layui.jquery;//layui内置jquery

   flow.load({//流加载函数
      elem: '#LAY_demo1',//流加载容器
      scrollElem: '#LAY_demo1', //滚动条所在元素，一般不用填，此处只是演示需要。
      done: function(page, next) { //执行下一页的回调
         var lis = [];//用于存放标签内容
         //数据请求地址，page，第几页，默认page是从2开始返回
         // page和limit参数是根据接口来传递的，page是必须传的，因为流加载要调用接口，获取分页的数据，limit可以在接口中默认为10。
         $.post('<%=request.getContextPath()%>/h/station/list', {page: page,limit:10}, function (res) {//数据调用接口
            layui.each(res.data, function (index, item) {//layui遍历函数
               //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
               //流加载插入内容部分，根据自己需求更改，这里做的案例，所以就写的比较简单

               //打印内容
               console.log(item);
               //放入页面
               lis.push("<img src=\"/station/device/upload/showImg/"+item.descriptionInfo+"\" alt=\"抓拍图片\" class=\"img_div\">");
            });//layui遍历函数
            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(''), page < res.pages); //假设总页数为 10
         });//数据调用接口
      }//执行下一页的回调
   });//flow.load流加载函数
});/*layui图片流加载*/

后台代码

全局返回对象

import lombok.Data;

/**
 * @author Administrator
 * 表格数据返回数据处理类
 */
@Data
public class ResultMap<T> {
    /**
     * 返回信息说明
     */
    private String msg;
    /**
     * 返回数据
     */
    private T data;
    /**
     * 状态代码
     */
    private Integer code;

    /**
     * 数据总数
     */
    private Long count;

    /**
     * 空构造方法
     */
    public ResultMap() {

    }

    /**
     * 全参构造
     * @param msg
     * @param data
     * @param code
     * @param count
     */
    public ResultMap(String msg, T data, Integer code,Long count) {
        this.msg = msg;
        this.data = data;
        this.code = code;
        this.count = count;
    }

    public ResultMap(String msg, T data, Integer code) {
        this.msg = msg;
        this.data = data;
        this.code = code;
    }
}

分页数据获取

/**
     * 分页数据获取
     * @param page
     * @param limit
     * @return
     */
    @Override
    public ResultMap<List<HydropowerStationEntity>> getDataList(Integer page, Integer limit) {

        //构造page分页对象
        Page<HydropowerStationEntity> pageBean = new Page(page,limit);
        //条件构造器
        QueryWrapper<HydropowerStationEntity> queryWrapper = new QueryWrapper<>();
        //查询条件，没有被删除的
        queryWrapper.eq("visible",true);
        //获取到数据的分页对象
        Page<HydropowerStationEntity> hStationEntityPage = hydropowerStationMapper.selectPage(pageBean, queryWrapper);
        //获取到数据记录
        List<HydropowerStationEntity> records = hStationEntityPage.getRecords();
        //数据总记录数
        long total = hStationEntityPage.getTotal();
        //查询为空
        if (records == null){
            return new ResultMap<List<HydropowerStationEntity>>("查询失败", null,-1,total);
        }
        //成功
        return new ResultMap<List<HydropowerStationEntity>>("请求成功",records,0,total);
    }

根据图片名获取图片接口

 //从本地取出图片并返回给前端
    @RequestMapping("/showImg/{imgName}")
    public void showEInvoice(HttpServletRequest request, HttpServletResponse response,@PathVariable(value = "imgName",required = false) String imgName){

        String filepath = "D:\\work\\uploadFile\\timg.jpg";//默认图片路径
        //前端传来的图片名不为空
        if (StringUtil.isNotEmpty(imgName)){
            filepath = "D:\\work\\uploadFile\\"+imgName+".jpg";//根据图片名取出
        }

        FileInputStream fis = null;
        OutputStream os = null;
        File file = new File(filepath);
        if(file.exists()){
            try {
                fis = new FileInputStream(file);
                long size = file.length();
                byte[] temp = new byte[(int) size];
                fis.read(temp, 0, (int) size);
                fis.close();
                byte[] data = temp;
                response.setContentType("image/jpg");
                os = response.getOutputStream();
                os.write(data);
                os.flush();
                os.close();

            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }