springboot+mysql+Thymeleaf实现增删改查和分页管理
环境准备
IntelliJ IDEA
mysql
本项目实现了对用户的增删改查以及分页管理
配置pox.xml，添加依赖
<!-- 添加spring-boot-starter-web模块依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 添加spring-boot-starter-thymeleaf模块依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--spring data jpa-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.42</version>
</dependency>
<!--json-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.58</version>
</dependency>
创建数据库
创建数据库usedemo，创建表t_user
配置文件application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/userdemo?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driverClassName=com.mysql.jdbc.Driver
# JPAConfiguration
spring.jpa.database=MySQL
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
#thymeleaf start
#spring.thymeleaf.prefix=classpath:/templates/
#spring.thymeleaf.suffix=.html
#spring.thymeleaf.mode=HTML5
#spring.thymeleaf.encoding=UTF-8
#spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
#thymeleaf end
server.port=8090
创建包和类，开始敲代码
目录如下：
创建实体类Tuser.java
@Entity
@Table(name = "T_User", schema = "userdemo")
public class TUser {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
@Column(nullable = false, updatable = false)
private long id;
private String username;
@NotNull
private String password;
@NotNull
private String email;//邮箱
// private String gender;//“男” “女”
private int isManager;//是否为管理员 0:不是管理员 1:是管理员
private int isVIP;//是否为会员 0:是会员 1:不是会员
private int grade;//用户等级
public enum Sex{
男,女;//枚举中常量结束位置要有分号
public static List<String> toList(){
Sex[] sex=Sex.values();
List<String> datas=new ArrayList<>();//定义一个列表容纳所有枚举的数据
for (Sex s:sex){
datas.add(s.name());
}
return datas;
}
};
private Sex grander;//实际输入数据库的是索引值，即男为0，女为1
public TUser() {
}
//此处省略get、set方法
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
TUser tUser = (TUser) o;
return isManager == tUser.isManager &&
isVIP == tUser.isVIP &&
grade == tUser.grade &&
Objects.equals(id, tUser.id) &&
Objects.equals(username, tUser.username) &&
Objects.equals(password, tUser.password) &&
Objects.equals(email, tUser.email) &&
grander == tUser.grander;
}
@Override
public int hashCode() {
return Objects.hash(id, username, password, email, grander, isManager, isVIP, grade);
}
}
创建UserDao.java
public interface UserDao extends JpaRepository<TUser, Long>
, JpaSpecificationExecutor<TUser> {
@Modifying
@Transactional
//保存用户
TUser save(TUser user);
Optional<TUser> findByEmail(String email);
}
创建UserService.java
定义方法
public interface UserService extends java.io.Serializable{
List<TUser> findEmail(String email);
public void save(TUser u)throws Exception;
public TUser findById(long id);
public void delete(TUser u);//删除一条信息
public void deleteById(long id);
public void deletes(List<TUser> users);//批量删除
TUser findByEmail(String email);
//分页查询
Page<TUser> findBookNoCriteria(Integer page, Integer size);
//关键字分页查询
Page<TUser> findBookCriteria(Integer page, Integer size,String kw);
}
创建UserImp.java实现UserService.java中的方法
//不要忘了加@Service ！！！
@Service
@Transactional
public class UserImp implements UserService {
@Autowired
private UserDao userDao;
@Override
public List<TUser> findEmail(String email) {
List<TUser> userList=UserImp.toList(userDao.findByEmail(email));
return userList;
}
//Optional转换为List
public static <T> List <T> toList(Optional<T> optional){
return optional.map(Collections::singletonList).orElse(Collections.emptyList());
}
@Override
public void save(TUser u) throws Exception{
try{
userDao.save(u);
}catch (Exception ex){
throw ex;
}
}
@Override
public TUser findById(long id) {
return userDao.findById(id).get();
}
@Override
public void delete(TUser u) {
userDao.delete(u);
}
@Override
public void deleteById(long id) {
userDao.deleteById(id);
}
@Override
@Transactional//保证数据删除的完整性
public void deletes(List<TUser> users) {
for (TUser u:users){
userDao.delete(u);
}
}
@Override
public TUser findByEmail(String email) {
return userDao.findByEmail(email).get();
}
//分页查询
@Override
public Page<TUser> findBookNoCriteria(Integer page, Integer size) {
Pageable pageable = PageRequest.of(page, size, Sort.Direction.ASC, "id");
return userDao.findAll(pageable);
}
//关键字分页查询
@Override
public Page<TUser> findBookCriteria(Integer page, Integer size, String kw) {
Pageable pageable = PageRequest.of(page, size, Sort.Direction.ASC, "id");
Page<TUser> userPage = userDao.findByKeyword(kw, pageable);
return userPage;
}
}
密码加密
为了实现密码加密，在security包下创建SHA1Test.java
public class SHA1Test {
final char[] HEX_DIGITS = "0123456789ABCDEF".toCharArray();
public String toHexString(String pwd) throws NoSuchAlgorithmException {
MessageDigest messageDigest = MessageDigest.getInstance("SHA1");
messageDigest.update(pwd.getBytes());
byte[] data = messageDigest.digest();
char[] chars = new char[data.length * 2];
for (int i = 0; i < data.length; i++) {
chars[i * 2] = HEX_DIGITS[(data[i] >> 4) & 0xf];
chars[i * 2 + 1] = HEX_DIGITS[data[i] & 0xf];
}
System.out.print("ת����ļ�������Ϊ��"+new String(chars).toLowerCase());
return new String(chars).toLowerCase();
}
}
创建UserController.java
@Controller
public class UserController {
@Autowired
private UserService userService;
/**
*根据条件查询用户信息
* @param kw 查询关键字即条件
* @param modelMap 模型对象，也是视图（界面）的上下文环境对象
* @param page 分当前页码
* @param size 每页的数据
* @return 字符串，代表了界面文件
*/
@RequestMapping("/listusers")
public String listall(String kw, ModelMap modelMap, @RequestParam(value = "page", defaultValue = "0") Integer page,
@RequestParam(value = "size", defaultValue = "5") Integer size){
Page<TUser> datas = userService.findBookNoCriteria(page, size);
modelMap.addAttribute("datas", datas);
return "listusers";
}
@RequestMapping(value = "/listusers",method = {RequestMethod.GET,RequestMethod.POST})
public String listuserbykw(String kw, ModelMap modelMap, @RequestParam(value = "page", defaultValue = "0") Integer page,
@RequestParam(value = "size", defaultValue = "5") Integer size){
modelMap.addAttribute("kw",kw);
if (kw!=null) kw="%"+kw+"%";
if (kw==null) kw="%%";
Page<TUser> datas=userService.findBookCriteria(page, size,kw);//默认分页从0页面（第一页），取每页20条数据
modelMap.addAttribute("datas", datas);
return "listusers";//返回界面
}
/**
* edituser 添加用户
* edituser/{id} 修改用户id的信息
* name="id",required = false -->id不是必须的
* @param id
* @param model
* @return
*/
@GetMapping({"/edituser","/edituser/{id}"})
public String edit(@PathVariable(name="id",required = false)Integer id, Model model,String email) {
TUser u = new TUser();
if (id != null && id > 0) {//即路径为edituser/{id} 编辑用户
u = userService.findById(id);
}
model.addAttribute("sexes",TUser.Sex.toList());
model.addAttribute("user", u);
return "edituser";
}
@PostMapping("/saveuser")
public String save(@Valid TUser user, BindingResult result, RedirectAttributes attr){
try {
if(result.hasErrors()){
System.out.println(result.getFieldError().toString());
return "redirect:/edituser";
}
//如果id为0 jpa的save方法起新增的作用;如果save不为0 那么jpa save方法起update作用
if (user.getId()==0){
//检查邮箱是否已注册
if(userService.findEmail(user.getEmail()).size()!=0){
attr.addFlashAttribute("message","该邮箱已注册");
return "redirect:/edituser";
}
//密码加密
SHA1Test sha1Test = new SHA1Test();
user.setPassword(sha1Test.toHexString(user.getPassword()));
}
userService.save(user);
attr.addFlashAttribute("ok","保存成功");
return "redirect:/listusers";
}catch (Exception ex){
return "redirect:/edituser";
}
}
@GetMapping("/deleteuser/{id}")
public String delete(@PathVariable("id")Integer id){
userService.deleteById(id);
return "redirect:/listusers";
}
@PostMapping("/deleteusers")
public String deletes(String ids){
System.out.println("======"+ids);
List<TUser> users=new ArrayList<>();
JSONObject json=JSONObject.parseObject(ids);
JSONArray arr=json.getJSONArray("ids");//前端传递时使用uods作为json数据的键
int ilen=arr.size();
for (int i=0;i<ilen;i++){//每次循环ilen次来执行ilen个查询，再去删除
users.add(userService.findById(arr.getInteger(i)));
}
userService.deletes(users);
return "redirect:/listusers";
}
}
基本的功能已经实现了，接下来就是写页面了
页面实现
在templates文件下创建listusers.html，显示用户列表
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>管理用户</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/js/delete_users.js}" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" th:href="@{css/index.css}">
</head>
<body>
<div class="container">
<div class="row">
<h5>用户管理</h5>
</div>
<div class="row" th:unless="${#strings.isEmpty(ok)}">
<p class="alert alert-success" th:text="${ok}"></p>
</div>
<div class="row">
<form class="form-row" th:action="@{/listusers}" id="form1" method="post">
<div class="form-group">
<label>关键字</label>
<input type="text" placeholder="请输入关键字进行搜索" name="kw" th:value="${kw}">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="搜索">
<a th:href="@{/edituser}" class="btn btn-primary">添加用户</a>
<input type="hidden" name="ids" value="" id="deleteids">
<button type="button" class="btn btn-danger delbtns">删除</button>
</div>
</form>
</div>
<div class="row">
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>性别</th>
<th>电子邮件</th>
<th>是否为VIP用户</th>
<th>等级</th>
<th>--</th>
</tr>
</thead>
<tbody>
<!-- <tr th:each="u:${pages.content}">-->
<tr th:each="u:${datas}">
<td>
<input type="checkbox" th:value="${u.id}" class="cid">
<span th:text="${uStat.count}"></span>
<!-- <span th:text="$index+1"></span>-->
</td>
<td th:text="${u.username}"></td>
<td th:text="${u.password}"></td>
<td th:text="${u.grander}"></td>
<td th:text="${u.email}"></td>
<td th:text="${u.isVIP}"></td>
<td th:text="${u.grade}"></td>
<td><a th:href="@{|/edituser/${u.id}|}">编辑</a>
<a th:href="@{|/deleteuser/${u.id}|}" class="delbtn">删除</a>
</td>
</tr>
</tbody>
</table>
<div th:include="page :: pager" th:remove="tag"></div>
</div>
</div>
</body>
</html>
创建edituser.html实现添加和编辑用户
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加、编辑用户</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<h5>编辑用户</h5>
</div>
<div class="row" th:unless="${#strings.isEmpty(message)}">
<p class="alert alert-success" th:text="${message}"></p>
</div>
<form class="form-row" th:action="@{/saveuser}" th:object="${user}" method="post">
<div class="row" th:if="${#fields}">
<p class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
<span th:each="err:${#fields.errors('*')}" th:text="${err}+' '"></span>
</p>
</div>
<div class="form-group">
<label for="username">用户名</label>
<input type="hidden" th:field="*{id}">
<input th:if="*{id!=null&&id>0}" type="hidden" th:field="*{password}"><!--如果不想添加这个表单域，就把实体中密码的注解@NotNull去掉-->
<input class="form-control" th:field="*{username}" required placeholder="请输入用户名">
</div>
<div class="form-group" th:unless="*{id!=null&&id>0}">
<label for="password">密码</label>
<input type="password" class="form-control" th:field="*{password}" required placeholder="请输入密码">
</div>
<div class="form-group">
<label for="sex">性别</label>
<div th:each="a:${sexes}">
<input type="radio" th:field="*{grander}" th:value="${a}"><span th:text="${a}"></span>
</div>
</div>
<div class="form-group">
<label for="email">电子邮件</label>
<input type="email" maxlength="100" class="form-control" th:field="*{email}">
<!-- <input type="hidden" th:field="*{validstate}">-->
</div>
<div class="form-group">
<label for="isVIP">是否为VIP用户</label>
<input type="number" class="form-control" th:field="*{isVIP}">
<!-- <input type="hidden" th:field="*{validstate}">-->
</div>
<div class="form-group">
<label for="grade">用户等级</label>
<input type="number" class="form-control" th:field="*{grade}">
<!-- <input type="hidden" th:field="*{validstate}">-->
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">保存</button>
</div>
<div>
<td>[[${message}]]</td>
</div>
</form>
</div>
<script th:inline="javascript">
</script>
</body>
</html>
page.html实现分页
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="page">
<head>
<meta charset="UTF-8">
<title>管理用户</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div th:fragment="pager">
<div class="text-right" th:with="baseUrl=${#httpServletRequest.getRequestURL().toString()},pars=${#httpServletRequest.getQueryString() eq null ? '' : new String(#httpServletRequest.getQueryString().getBytes('iso8859-1'), 'UTF-8')}">
<ul style="margin:0px;" class="pagination" th:with="newPar=${new java.lang.String(pars eq null ? '' : pars).replace('page='+(datas.number), '')},
curTmpUrl=${baseUrl+'?'+newPar},
curUrl=${curTmpUrl.endsWith('&') ? curTmpUrl.substring(0, curTmpUrl.length()-1):curTmpUrl}" >
<!--<li th:text="${pars}"></li>-->
<li><a href="#" th:href="@{${curUrl}(page=0)}">首页</a></li>
<li th:if="${datas.hasPrevious()}"><a href="#" th:href="@{${curUrl}(page=${datas.number-1})}">上一页</a></li>
<!--总页数小于等于10-->
<div th:if="${(datas.totalPages le 10) and (datas.totalPages gt 0)}" th:remove="tag">
<div th:each="pg : ${#numbers.sequence(0, datas.totalPages - 1)}" th:remove="tag">
<span th:if="${pg eq datas.getNumber()}" th:remove="tag">
<li class="active"><span class="current_page line_height" th:text="${pg+1}">${pageNumber}</span></li>
</span>
<span th:unless="${pg eq datas.getNumber()}" th:remove="tag">
<li><a href="#" th:href="@{${curUrl}(page=${pg})}" th:text="${pg+1}"></a></li>
</span>
</div>
</div>
<!-- 总数数大于10时 -->
<div th:if="${datas.totalPages gt 10}" th:remove="tag">
<li th:if="${datas.number-2 ge 0}"><a href="#" th:href="@{${curUrl}(page=${datas.number}-2)}" th:text="${datas.number-1}"></a></li>
<li th:if="${datas.number-1 ge 0}"><a href="#" th:href="@{${curUrl}(page=${datas.number}-1)}" th:text="${datas.number}"></a></li>
<li class="active"><span class="current_page line_height" th:text="${datas.number+1}"></span></li>
<li th:if="${datas.number+1 lt datas.totalPages}"><a href="#" th:href="@{${curUrl}(page=${datas.number}+1)}" th:text="${datas.number+2}"></a></li>
<li th:if="${datas.number+2 lt datas.totalPages}"><a href="#" th:href="@{${curUrl}(page=${datas.number}+2)}" th:text="${datas.number+3}"></a></li>
</div>
<li th:if="${datas.hasNext()}"><a href="#" th:href="@{${curUrl}(page=${datas.number+1})}">下一页</a></li>
<!--<li><a href="#" th:href="@{${curUrl}(page=${datas.totalPages-1})}">尾页</a></li>-->
<li><a href="#" th:href="${datas.totalPages le 0 ? curUrl+'page=0':curUrl+'&page='+(datas.totalPages-1)}">尾页</a></li>
<li><span th:utext="'共'+${datas.totalPages}+'页 / '+${datas.totalElements}+' 条'"></span></li>
</ul>
</div>
</div>
</body>
</html>
delete_users.js实现批量删除
/**
* 当标签出现在脚本代码后面时，不能使用$().click();绑定点击事件，使用on()方法
* on()方法绑定事件称之为委托方式绑定,on()也需要标签已经被解析才可以绑定事件
* 解决方法：调用jQuery的ready函数执行文档加载完成后处理事件绑定
* @param {type} param
*/
$(function () {//文档加载完成后执行的回调函数
$("td").on("click",".delbtn",function () {
console.log("click invoke...");
return confirm("确认删除吗？这个操作不可恢复");
});
var ids={ids:[]};
$(".cid").click(function () {
ids.ids=[];
$(".cid:checked").each(function () {//遍历所有被选择的复选框
ids.ids.push($(this).val());
});
});
$(".delbtns").click(function () {//多条信息删除
if (ids.ids.length<=0) return;
if (confirm("确认要删除被选择的信息吗？这个操作不可恢复")){
var json=JSON.stringify(ids);
console.log("===="+json);
$("#deleteids").val(json);
$("#form1").attr("action","/deleteusers");
$("#form1").submit();
}
});
});
接下来我们运行项目看看效果
示例
打开浏览器，输入http://localhost:8090/listusers，显示用户列表
关键字查询
编辑或添加用户，若邮箱已存在，则报错提示
删除用户
项目地址
项目下载：github
扫一扫
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
