我要评论采用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前后台交互的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论