Springboot+Bootstrap实现增删改查实战
说明
最近有朋友问我有没有Springboot+Bootstrap实现增删改查的DEMO，当时没有，现在他来了！
实现效果
代码地址
https://gitee.com/indexman/bootstrap_curd
水平一般能力有限，觉得有用的朋友给我来个一键三连或捐助：）
软件架构
前端：bootstrap4.5+thymeleaf+分页插件
后端：spring boot+mybatisPlus
数据库：mysql
核心功能代码
详细请看源码
前端
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户管理</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.container {
padding: 20px;
}
.search {
padding-bottom: 20px;
border-bottom: 1.5px solid #ddd;
}
#add {
margin-right: 5em;
}
#search {
margin-left: 0.5em;
}
.pagination {
display: flex;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<div class="search">
<div class="input-group col-md-8">
<button class="btn btn-success" type="button" id="add">
添加
</button>
<input class="form-control" type="text" id="username" placeholder="请输入账号，按回车键">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="search">
查询
</button>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet">
<div class="category-list">
<table class="table table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>姓名</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8" align="center" style="position: fixed; bottom: 20%;">
<!-- 分页控件，标签必须是<ul> -->
<ul id="pageButton" class="pagination-centered"></ul>
</div>
</div>
</div>
<!--编辑框-->
<div class="modal fade" id="modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">修改用户</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" id="m_id" hidden="hidden">
<div class="form-group">
<label class="control-label" for="m_username">用户名：</label>
<input type="text" class="form-control" id="m_username" placeholder="">
</div>
<div class="form-group">
<label class="control-label" for="m_email">邮箱：</label>
<input type="text" class="form-control" id="m_email" placeholder="">
</div>
<div class="form-group">
<label class="control-label" for="m_truename">姓名：</label>
<input type="text" class="form-control" id="m_truename" placeholder="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="modify()">提交</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script src="../js/util.js" th:src="@{/js/util.js}"></script>
<script type="text/javascript">
var ctx = $("#ctx").val();
$(function () {
// 查询第一页数据
getPage(1);
// 新增
$("#add").click(function () {
reset();
$('#modify').modal('show');
});
// 搜索
$("#search").click(function () {
getPage(1);
});
// 回车触发查询
$("#username").keyup(function (event) {
if (event.keyCode == 13) {
$("#search").trigger("click");
}
});
});
// 获取指定页码的数据
function getPage(pageNo) {
var dataRow = "";
$.ajax({
url: ctx + "/user/list",
type: "post",
data: {
"username": $("#username").val(),
"pageNo": pageNo
},
dataType: "json",
success: function (response) {
dataRow = "";
if (response.data.records.length > 0) {
console.log(111)
$.each(response.data.records, function (i, r) {
dataRow += '<tr>'
+ '<td>'
+ r.username
+ '</td>'
+ '<td>'
+ r.email
+ '</td><td>'
+ r.truename + '</td>'
;
dataRow += '<td>' + new Date(r.createTime).Format("yyyy-MM-dd hh:mm:ss") + '</td><td><a href="javascript:remove(' + r.id + ')" style="color: #CA0C16;">删除' +
'</a> <a href="javascript:edit(' + r.id + ')">编辑</a></td></tr>';
});
}
// console.log(dataRow);
$("#dataTable tbody").empty();
$("#dataTable tbody").append(dataRow);
// 分页按钮
var element = $('#pageButton');
var options = {
bootstrapMajorVersion: 4,
currentPage: pageNo, // 当前页数
numberOfPages: 5, // 显示按钮的数量
totalPages: response.data.pages, // 总页数
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
// 点击事件，用于通过Ajax来刷新整个list列表
onPageClicked: function (event, originalEvent, type, page) {
getPage(page);
}
};
element.bootstrapPaginator(options);
}
}
)
}
//删除
function remove(id) {
if (confirm("确定删除数据？")) {
$.ajax({
type: "POST",
url: ctx + "/user/remove",
traditional: true,
data: {
id: id
},
success: function (data) {
getPage(1);
},
error: function (e) {
//alert("ERROR: ", e);
console.log("ERROR: ", e);
}
});
}
}
function edit(id) {
$.ajax({
url: ctx + "/user/" + id,
type: "GET",
success: function (result) {
if (result.success) {
//向模态框中传值
$('#m_id').val(id);
$('#m_username').val(result.data.username);
$('#m_email').val(result.data.email);
$('#m_truename').val(result.data.truename);
} else {
alert(result.data.message);
}
}
});
$('#modify').modal('show');
}
//提交修改
function modify() {
//获取模态框数据
var id = $("#m_id").val();
var username = $("#m_username").val();
var email = $("#m_email").val();
var truename = $("#m_truename").val();
var param = {"id": id, username: username, email: email, truename: truename};
$.ajax({
url: ctx + "/user/modify",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(param),
success: function (data) {
if (data.success) {
// 清空表单
reset();
$('#modify').modal('hide');
getPage(1);
} else {
alert(data.message);
}
}
});
}
function reset() {
$("#m_id").val("");
$("#m_username").val("");
$("#m_email").val("");
$("#m_truename").val("");
}
</script>
</body>
</html>
后端
@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+Bootstrap实现增删改查实战的更多相关文章
- SpringBoot+Mybatis增删改查实战
简介 SpringBoot和Mybatis是啥请自行百度,作者这里也是花了几天时间入门了这个框架用来完成任务,并且也算符合要求的完成了任务,期间也各种百度但是没找到自己想要的那种简单易懂的教程,所以踩 ...
- springboot+jpa+thymeleaf增删改查的示例（转）
这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...
- SpringBoot JPA实现增删改查、分页、排序、事务操作等功能
今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能.下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and ...
- springboot(十五)：springboot+jpa+thymeleaf增删改查示例
这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...
- SpringBoot JPA + H2增删改查示例
下面的例子是基于SpringBoot JPA以及H2数据库来实现的,下面就开始搭建项目吧. 首先看下项目的整体结构: 具体操作步骤: 打开IDEA,创建一个新的Spring Initializr项目, ...
- springboot整合mybatis增删改查（四）：完善增删改查及整合swgger2
接下来就是完成增删改查的功能了,首先在config包下配置Druid数据连接池,在配置之前先把相关配置在application.preperties中完善 application.preperties ...
- 从0开始完成SpringBoot+Mybatis实现增删改查
1.准备知识: 1)需要掌握的知识: Java基础,JavaWeb开发基础,Spring基础(没有Spring的基础也可以,接触过Spring最好),ajax,Jquery,Mybatis. 2)项目 ...
- springboot+mybatis实现增删改查
开发工具IDEA 一.创建springboot项目(可以百度或者点击查看) 二.添加依赖pom.xml 1 <?xml version="1.0" encoding=&quo ...
- 从零开始搭建springboot+mybatis+thymeleaf增删改查示例
环境说明: 开发工具:Eclipse Mars.2 Release(4.5.2) JDK:1.8 Maven:3.3.3 注:Eclipse需安装sts插件,安装方法请自行百度 1. 新建maven工 ...
- springboot整合mybatis增删改查（二）：springboot热部署
SpringBoot整合热部署 传统情况下, 我们用idea运行springboot程序时, 如果我们需要修改类里的方法,或者其他信息 我们需要修改完保存,并且重启springboot,有时候会很浪费 ...
随机推荐
- DDP运行报错（单卡无错）：ERROR:torch.distributed.elastic.multiprocessing.api:failed (exitcode: 1)
使用DDP时出现错误,但是单卡跑无错误. 错误记录如下: RuntimeError: Expected to have finished reduction in the prior iteratio ...
- [转帖]TiKV 缩容不掉如何解决？
TiKV节点缩容不掉,通常遇到的情况: 1.经常遇到的情况是:3个节点的tikv集群缩容肯定会一直卡着,因为没有新节点接受要下线kv的region peer. 2.另外就是除缩容tikv外,剩下的KV ...
- 华城金锐申威SW64服务器重装过程
华城金锐申威SW64服务器重装过程 背景 这边为了进行兼容性验证新进了两套申威的服务器. 一台机器带着安装好的操作系统了. 但是另外一套没有对应的系统. 端午期间想着趁着上班的人少, 加吧给处理一下. ...
- ChatGPT学习之_shell脚本一例-查找版本冲突的第三方jar包
ChatGPT学习之_shell脚本一例-查找版本冲突的第三方jar包 背景 自从换了Java后 产品里面用到了非常多的第三方组建,也就是很多jar包. 产品内的研发规范要求, jar包不能带版本号和 ...
- [转帖] Linux命令拾遗-查看系统信息
https://www.cnblogs.com/codelogs/p/16060714.html 简介# 作为一名程序员,有时需要关注自己的进程运行在什么样的软硬件环境里,比如几核cpu.固态硬盘还是 ...
- [转帖]Python基础之数据类型（一）
https://www.jianshu.com/p/5c43f6056f77 Python基本数据类型 python系列文档都是基于python3 数字 字符串 列表 元组 字典 集合 一.数字 特性 ...
- [转帖]Linux如何查看网关地址
转至:https://baijiahao.baidu.com/s?id=1733537078943023051&wfr=spider&for=pc 服务器之间的通信是通过ip地址来 ...
- JDK内嵌指令的简单学习
java 可以使用 java -jar的方式启动服务 日常工作中用到的比较少 javac 可以将.java 文件编译成 .class中间代码 这个工具开发编写代码中是经常需要使用的, jenkins ...
- 【APP 逆向百例】Frida 初体验，root 检测与加密字符串定位
声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未经许 ...
- Go 匿名函数与闭包
Go 匿名函数与闭包 匿名函数和闭包是一些编程语言中的重要概念,它们在Go语言中也有重要的应用.让我们来详细介绍这两个概念,并提供示例代码来帮助理解. 目录 Go 匿名函数与闭包 一.匿名函数(Ano ...