SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战
说明
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 {
@Autowired
private UserService userService;
@RequestMapping
public String user(){
return "user";
}
@GetMapping("/{id}")
@ResponseBody
public Result<User> get(@PathVariable Integer id){
User user = userService.getById(id);
return ResultUtil.ok(user);
}
/**
* 分页查询
* @param username
* @param pageNo
* @param pageSize
* @return
*/
@PostMapping("/list")
@ResponseBody
public 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")
@ResponseBody
public Result<String> add(@RequestBody User user){
userService.save(user);
return ResultUtil.ok("添加成功!");
}
@PostMapping("/modify")
@ResponseBody
public Result<String> modify(@RequestBody User user){
userService.saveOrUpdate(user);
return ResultUtil.ok("修改成功!");
}
@PostMapping("/remove")
@ResponseBody
public Result<String> remove(@RequestParam Integer id){
userService.removeById(id);
return ResultUtil.ok("删除成功!");
}
}
需要源码的朋友给我来个一键三连,留个邮箱后发送!
SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战的更多相关文章
- spring boot(十五)spring boot+thymeleaf+jpa增删改查示例
快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.b ...
- SpringBoot操作MongoDB实现增删改查
本篇博客主讲如何使用SpringBoot操作MongoDB. SpringBoot操作MongoDB实现增删改查 (1)pom.xml引入依赖 <dependency> <group ...
- SpringBoot+Mybatis增删改查实战
简介 SpringBoot和Mybatis是啥请自行百度,作者这里也是花了几天时间入门了这个框架用来完成任务,并且也算符合要求的完成了任务,期间也各种百度但是没找到自己想要的那种简单易懂的教程,所以踩 ...
- SpringBoot整合MybatisPlus基本的增删改查,保姆级教程
概述 MybatisPlus是国产的第三方插件, 它封装了许多常用的CURDapi,免去了我们写mapper.xml的重复劳动,这里介绍了基本的整合SpringBoot和基础用法. 引入依赖 在项目中 ...
- springBoot(7)---整合Mybaties增删改查
整合Mybaties增删改查 1.填写pom.xml <!-- mybatis依赖jar包 --> <dependency> <groupId>org.mybati ...
- 利用SpringBoot实现数据库的增删改查(具体实现)
前言 本次主要是想利用SpringBoot的框架实现一下数据库的增删改查,所以只有一个较为简单的表作为案例 具体实现 1.在配置文件中配置一下相关内容 2.在pom.xml文件中导入相关坐标 3.编写 ...
- 【SpringBoot】11-1.Springboot整合Springmvc+Mybatis增删改查操作(下)
整合过程:https://www.isdxh.com/68.html 一.增--增加用户 1.创建实体类 package com.dxh.pojo; public class Users { priv ...
- 使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)
目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习h ...
- springboot(三 使用mybatis +springboot 完成简单的增删改查)
先说一些注解: @EnableAutoConfiguration 可以帮助SpringBoot应用将所有符合条件的@Configuration配置都加载到当前SpringBoot创建并使用的IoC容器 ...
- Springboot+hibernate简单的增删改查
1.创建好项目之后在配置端口号(也可以不用配置,默认端口8080) #server server.port= server.tomcat.uri-encoding=utf- 2.配置mysql #My ...
随机推荐
- Go-并发-Go程和信道
- [转帖]rsync原理
简介: Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的"Rsync算法"来使本地和远 ...
- [转帖]学习如何编写 Shell 脚本(进阶篇)
https://juejin.cn/post/6935365727205457928 前言 在<学习如何编写 Shell 脚本(基础篇)>一文中已经讲解了 Shell 脚本编程的基础知识, ...
- TiKV占用内存超过的解决过程
TiKV占用内存超过的解决过程 背景 为了后去TiDB的极限数据. 晚上在每台服务器上面增加了多个TiKV的节点. 主要方式为: 每个NVME的硬盘增加两个TiKV的进程. 这样每个服务器两个磁盘, ...
- Clickhouse 极简单机版本安装部署
Clickhouse 极简单机版本安装部署 摘要 Clickhouse的安装与部署其实比较简单. 但是为了能够更加简单的部署与使用. 尤其是能够可以方便的添加到镜像内进行运行. 所以记录一下方便快捷的 ...
- [转帖]SPECjvm2008 User's Guide
SPECjvm2008 User's Guide https://spec.org/jvm2008/docs/UserGuide.html#UsePJA Version 1.0Last modifie ...
- [转帖]CKA 真题
https://segmentfault.com/a/1190000021380185 1.列出pod并排序 kubectl get pod --sort-by .metadata.name 题目 ...
- Linux与Windows系统字符集的简要学习
背景 最近同事反馈公司的产品再更新了mysql-8.0.31的驱动jar包后部分功能报错. 问题核心原因 研发这边石磊老师已经找到了. 结论是Mysql8.0.26之后的数据库驱动好像会识别操作系统的 ...
- 拜占庭将军问题和 Raft 共识算法讲解
作者: 京东物流 郭益如 导读 在分布式系统中, 什么是拜占庭将军问题?产生的场景和解决方案是什么?什么是 Raft 共识算法?Raft 算法是如何解决拜占庭将军问题的?其核心原理和算法逻辑是什么?除 ...
- 【构造,树】【Loj】Loj6669 Nauuo and Binary Tree
2023.7.3 Problem Link 交互库有一棵 \(n\) 个点的二叉树,你每次可以询问两个点之间的距离,猜出这棵二叉树.\(n\le 3000\),询问次数上限 \(30000\). 首先 ...