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

神嘚孤獨誰懂？

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

1. <!--轮播数据分页显示--><table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table>

复制代码

（2）请求渲染数据

1. $(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注解）

1. /**   * 查询所有轮播图信息   *   * @return   */  List<Carousel> queryCarousel(@Param("start") Integer start, @Param("size") Integer size);   /**   * 查询轮播记录条数   *   * @return   */  Integer countCarousel();

复制代码

注意po类采用驼峰式写法

1. <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

1. /**   * 查询全部轮播信息   *   * @return   */  List<Carousel> queryCarousel(Integer page,Integer size);   /**   * 查询轮播记录条数   *   * @return   */  Integer countCarousel();

复制代码

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

1. @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注解）

1. @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.前端

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&#63;id=" + id,  function(data, status) {   layer.msg('删除成功');  }); }

复制代码

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

1. @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方法省略）

1. 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枚举类

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

来源：http://www.jb51.net/article/169879.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！