Layui与java后台交互
Layui与java后台交互
⽬录
layui是现在⽐较⽕的⼀个前端设计框架，下⾯介绍⼀下它的数据分页及其与java后台的交互。
⼀、返回的Json格式
按照layui官⽹给的⽰例，⾃⼰封装了⼯具类，解析json数据格式，前端页⾯请求Controller获取json数据的格式，然后利⽤⼯具类将json 解析，把数据显⽰在前端页⾯。
@Data
public class ResponseResult<T> {
private int code;
private String msg;
private T data;
public static<T> ResponseResult renderSuccess(T data){
ResponseResult<T> objectResponseResult = new ResponseResult<>();
objectResponseResult.setCode(0);
objectResponseResult.setData(data);
objectResponseResult.setMsg("操作成功");
return objectResponseResult ;
}
}
上述⽅法使⽤了lombok插件，使⽤的时候更加⽅便。
⼆、前台代码
静态⽂件直接引⼊Layui与java后台交互
layui是现在⽐较⽕的⼀个前端设计框架，下⾯介绍⼀下它的数据分页及其与java后台的交互。
⼀、返回的Json格式
按照layui官⽹给的⽰例，⾃⼰封装了⼯具类，解析json数据格式，前端页⾯请求Controller获取json数据的格式，然后利⽤⼯具类将json 解析，把数据显⽰在前端页⾯。
@Data
public class ResponseResult<T> {
private int code;
private String msg;
private T data;
public static<T> ResponseResult renderSuccess(T data){
ResponseResult<T> objectResponseResult = new ResponseResult<>();
objectResponseResult.setCode(0);
objectResponseResult.setData(data);
objectResponseResult.setMsg("操作成功");
return objectResponseResult ;
}
}
上述⽅法使⽤了lombok插件，使⽤的时候更加⽅便。
⼆、前台代码
静态⽂件直接引⼊ 官⽹的数据，直接下载。
直接上前端代码：
代码中整合了thymeleaf模板，嵌套了语法，和后端进⾏交互。
<!DOCTYPE html>
<html xmlns:th="">
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button> </div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
</div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
elem: '#currentTableId',
url: '/findall',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提⽰',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
[
{type: "checkbox", width: 50},
{field: 'name', width: 80, title: '⽤户名'},
{field: 'age', width: 80, title: '年龄', sort: true},
{field: 'email', width: 80, title: '邮箱'},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 20,
page: true,
skin: 'line'
layui下载});
// 监听搜索操作
<('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
layer.alert(result, {
title: '最终的搜索信息'
});
//执⾏搜索重载
page: {
curr: 1
}
, where: {
, where: {
searchParams: result
}
}, 'data');
return false;
});
/
**
* toolbar监听事件
*/
<('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var index = layer.open({
title: '添加⽤户',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['100%', '100%'],
content: '/add.html',
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
var checkStatus = table.checkStatus('currentTableId') , data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
});
/
/监听表格复选框选择
<('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
<('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
var index = layer.open({
title: '编辑⽤户',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['100%', '100%'],
content: '../page/table/edit.html',
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
obj.del();
layer.close(index);
});
}
});
});
</script>
</body>
</body>
</html>
add.html 响应添加按钮事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<form class="layui-form" action="/insert">
<div class="layui-form-item">
<label class="layui-form-label">⽤户名</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输⼊⽤户名" autocomplete="off" class="layui-input"> </div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="age" required lay-verify="required" placeholder="请输⼊年龄" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" required lay-verify="required" placeholder="请输⼊邮箱" autocomplete="off" class="layui-input"> </div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">⽴即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form;
//监听提交
<('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
三、pojo类
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论