[SpringBoot——Web开发（使用Thymeleaf模板引擎）]
- 2019 年 10 月 6 日
- 筆記
【文字只能描述片段信息，具体细节参考代码】
https://github.com/HCJ-shadow/SpringBootPlus
引入POM依赖
<properties> <java.version>1.8</java.version> <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version> </properties>
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
记坑thymeleaf无法跳转：https://blog.csdn.net/qq_40754146/article/details/95411413
将html页面放于classpath：template/下，thymeleaf就可自动渲染。
启动：
注：如果static下有index.html文件，系统会优先访问static下的index.html。
设置Thymeleaf页面跳转
新建一个controller
在templates下新建一个thymeleaf.html
访问：http://localhost:8080/thymeleaf
Thymeleaf CRUD测试
基础环境准备：
– 引入数据库相关pom依赖
<dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.0</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency>
– 引入Bootstrap依赖
<!--引入bootstrap--> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency> 页面引用： <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
– 引入pageshelper插件
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.5</version> </dependency>
配置yaml
pagehelper: helperDialect: mysql reasonable: true supportMethodsArguments: true pageSizeZero: false #pageSize=0
1.创建数据库表
2.创建bean适配数据表
package zkkrun.top.web.bean; import java.io.Serializable; public class UserInfo implements Serializable { private Integer id; private String username; private String password; private Integer age; private String email; public UserInfo() { } public UserInfo(Integer id, String username, String password, Integer age, String email) { this.id = id; this.username = username; this.password = password; this.age = age; this.email = email; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } @Override public String toString() { return "UserInfo{" + "id=" + id + ", username='" + username + ''' + ", password='" + password + ''' + ", age=" + age + ", email='" + email + ''' + '}'; } }
3.yaml配置数据源
spring: datasource: # 数据源基本配置 username: noneplus1 password: Noneplus564925080!1 driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://47.113.6.247:3306/user?serverTimezone=UTC
4.创建Mapper接口，使用注解版Mybatis
package zkrun.top.web.mapper; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import org.springframework.stereotype.Repository; import zkrun.top.web.bean.UserInfo; @Repository public interface UserInfoMapper { @Select("SELECT * FROM user_info WHERE id = #{id}") public UserInfo getUserById(Integer id); @Update("UPDATE user_info SET username=#{username},password=#{password},age=#{age},email=#{email} WHERE id=#{id}") public void updateUser(UserInfo userInfo); @Delete("DELETE FROM user_info WHERE id=#{id}") public void deleteUserById(Integer id); @Insert("INSERT INTO user_info(username,password,age,email) VALUES(#{username},#{password},#{age},#{email})") public void insertUser(UserInfo userInfo); }
使用MapperScan扫描mapper接口所在包
@MapperScan("zkrun.top.web.mapper")
5.测试数据库
批量插入数据
package zkrun.top.web; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.context.junit4.SpringRunner; import zkrun.top.web.bean.UserInfo; import zkrun.top.web.mapper.UserInfoMapper; import java.util.UUID; @RunWith(SpringRunner.class) @SpringBootTest public class WebApplicationTests { @Autowired UserInfoMapper userInfoMapper; @Test public void contextLoads() { UserInfo userInfo = userInfoMapper.getUserById(1); System.out.println(userInfo); } @Test public void insertDatas() { for(int i =0;i<1000;i++) { UserInfo userInfo = new UserInfo(i+2,UUID.randomUUID().toString().substring(0,8),"123456789",(Integer) (i+50)/3,"@sina.com"); userInfoMapper.insertUser(userInfo); } System.out.println("插入成功！"); } }
显示信息列表
取消thymeleaf缓存
spring: thymeleaf: cache: false
ctrl+shift+F9刷新
1.UserInfoMapper增加SQL查询，获取所有信息
@Select("SELECT * FROM user_info") public List<UserInfo> getUsers();
2.创建CRUDController，使用PageHelper插件分页
@Controller public class CRUDController { @Autowired UserInfoMapper userInfoMapper; @RequestMapping("/crud") public String crud(@RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize, Model model) { //默认查询所有信息 PageHelper.startPage(pageNum,pageSize); PageInfo<UserInfo> pageInfo = new PageInfo<UserInfo>(userInfoMapper.getUsers()); model.addAttribute("pageInfo",pageInfo); return "crud"; } }
- pageNum,pageSize表示起始页和每页显示的数据量，通过@RequestParam参数将默认值设为1和10，方便设置下一页和上一页跳转。
- PageHelper.startPage(pageNum,pageSize);设置起始页和每页显示的数据量
- PageInfo pageInfo = new PageInfo(userInfoMapper.getUsers());将查询到的数据赋给pageInfo对象
- model.addAttribute("pageInfo",pageInfo);将pageInfo传输进页面
3.Thymeleaf通过表达式适配数据
<table class="table"> <tr> <th>id</th> <th>username</th> <th>password</th> <th>age</th> <th>email</th> </tr> <tr th:each="user:${pageInfo.list}"> <td th:text="${user.id}"></td> <td th:text="${user.username}"></td> <td th:text="${user.password}"></td> <td th:text="${user.age}"></td> <td th:text="${user.email}"></td> </tr> </table> <ul class="pagination" style="margin-left: 50%"> <li class="page-item"><a class="page-link"><span th:text="第+${pageInfo.pageNum}+页"></span></a></li> <li class="page-item"><a class="page-link" th:href="@{/crud}">首页</a></li> <li class="page-item"><a class="page-link" th:href="@{/crud(pageNum=${pageInfo.pages})}">尾页</a></li> <li class="page-item"><a class="page-link" th:href="@{/crud(pageNum=${pageInfo.prePage})}">Last</a></li> <li class="page-item"><a class="page-link" th:href="@{/crud(pageNum=${pageInfo.getNextPage()})}">Next</a></li> </ul>
访问http://localhost:8080/crud
删除信息
Controller
//删除 @RequestMapping("/delete") public String delete(int id) { userInfoMapper.deleteUserById(id); return "redirect:/user"; }
UserInfoMapper
@Delete("DELETE FROM user_info WHERE id=#{id}") public void deleteUserById(Integer id);
在页面添加一个按钮
<button type="button" class="btn btn-danger"><a style="color: aliceblue" th:href="@{/delete(id=${user.id})}">删除</a></button>
修改和添加信息
先跳转到修改或者添加页面，再进行表单提交
修改
//点击修改按钮，跳转到修改页面，回显信息 @RequestMapping("/modify") public String modify(int id ,Model model) { model.addAttribute("OneInfo",userInfoMapper.getUserById(id)); return "modify"; } //提交修改信息 @RequestMapping("/modifyCommit") public String modify(UserInfo userInfo) { System.out.println(userInfo); userInfoMapper.updateUser(userInfo); System.out.println("修改提交."); return "redirect:/user"; }
主页添加一个修改按钮
<button type="button" class="btn btn-primary"><a style="color: aliceblue" th:href="@{/modify(id=${user.id})}">修改</a></button>
响应上述第一个请求，跳转到modify页面
modify页面
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>modify</title> <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"> </head> <body> <div style="width: 50%;margin-left: 25%;margin-top: 5%"> <h1>修改</h1> <form class="form-horizontal" th:action="@{/modifyCommit}"> <input name="id" class="form-control" th:value="${OneInfo.getId()}" style="display: none"> <div class="form-group"> <label class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input name="username" class="form-control" id="Username" placeholder="Username" th:value="${OneInfo.getUsername()}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input name="password" class="form-control" id="inputPassword3" placeholder="Password" th:value="${OneInfo.getPassword()}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">age</label> <div class="col-sm-10"> <input name="age" class="form-control" id="age" placeholder="Age" th:value="${OneInfo.getAge()}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input name="email" class="form-control" id="inputEmail3" placeholder="Email" th:value="${OneInfo.getEmail()}"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form> </div> </body> </html>
其中modify表的action响应修改表的提交操作
添加
同理，跳转到添加页面，再进行表单提交
controller
//添加:1.跳转到添加页面 @RequestMapping("/add1") public String add1() { return "add"; } //添加 ： 2.提交信息 @RequestMapping("/add2") public String add2(UserInfo userInfo) { System.out.println(userInfo); userInfoMapper.insertUser(userInfo); return "redirect:/user"; }
添加一个按钮
<button style="margin-left: 75%" type="button" class="btn btn-primary"><a style="color: aliceblue" th:href="@{/add1}">新增</a></button>
添加页面（对比修改页面不需要回显）
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>add</title> <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"> </head> <body> <div style="width: 50%;margin-left: 25%;margin-top: 5%"> <h1>添加</h1> <form class="form-horizontal" th:action="@{/add2}"> <div class="form-group"> <label class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input name="username" class="form-control" id="Username" placeholder="Username"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input name="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">age</label> <div class="col-sm-10"> <input name="age" class="form-control" id="age" placeholder="Age"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input name="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form> </div> </body> </html>
测试
插入500条测试数据
@Test public void insertDatas() { System.out.println("开始插入..."); for(int i =1;i<500;i++) { UserInfo userInfo = new UserInfo(i,UUID.randomUUID().toString().substring(0,8),"123456789",(Integer) (i+50)/3,"@sina.com"); userInfoMapper.insertUser(userInfo); } System.out.println("插入成功！"); }
显示信息列表
修改
添加
