本文共 5586 字，大约阅读时间需要 18 分钟。
采用layui前台框架实现前后台交互，数据分页显示以及删除操作，具体方式如下：
一、数据分页显示
1.前端
(1)html页面1
2
(2)请求渲染数据1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62$(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' //数据接口
,
,
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注解)1
2
3
4
5
6
7
8
9
10
11
12
13/**
* 查询所有轮播图信息
*
* @return
*/
List queryCarousel(@Param("start") Integer start, @Param("size") Integer size);
/**
* 查询轮播记录条数
*
* @return
*/
Integer countCarousel();
注意po类采用驼峰式写法1
2
3
4
5
6
7
8
9
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 COUNT(*) FROM carousel
(2)service1
2
3
4
5
6
7
8
9
10
11
12
13/**
* 查询全部轮播信息
*
* @return
*/
List queryCarousel(Integer page,Integer size);
/**
* 查询轮播记录条数
*
* @return
*/
Integer countCarousel();
(3)serviceImpl(注意要有@Service注解)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20@Autowired
private CarouselMapper carouselMapper;
@Override
public List 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注解)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22@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 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(0, "OK", count, carouselList);
}
二、删除操作
1.前端1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
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) {
function(data, status) {
layer.msg('删除成功');
});
}
2.后端(此处仅显示controller层和mapper)1
2
3
4
5
6
7
8
9
10@GetMapping("/delCarouselById")
public RecycleResult delCarouselById(HttpServletResponse response,@RequestParam("id") Integer id){
response.setHeader("Access-Control-Allow-Origin", "*");
cmsService.delCarouselById(id);
return RecycleResult.ok();
}
DELETE FROM carousel
WHERE id = #{id}
补充LayuiReplay类(其中get、set方法省略)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24public class LayuiReplay {
private int code;
private String msg;
private int count;
private List data;
public LayuiReplay(int code, String msg, int count, List 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 String toJson(int count, List data) {
LayuiReplay replay = new LayuiReplay<>(ReplyCode.OK.getCode(), ReplyCode.OK.getMessage(), count, data);
return replay.toJson();
}
}
补充ReplyCode.java枚举类1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41public 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;
}
}
转载地址：http://vrnrp.baihongyu.com/