layui框架与SSM前后台交互的方法
采用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; privateList data; publicLayuiReplay(intcode,Stringmsg,intcount,List data){ this.code=code; this.msg=msg; this.count=count; this.data=data; } publicStringtoJson(){ Gsongson=newGson(); Stringjson=gson.toJson(this); returnjson; } publicstatic StringtoJson(intcount,List data){ LayuiReplay replay=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前后台交互的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。