说明

AdminLTE是网络上比较流行的一款Bootstrap模板，包含丰富的样式、组件和插件，非常适用于后端开发人员做后台管理系统。
因为最近又做了个后台管理系统，这次就选的是AdminLTE做主题模板发现效果不错，这里我把最核心的SpringBoot如何集成AdminLTE实现增删改查的源码提供出来，需要的朋友可以参考而少走弯路。

项目源码

需要源码的朋友给我来个一键三连，留个邮箱后发送！

实现效果

技术选型

前端：Thymeleaf+Bootstrap+AdminLTE+插件
后端：Spring Boot2.0 + Mybatis-Plus
数据库：MySQL5.7

核心代码

只讲重点，详细看源码。

页面

dataTables的实战用法如下：

myTable = $('#dataTable').DataTable({language: lang,  //提示信息"iDisplayLength": 10,//默认每页数量//"bPaginate": true, //翻页功能"bLengthChange": false, //改变每页显示数据数量"bFilter" : false, //过滤功能"ordering": false,"bSort": false, //排序功能//"bInfo" : true,//页脚信息//"bAutoWidth" : true,//自动宽度"stateSave": true,"retrieve": true,"processing": true,"serverSide": true,//"bPaginate" : true,"bProcessing": true,//服务器端进行分页处理的意思ajax: function (data, callback, settings) {//ajax配置为function,手动调用异步查询// 构造请求参数var param = {};param.draw = data.draw;param.pageSize = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候param.start = data.start;//开始的记录序号param.pageNo = (data.start / data.length) + 1;//当前页码//param.order = data.order[0];param.username = $("#s_username").val();$.ajax({type: "POST",url: ctx + "/user/list",cache: false, //禁用缓存data: param, //传入已封装的参数dataType: "json",success: function (res) {// console.log(res)//setTimeout仅为测试遮罩效果setTimeout(function () {//封装返回数据，这里仅演示了修改属性名var returnData = {};returnData.draw = res.data.draw;//这里直接自行返回了draw计数器,应该由后台返回returnData.recordsTotal = res.data.total;returnData.recordsFiltered = res.data.total;//后台不实现过滤功能，每次查询均视作全部结果returnData.data = res.data.records;//关闭遮罩//$wrapper.spinModal(false);//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕callback(returnData);},200);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert("查询失败");}});},"aoColumns": [{sTitle: '序号',data: null,className: 'text-center whiteSpace',render:function(data,type,row,meta) {return meta.row + 1 +meta.settings._iDisplayStart;}},{"data": "username"},{"data": "email"},{"data": "truename"},{"data": "createTime",render: function (data, type, row, meta) {if (data){   // data不为空进行转换return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss");} else {return data = ''; //data为空时不转换}}}],"columnDefs": [{// 定义操作列,######以下是重点########"targets": 5,//操作按钮目标列"data": null,"render": function (data, type, row) {var id = '"' + row.id+ '"';//<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>var html = "<button class='btn btn-sm btn-warning' οnclick='edit("+ id+ ")'><i class='icon-pencil'></i> 编辑</button>"html += "<button class='btn btn-sm btn-danger' οnclick='remove("+ id+ ")'><i class='icon-remove'></i> 删除</button>"return html;}}],"fnDrawCallback": function(){var api = this.api();//var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数api.column(0).nodes().each(function(cell, i) {//此处 startIndex + i + 1;会出现翻页序号不连续，主要是因为startIndex 的原因,去掉即可。//cell.innerHTML = startIndex + i + 1;cell.innerHTML =  i + 1;});}});

控制器

@RequestMapping("/user")
@Controller
public class UserController {@Autowiredprivate UserService userService;@RequestMappingpublic String user(){return "user";}@GetMapping("/{id}")@ResponseBodypublic Result<User> get(@PathVariable Integer id){User user =  userService.getById(id);return ResultUtil.ok(user);}/***  分页查询* @param username* @param pageNo* @param pageSize* @return*/@PostMapping("/list")@ResponseBodypublic Result<IPage<User>> list(@RequestParam(value = "username", required = false) String username,@RequestParam(defaultValue = "1") Integer pageNo,@RequestParam(defaultValue = "10") Integer pageSize){// 构造查询条件QueryWrapper<User> queryWrapper = new QueryWrapper<>();if(!StringUtils.isEmpty(username)){queryWrapper.like("username",username);queryWrapper.orderByDesc("create_time");}Page<User> page = new Page<>(pageNo,pageSize);IPage<User> result = userService.page(page, queryWrapper);// 设置总记录数result.setTotal(userService.count(queryWrapper));return ResultUtil.ok(result);}@PostMapping("/add")@ResponseBodypublic Result<String> add(@RequestBody User user){userService.save(user);return ResultUtil.ok("添加成功！");}@PostMapping("/modify")@ResponseBodypublic Result<String> modify(@RequestBody User user){userService.saveOrUpdate(user);return ResultUtil.ok("修改成功！");}@PostMapping("/remove")@ResponseBodypublic Result<String> remove(@RequestParam Integer id){userService.removeById(id);return ResultUtil.ok("删除成功！");}
}

需要源码的朋友给我来个一键三连，留个邮箱后发送！

SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战相关推荐

SpringBoot+Mybatis+thymeleaf实现增删改查
一.今天用SpringBoot整合thymeleaf做一套增删改查 1.导入依赖 <dependency><groupId>org.mybatis.spring.boot< ...
MyBatisPlus之CRUD增删改查以及分页
MyBatisPlus之CRUD增删改查以及分页 1.CRUD详解之插入操作环境测试,在之前的itcast-mp-springboot项目工程里面使用springboot来进行编写用户测试类 /* ...
SpringBoot操作MongoDB实现增删改查
本篇博客主讲如何使用SpringBoot操作MongoDB. SpringBoot操作MongoDB实现增删改查 (1)pom.xml引入依赖 <dependency> <group ...
springboot对于redis的增删改查
springboot对于redis的增删改查 1.下载redis,安装之后,打开redis服务器.不过有绿色版的,直接打开redis服务器可执行文件,启动redis服务器. 2.在pom.xml配置文 ...
SpringBoot + MyBatis + MySQL +IDEA2021 增删改查 2021-06-04
SpringBoot + MyBatis + MySQL +IDEA2021 增删改查 1.环境介绍 Windows 10 JDK 1.8 MySQL 8 IDEA 2021.1.2 2.开始操作.新 ...
neo4j图数据库安装(mac)+neo4j集成springboot实现基础的增删改查
目录第一部分 mac安装neo4j 第二部分 neo4j集成springboot实现基础的增删改查一.图数据库相关配置二.业务逻辑实体类持久层业务层表现层启动类三.测试附录: 第一 ...
spring boot(十五)spring boot+thymeleaf+jpa增删改查示例
快速上手配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency><groupId>org.springframework.bo ...
Springboot 使用quartz 定时任务增删改查
前段时间公司项目用到了定时任务所以写了一篇定时任务的文章 ,浏览量还不错 , Springboot 整合定时任务 ) 所以就准备写第二篇, 如果你是一名Java工程师,你也可以会看到如下的页面 , ...
全网最全精析破解 Springboot+Jpa 对数据库增删改查
前言: 昨天做的是springboot+mybatis 对数据库进行增删改查但是我感觉配置文件太多了很麻烦繁琐今天搞一下springboot+Jpa对数据库进行增删改查, 感觉很好用 ,所以记 ...

SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战

说明

项目源码

实现效果

技术选型

核心代码

页面

控制器

SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战相关推荐

最新文章

热门文章