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 10 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue自动化表单实例分析
May 06 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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基础教程 php内置函数实例教程
2012/08/21 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php读取3389的脚本
2014/05/06 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
js倒计时显示实例
2016/12/11 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python实现词法分析器
2019/01/31 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
Java如何格式化日期
2012/08/07 面试题
企业年会主持词
2014/03/27 职场文书
培训协议书范本
2014/04/22 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis