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

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

说明

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("删除成功!");
}
}

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164542.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 四大Hybrid App移动开发平台对比

    四大Hybrid App移动开发平台对比[值得一用的Apps]四大HybridApp移动开发平台对比摘要:作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java、Object-C、C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下HybridApp作为一个折中的解决方案诞生了。作者:来源:ZDNetCIO与应用频道|2013年04

  • viewstub 的详细用法_pageinfo用法

    viewstub 的详细用法_pageinfo用法在开发应用程序的时候,经常会遇到这样的情况,会在运行时动态根据条件来决定显示哪个View或某个布局。那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为View.GONE,然后在代码中动态的更改它的可见性。这样的做法的优点是逻辑简单而且控制起来比较灵活。但是它的缺点就是,耗费资源。虽然把View的初始可见View.GONE但是在Inflate布局的时候View仍然会被Infl…

  • Tomcat配置SSL证书(PFX证书)

    Tomcat配置SSL证书(PFX证书)Symantec提供免费版SSL,可快速免费申请一、什么是SSL(证书)?    SSL证书服务(AlibabaCloudSSLCertificatesService)由阿里云联合多家国内外数字证书管理和颁发的权威机构、在阿里云平台上直接提供的服务器数字证书。您可以在阿里云平台上直接购买、或者免费获取所需类型的数字证书,并一键部署在阿里云…

  • 易企秀的制作方法和步骤_易企秀制作流程

    易企秀的制作方法和步骤_易企秀制作流程虽然易企秀邀请函日渐被广大网友所知,也有很多网友在自己制作易企秀,但仍有很多想要制作易企秀,却自己不会制作的朋友,不得不花大价钱请他人制作,所以我们特地为您准备了一个如何快速学会制作易企秀的教程。打开

  • @RestController 和 @Controller 的区别[通俗易懂]

    @RestController 和 @Controller 的区别[通俗易懂]@RestController注解,相当于@Controller+@ResponseBody两个注解的结合,返回json数据不需要在方法前面加@ResponseBody注解了,但使用@RestController这个注解,就不能返回jsp,html页面,视图解析器无法解析jsp,html页面理解下面的注解哦。@ResponseBody表示该方法的返回结果直接写入HTTPrespons…

  • 逻辑运算指令和移位指令

    逻辑运算指令和移位指令ANDXORTESTSHLSALROLRCLOR

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号