采用layui前台框架实现前后台交互，数据分页显示以及删除操作，具体方式如下：
一、数据分页显示
1.前端
（1）html页面
<!--轮播数据分页显示--> <table class=\"layui-hide\" id=\"content_lbt\" lay-filter=\"content_lbt_filter\"></table>
（2）请求渲染数据
$(function() {
/*轮播数据分页显示*/
layui.use([\'table\', \'update\'], function() {
var table = layui.table,
upload = layui.upload;
table.render({
elem: \'#content_lbt\',
height: 500
//,url: \'data/content_lbt.json\' //数据接口
,
url: \'http://localhost:9911/cms/queryCarouselList\' //数据接口
,
page: true //开启分页
,
loading: true,//分页查询是否显示等待图标
text: {//若查询记录为空，执行此操作
none: \'暂无相关数据\'
} //默认：无数据。注：该属性为 layui 2.2.5 开始新增
,
cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,
cols: [
[{
field: \'id\',
width: \'10%\',
title: \'ID\',
sort: true
}, {
field: \'posterId\',
width: \'10%\',
title: \'上传者ID\',
sort: true
}, {
field: \'posterName\',
width: \'15%\',
title: \'上传者姓名\'
}, {
field: \'description\',
width: \'28%\',
title: \'描述\',
minWidth: 200
}, {
field: \'photoPath\',
width: \'10%\',
title: \'图片\',
minWidth: 100
}, {
field: \'createTime\',
width: \'10%\',
title: \'上传时间\',
minWidth: 100
}]
],
request: {
pageName: \'page\',
limitName: \'size\'
},
limit: 10,
limits: [10, 20, 30, 40, 50]
});
});
2.后端
后端采用SpringBoot，利用SSM框架
（1）mapper：（注意@Mapper注解）
/** * 查询所有轮播图信息 * * @return */ List<Carousel> queryCarousel(@Param(\"start\") Integer start, @Param(\"size\") Integer size); /** * 查询轮播记录条数 * * @return */ Integer countCarousel();
注意po类采用驼峰式写法
<select id=\"queryCarousel\" resultType=\"com.jingling.basic.po.Carousel\">
SELECT id, poster_id AS posterId, poster_name AS posterName, description AS description , photo_path AS photoPath, create_time AS createTime
FROM carousel
LIMIT #{start}, #{size}
</select>
<select id=\"countCarousel\" resultType=\"int\">
SELECT COUNT(*) FROM carousel
</select>
（2）service
/** * 查询全部轮播信息 * * @return */ List<Carousel> queryCarousel(Integer page,Integer size); /** * 查询轮播记录条数 * * @return */ Integer countCarousel();
（3）serviceImpl（注意要有@Service注解）
@Autowired
private CarouselMapper carouselMapper;
@Override
public List<Carousel> queryCarousel(Integer page,Integer size) {
if(page == null || page <= 0){
page = 1;
}
if (size == null || size <= 0){
size = 10;
}
Integer start = (page - 1) * size;
return carouselMapper.queryCarousel(start,size);
}
@Override
public Integer countCarousel() {
return carouselMapper.countCarousel();
}
（4）Controller（注意要有@RequestController注解）
@RestController
@RequestMapping(\"/cms\")
@Autowired
public CmsService cmsService;
/**
* 查询轮播图信息
*
* @return
*/
@GetMapping(\"/queryCarouselList\")
public Object queryCarouselList(HttpServletResponse response, @RequestParam(\"page\") Integer page, @RequestParam(\"size\") Integer size){
response.setHeader(\"Access-Control-Allow-Origin\", \"*\");//解决跨域的问题
List<Carousel> carouselList = cmsService.queryCarousel(page,size);
if (carouselList == null){
return RecycleResult.build(500,\"轮播图为空\");
}
//return RecycleResult.ok(carouselList);
//return carouselList;
Integer count = cmsService.countCarousel();
return new LayuiReplay<Carousel>(0, \"OK\", count, carouselList);
}
二、删除操作
1.前端
<script type=\"text/html\" id=\"barDemo\">
<a class=\"layui-btn layui-btn-xs\" lay-event=\"detail\">查看</a>
<!--<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>
{
fixed: \'right\',
width: \'15%\',
align: \'center\',
title: \'操作\',
toolbar: \'#barDemo\'
}
fixed: \'right\',
width: \'15%\',
align: \'center\',
title: \'操作\',
toolbar: \'#barDemo\'
}
//监听工具条
table.on(\'tool(content_lbt_filter)\', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter=\"对应的值\"
var data = obj.data //获得当前行数据
,
layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === \'detail\') {
layer.msg(\'查看操作\');
} else if(layEvent === \'del\') {
layer.confirm(\'真的删除行么\', function(index) {
//obj.del(); //删除对应行（tr）的DOM结构
delCarouselById(data.id);
layer.close(index);
//向服务端发送删除指令
});
}
/*else if(layEvent === \'edit\'){
layer.msg(\'编辑操作\');
}*/
});
//删除记录
function delCarouselById(id) {
$.get(\"http://localhost:9911/cms/delCarouselById?id=\" + id,
function(data, status) {
layer.msg(\'删除成功\');
});
}
2.后端（此处仅显示controller层和mapper）
@GetMapping(\"/delCarouselById\")
public RecycleResult delCarouselById(HttpServletResponse response,@RequestParam(\"id\") Integer id){
response.setHeader(\"Access-Control-Allow-Origin\", \"*\");
cmsService.delCarouselById(id);
return RecycleResult.ok();
}
<delete id=\"delCarouselById\">
DELETE FROM carousel
WHERE id = #{id}
</delete>
补充LayuiReplay类（其中get、set方法省略）
public class LayuiReplay <T> {
private int code;
private String msg;
private int count;
private List<T> data;
public LayuiReplay(int code, String msg, int count, List<T> data) {
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public String toJson() {
Gson gson = new Gson();
String json = gson.toJson(this);
return json;
}
public static <T> String toJson(int count, List<T> data) {
LayuiReplay<T> replay = new LayuiReplay<>(ReplyCode.OK.getCode(), ReplyCode.OK.getMessage(), count, data);
return replay.toJson();
}
}
补充ReplyCode.java枚举类
public enum ReplyCode {
NOT_LOGIN(-1,\"您尚未登录或登录时间过长,请重新登录或刷新页面!\"),
OK(0, \"OK\"),
WRONG_URL(400,\"请求路径错误\"),
WRONG_ROLE(401, \"身份错误\"),
REQUEST_FAILED(500, \"请求失败，请重试\"),
NULL_ATTR(30,\"属性不能为空\"),
ATTR_WRONG(31, \"属性填写错误\"),
WRONG_LENGTH(32, \"数据长度不符合要求\"),
WRONG_PATTERN(33, \"数据格式错误\"),
VAILD_WRONG(100,\"验证码错误\"),
CUSTOM(999, \"\")
;
ReplyCode(int code, String message) {
this.code = code;
this.message = message;
}
private int code;
private String message;
public int getCode() {
return code;
}
public ReplyCode setCode(int code) {
this.code = code;
return this;
}
public String getMessage() {
return message;
}
public ReplyCode setMessage(String message) {
this.message = message;
return this;
}
}
以上这篇layui框架与SSM前后台交互的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容