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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 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中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
RequireJs的使用详解
2017/02/19 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python中int与str互转方法
2018/07/02 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
巴西网上药房:onofre
2016/11/21 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
创业计划书撰写原则
2014/01/25 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
村干部培训班主持词
2014/03/28 职场文书
建筑工地标语
2014/06/18 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
保送生自荐信
2015/03/06 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB