很多小伙伴不会对vue框架不熟悉，不会用，这里我用layui框架也实现这些功能，以后需要用的话直接可以当一个工具来实现这些功能，如果需要vue+springboot的例子，前面的一个文章也有这些功能的例子。
增删改查这些基本的功能就不需要实现了。
1.导入相关依赖
这里要注意的是pom.xml文件中要导入resources文件，不然到时候layui组件小图标显示不出来
<resources>
<resource>
<directory>src/main/java</directory>
<filtering>false</filtering>
<includes>
<include>**/*.xml</include>
</includes>
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
<excludes>
<exclude>static/layui/font/*</exclude>
<exclude>static/layui/css/**</exclude>
<exclude>static/**</exclude>
</excludes>
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>false</filtering>
<includes>
<include>static/layui/font/*</include>
<include>static/layui/css/**</include>
<include>static/**</include>
</includes>
</resource>
</resources>
2.条件查询前端页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
<form class="layui-form layui-form-pane" action="">
<div class="layui-row">
<div class="layui-col-md3">
起始日期
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test6" name="Begintime" >
</div>
</div>
<div class="layui-col-md3">
终止日期
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test7" name="Updatetime" >
</div>
</div>
<div class="layui-col-md3">
标题
<div class="layui-input-inline">
<input type="text" class="layui-input" id="title" name="title">
</div>
</div>
<div class="layui-col-md3">
<button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn">
<i class="layui-icon"></i> 搜索
</button>
</div>
</div>
</form>
</div>
<table id="demo" lay-filter="test"></table>
<div class="layui-btn-container" id="toolbarDemo" style="display: none">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
<div id="barDemo" style="display: none">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
</body>
</html>
<script type="text/javascript">
layui.use(['table','laydate','form'], function(){
var table = layui.table;
var laydate = layui.laydate;
var form =layui.form
laydate.render({
elem: '#test6'
})
laydate.render({
elem: '#test7'
})
//第一个实例
table.render({
elem: '#demo'
,height: 400
,url: 'findAll' //数据接口
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
}
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,page:true
,cols: [ [//注意这里【【之前要有一个空格
{type: 'checkbox', fixed: 'left'}
,{field: 'bid', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'title', title: '标题', width:80}
,{field: 'avatar', title: '头像', width:80, sort: true}
,{field: 'content', title: '内容', width:80}
,{field: 'begintime', title: '开始时间', width: 177}
,{field: 'updatetime', title: '截至时间', width: 177}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
] ]
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
//这里做条件查询
form.on('submit(data-search-btn)',function (data) {
var result = JSON.stringify(data.field);
table.reload('demo', {
page: {
curr: 1
}
, where: {
QueryBlog: result
}
}, 'data');
return false
})
});
</script>
3.条件查询后端代码
@Controller
public class MBlogController {
@Resource
private MBlogService blogService;
@GetMapping({"/","index"})
public String index(){
return "index";
}
@GetMapping("findAll")
@ResponseBody
public Message FindAll(@RequestParam("page")Integer currentPage, @RequestParam("limit")Integer limit, @RequestParam(name = "QueryBlog",required = false) String queryBlog){
QueryBlog query =JSON.parseObject(queryBlog,QueryBlog.class);
System.out.println(query);
Page<MBlog> page=new Page<>(currentPage,limit);
QueryWrapper<MBlog> queryWrapper =new QueryWrapper<>();
if(query!=null) {
if (StringUtils.isNotEmpty(query.getTitle())) {
queryWrapper.like("title", query.getTitle());
}
if (StringUtils.isNotEmpty(query.getBegintime())) {
queryWrapper.ge("begintime", query.getBegintime());
}
if (StringUtils.isNotEmpty(query.getUpdatetime())) {
queryWrapper.le("updatetime", query.getUpdatetime());
}
}
IPage<MBlog> pageInfo = blogService.page(page, queryWrapper);
Message<MBlog> message=new Message<MBlog>(0,"传递成功",pageInfo.getTotal(),pageInfo.getRecords());
return message;
}
}
因为这里直接引入的是其他数据库的文件，所有头像显示没有设计，自己可以试试
image.png
image.png
2.单图片上传和多图片上传
1.前端页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
</head>
<body>
<!--单张图片上传-->
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div>
<!--多张图片上传-->
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
<button type="button" class="layui-btn" id="btn">点击上传</button>
</div>
</body>
</html>
<script type="text/javascript">
layui.use('upload', function() {
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: 'getImage' //改成您自己的上传接口
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//多张图片上传
upload.render({
elem: '#test2'
,multiple: true
,auto:false
,choose: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
}
,done: function(res){
//上传完毕
},
});
$("#btn").click(function () {
var form = new FormData();
for (let i in files) {
form.append("files", files[i]);
}
$.ajax({
url: 'getImages',
type: "post",
dataType: "json",
async: false,
contentType: false,
processData: false,
data: form,
success: function (result) {
}
})
})
})
</script>
2.后端代码
@Controller
public class ImageController {
@GetMapping("image")
public String Image(){
return "imageSubmit";
}
//单张图片上传
@PostMapping("getImage")
@ResponseBody
public String getImage( MultipartFile file){
System.out.println(file.getOriginalFilename());
return null;
}
//多张图片上传
@PostMapping("getImages")
@ResponseBody
public String getImages( @RequestParam("files") MultipartFile[] files){
for (MultipartFile file:files) {
System.out.println(file.getOriginalFilename());
}
return null;
}
}
image.png
image.png
image.png
这里我没有设计图片的大小，所以图片的大小显示有些问题，不够我们只要能实现这个功能就好了，可以看到后台接受到这些文件的名称，后面如果要保存图片自己试试。
网友评论