layui框架与SSM前后台交互的方法

2023-08-14 20:50:04 71

采用layui前台框架实现前后台交互，数据分页显示以及删除操作，具体方式如下：

一、数据分页显示

1.前端

（1）html页面

（2）请求渲染数据

$(function(){
/*轮播数据分页显示*/
layui.use(['table','update'],function(){
vartable=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:'暂无相关数据'
}//默认：无数据。注：该属性为layui2.2.5开始新增
,
cellMinWidth:80//全局定义常规单元格的最小宽度，layui2.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
*/
ListqueryCarousel(@Param("start")Integerstart,@Param("size")Integersize);

/**
*查询轮播记录条数
*
*@return
*/
IntegercountCarousel();

注意po类采用驼峰式写法


SELECTid,poster_idASposterId,poster_nameASposterName,descriptionASdescription,photo_pathASphotoPath,create_timeAScreateTime
FROMcarousel
LIMIT#{start},#{size}



SELECTCOUNT(*)FROMcarousel

（2）service

/**
*查询全部轮播信息
*
*@return
*/
ListqueryCarousel(Integerpage,Integersize);

/**
*查询轮播记录条数
*
*@return
*/
IntegercountCarousel();

（3）serviceImpl（注意要有@Service注解）

@Autowired
privateCarouselMappercarouselMapper;

@Override
publicListqueryCarousel(Integerpage,Integersize){
if(page==null||page<=0){
page=1;
}
if(size==null||size<=0){
size=10;
}

Integerstart=(page-1)*size;
returncarouselMapper.queryCarousel(start,size);
}

@Override
publicIntegercountCarousel(){
returncarouselMapper.countCarousel();
}

（4）Controller（注意要有@RequestController注解）

@RestController
@RequestMapping("/cms")
@Autowired
publicCmsServicecmsService;

/**
*查询轮播图信息
*
*@return
*/
@GetMapping("/queryCarouselList")
publicObjectqueryCarouselList(HttpServletResponseresponse,@RequestParam("page")Integerpage,@RequestParam("size")Integersize){
response.setHeader("Access-Control-Allow-Origin","*");//解决跨域的问题
ListcarouselList=cmsService.queryCarousel(page,size);
if(carouselList==null){
returnRecycleResult.build(500,"轮播图为空");
}
//returnRecycleResult.ok(carouselList);
//returncarouselList;
Integercount=cmsService.countCarousel();
returnnewLayuiReplay(0,"OK",count,carouselList);
}

二、删除操作

1.前端


查看

删除

{
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="对应的值"
vardata=obj.data//获得当前行数据
,
layEvent=obj.event;//获得lay-event对应的值
if(layEvent==='detail'){
layer.msg('查看操作');
}elseif(layEvent==='del'){
layer.confirm('真的删除行么',function(index){
//obj.del();//删除对应行（tr）的DOM结构
delCarouselById(data.id);
layer.close(index);
//向服务端发送删除指令
});
}
/*elseif(layEvent==='edit'){
layer.msg('编辑操作');
}*/
});


//删除记录
functiondelCarouselById(id){
$.get("http://localhost:9911/cms/delCarouselById?id="+id,
function(data,status){
layer.msg('删除成功');
});
}

2.后端（此处仅显示controller层和mapper）

@GetMapping("/delCarouselById")
publicRecycleResultdelCarouselById(HttpServletResponseresponse,@RequestParam("id")Integerid){
response.setHeader("Access-Control-Allow-Origin","*");
cmsService.delCarouselById(id);
returnRecycleResult.ok();
}

DELETEFROMcarousel
WHEREid=#{id}

补充LayuiReplay类（其中get、set方法省略）

publicclassLayuiReplay{
privateintcode;
privateStringmsg;
privateintcount;
privateListdata;

publicLayuiReplay(intcode,Stringmsg,intcount,Listdata){
this.code=code;
this.msg=msg;
this.count=count;
this.data=data;
}

publicStringtoJson(){
Gsongson=newGson();
Stringjson=gson.toJson(this);
returnjson;
}

publicstaticStringtoJson(intcount,Listdata){
LayuiReplayreplay=newLayuiReplay<>(ReplyCode.OK.getCode(),ReplyCode.OK.getMessage(),count,data);
returnreplay.toJson();
}
}

补充ReplyCode.java枚举类

publicenumReplyCode{
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(intcode,Stringmessage){
this.code=code;
this.message=message;
}

privateintcode;
privateStringmessage;

publicintgetCode(){
returncode;
}

publicReplyCodesetCode(intcode){
this.code=code;
returnthis;
}

publicStringgetMessage(){
returnmessage;
}

publicReplyCodesetMessage(Stringmessage){
this.message=message;
returnthis;
}

}

以上这篇layui框架与SSM前后台交互的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

layui框架与SSM前后台交互的方法

热门推荐

随机推荐