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

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

采用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前后台交互的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。