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 相关文章推荐
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
JS实现简单tab选项卡切换
Oct 25 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
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
Python用模块pytz来转换时区
2016/08/19 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
EJB timer的种类
2014/10/28 面试题
小学教师师德感言
2014/02/10 职场文书
中文专业自荐书
2014/06/29 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python