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


Posted in Javascript onSeptember 12, 2019

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

Javascript 相关文章推荐
JavaScript经典效果集锦
Jul 06 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
js正则表达式的使用详解
Jul 09 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
C++中的string类的用法小结
Aug 07 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 #Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 #Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 #Javascript
JS计算斐波拉切代码实例
Sep 12 #Javascript
VUE项目初建和常见问题总结
Sep 12 #Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 #Javascript
深入浅析vue中cross-env的使用
Sep 12 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
详解小白之KMP算法及python实现
2019/04/04 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
python numpy中cumsum的用法详解
2019/10/17 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
学习党章思想汇报
2014/01/07 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
银行进社区活动总结
2014/07/07 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
污染环境建议书
2015/09/14 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python