采用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, 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前后台交互的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年11月19日
2024年11月19日
- 黄乙玲1999-无字的情批[台湾首版][WAV+CUE]
- 何超仪.1996-何家淑女(EP)【华星】【WAV+CUE】
- 娃娃.1995-随风【滚石】【WAV+CUE】
- 林俊吉.2007-林俊吉【美华影音】【WAV+CUE】
- 梁静茹《勇气》滚石首版[WAV+CUE][1.1G]
- 刘若英《听说》[WAV+CUE][1.1G]
- 林忆莲《不如重新开始》 24K金 MQA 2022 再版[1.1G]
- 曾庆瑜1991-女人主意[派森][WAV+CUE]
- 江智民2024-《写给海洋HQ》头版限量编号[WAV+CUE]
- 谭咏麟2024《暴风女神Lorelei》头版限量编号MQA-UHQCD[WAV+CUE]
- 群星.2003-滚石黄金十年系列33CD【滚石】【WAV+CUE】
- 萧亚轩.2008-3面夏娃【维京】【WAV+CUE】
- 唐娜.1989-那年情人节好冷【喜玛拉雅】【WAV+CUE】
- 赵传《赵传奇》 滚石SACD系列 SACD限量版[ISO][1.1G]
- 黄龄《痒》天韵文化[WAV+CUE][1G]