@Controller
@CrossOrigin
@RequestMapping("/hotel")
public class HotelController {
@Autowired
private HotelService hotelService;
@Autowired
private ScenicService scenicService;
@Autowired
private RedisUtil redisUtil;
/**
* 查询全部数据
* @return
*/
@ResponseBody
@RequestMapping(method= RequestMethod.GET)
public Result findAll( @RequestParam(required=false,defaultValue="0") int page,
@RequestParam(required=false,defaultValue="10") int limit
){
System.out.println("page = " + page);
System.out.println("limit = " + limit);
List<Hotel> hotelList;
long hotels = redisUtil.lGetListSize("hotelLists");
System.out.println("hotels = " + hotels);
if (0 >= hotels) {
hotelList = hotelService.findAll();
System.out.println("qqqqqqqqqqq="+hotelList.size());
for (Hotel hotel : hotelList) {
redisUtil.lSet("hotelLists",hotel);
}
// redisUtil.lSet("hotelList",hotelList);
}
hotelList=(List<Hotel>)(List)redisUtil.lGet("hotelLists",page,page+limit);
System.out.println("lllllllllllll="+hotelList.size());
return new Result(true, StatusCode.OK,"查询成功",hotelList, (int) hotels);
}
}
主要要注意的是:
"code": res.code, //解析接口状态
“msg”: res.message, //解析提示文本
“count”: res.count, //解析数据长度
“data”: res.data //解析数据列表
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>酒店列表</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">酒店列表</div>
<div class="layui-card-body">
<table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
<script type="text/html" id="barlist">
<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>
</script>
</div>
</div>
</div>
</div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
layui.use("table", function(){
var table = layui.table;
//方法级渲染
table.render({
elem: '#test-table-reload'
,url: 'http://localhost:8083/hotel'
,limit: 10
,cols: [
[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:180, sort: true, align:'center'}
,{field:'name', title: '酒店名称', width:180, align:'center', edit: 'text'}
,{field:'price', title: '价格', width:100, align:'center',sort: true, edit: 'text'}
,{field:'bed', title: '床', width:100,sort: true, align:'center'}
,{field:'star', title: '评分', width:104,sort: true, align:'center'}
,{field:'addr', title: '地点', width:124,sort: true, align:'center'}
,{field:'day', title: '天数', width:124,sort: true, align:'center'}
,{field:'startdate', title: '入住时间', width:124,sort: true, align:'center'}
,{field:'comment', title: '酒店介绍', width:124,sort: true, align:'center'}
,{field:'miaoshu', title: '酒店概述',width:400, align:'center',event: 'setSign'}
,{width:136, title:'操作', align:'center', toolbar: '#barlist'}
]
]
,page: true
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
}
});
//监听工具条
table.on('tool(test-table-reload)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
$.ajax({
type: "DELETE",
url: "/hotel/"+ data.id ,
data: {"id": data.id},
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function(result) {
if(result.code == 0) {
layer.msg(result.message,{icon: 1});
} else {
layer.msg(result.message, {
icon: 5
});
}
}
});
});
} else if(obj.event === 'edit'){
layer.alert('编辑行:<br>'+ JSON.stringify(data))
}else if(obj.event === 'setSign'){
layer.prompt({
formType: 2
,title: '修改 ID 为 ['+ data.id +'] 的房间描述'
,value: data.sign
}, function(value, index){
layer.close(index);
//这里一般是发送修改的Ajax请求
//同步更新表格和缓存对应的值
obj.update({
sign: value
});
});
}
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#test-table-demoReload');
//执行重载
table.reload('test-table-reload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
key: {
id: demoReload.val()
}
}
});
}
};
$('.test-table-reload-btn .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
</body>
</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="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<blockquote class="layui-elem-quote layui-text">
尽管本示例中的原始数据:<a href="/test/table/demo3.json" target="_blank">/test/table/demo3.json</a>,并不符合 table 组件默认规定的数据格式,但从 layui 2.4.0 开始,新增的 parseData 回调可以将原始的任意格式的数据重新解析成 table 组件规定的数据格式。具体可以点击上方查看代码。
</blockquote>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/test/table/demo3.json'
,toolbar: true
,title: '用户数据表'
,totalRow: true
,cols: [[
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱', width:150, edit: 'text'}
,{field:'experience', title:'积分', width:100, sort: true, totalRow: true}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'sign', title:'签名'}
,{field:'city', title:'城市', width:100}
,{field:'ip', title:'IP', width:120}
,{field:'joinTime', title:'加入时间', width:120}
]]
,page: true
,response: {
statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0
}
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows.item //解析数据列表
};
}
});
});
</script>
</body>
</html>