记录一下第一次写博客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();
}
}
}