Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比,Thymeleaf 最大的特点是,即使不启动 Web 应用,也可以直接在浏览器中打开并正确显示模板页面 。
Thymeleaf介绍
Thymeleaf 是新一代 Java 模板引擎,与 Velocity、FreeMarker 等传统 Java 模板引擎不同,Thymeleaf 支持 HTML 原型,其文件后缀为“.html”,因此它可以直接被浏览器打开,此时浏览器会忽略未定义的 Thymeleaf 标签属性,展示 thymeleaf 模板的静态页面效果;当通过 Web 应用程序访问时,Thymeleaf 会动态地替换掉静态内容,使页面动态显示。
常用th标签都有那些?
关键字 | 功能介绍 | 案例 |
th:id | 替换id |
|
th:text | 文本替换 |
|
th:utext | 支持html的文本替换 |
|
th:object | 替换对象 |
|
th:value | 属性赋值 |
|
th:with | 变量赋值运算 |
|
th:style | 设置样式 |
|
th:onclick | 点击事件 |
|
th:each | 属性赋值 |
|
th:if | 判断条件 |
|
th:unless | 和th:if判断相反 |
|
th:href | 链接地址 |
|
th:switch | 多路选择 配合th:case 使用 |
|
th:case | th:switch的一个分支 |
|
th:fragment | 布局标签,定义一个代码片段,方便其它地方引用 |
|
th:include | 布局标签,替换内容到引入的文件 |
|
th:replace | 布局标签,替换整个标签到引入的文件 |
|
th:selected | selected选择框 选中 |
|
th:src | 图片类地址引入 |
|
th:inline | 定义js脚本可以使用变量 |
|
th:action | 表单提交的地址 |
|
th:remove | 删除某个属性 |
|
th:attr | 设置标签属性,多个属性可以用逗号分隔 | 比如 |
还有非常多的标签,这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性,其生效的优先级顺序为:include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove
1.创建Spring Boot项目
添加Lombok、Spring Web、Thymeleaf、MYSQL Driver依赖
2.查看项目新建完成后的pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.6</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.p</groupId>
<artifactId>springboottest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboottest</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.3.0</version>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
3.修改配置文件src/main/resources
修改配置文件本文不使用application.properties文件而使用更加简洁的application.yml文件
在application.yml文件里面加入以下内容:
# tomcat 端口号设置 随意更改
server:
port: 8888
#配置数据源 datasource
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/y2demo?serverTimezone=UTC
username: root
password: root
thymeleaf:
#模板类型 默认为HTML,模板是html文件
mode: HTML5
#缓存 默认为true,但在开发阶段为了修改立即生效,需设置为false
cache: false
#模板视图前缀 默认设置为 classpath:/templates/
prefix: classpath:/templates/
#模板视图后缀 默认为 .html
suffix: .html
#引入mybatis
mybatis:
type-aliases-package: com.p.springboottest.pojo #引入类型别名
mapper-locations: classpath:/mapper/*.xml #引入mapper文件
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #输出sql语句日志
4.创建表
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`sex` int(255) NULL DEFAULT NULL,
`age` int(11) NULL DEFAULT NULL,
`email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, '澳门', '1231231', 1, 12, '123@qq.com');
INSERT INTO `user` VALUES (4, 'd', '321321', 1, 11, '321@qq.com');
INSERT INTO `user` VALUES (6, '润', '123123', 1, 121, '123@qq.com');
5.该项目的文件结构
6.开始编码操作
6.1在pojo包中新建User.java,使之与数据库中的字段一一对应
@Data注解可以省略getset,用这个注解就能实现
@Data
public class User {
private Integer id;
private String username;
private String password;
private Integer age;
private Integer sex;
private String email;
}
6.2 在mapper包中创建UserMappers接口
@Repository的作用为给bean在容器中命名
@Mapper作用:
1.使用@Mapper将UserMappers接口交给Spring进行管理
2.不用写Mapper映射文件(XML)
3.为这个UserMappers接口生成一个实现类,让别的类进行引用
@Repository
@Mapper
public interface UserMappers {
/**
* 查询所有的用户信息
* @return List<User>
*/
List<User> findAllUser();
/**
* 删除用户信息
* @param id
* @return
*/
int deleteUser(Integer id);
/**
* 新增用户信息
* @param user
* @return
*/
int addUser(User user);
/**
* 根据id信息查询
*/
User findById(Integer id);
/**
* 修改用户信息
* @param user
* @return
*/
int updateUser(User user);
}
6.3在service包中创建UserService.java
public interface UserService {
/**
* 查询所有的用户信息
* @return List<User>
*/
List<User> findAllUser();
/**
* 删除用户信息
* @param id
* @return
*/
int deleteUser(Integer id);
/**
* 新增用户信息
* @param user
* @return
*/
int addUser(User user);
/**
* 根据id信息查询
*/
User findById(Integer id);
/**
* 修改用户信息
* @param user
* @return
*/
int updateUser(User user);
}
6.4在service包中创建UserServiceImpl.java
@Service
此注注解属于业务逻辑层,service或者manager层
默认按照名称进行装配,如果名称可以通过name属性指定,如果没有name属性,注解写在字段上时,默认去字段名进行查找,如果注解写在setter方法上,默认按照方法属性名称进行装配。当找不到匹配的bean时,才按照类型进行装配,如果name名称一旦指定就会按照名称进行装配
@Autowired
autowired有4种模式,byName、byType、constructor、autodectect
其中@Autowired注解是使用byType方式的
byType方式是根据属性类型在容器中寻找bean类
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMappers userMappers;
@Override
public List<User> findAllUser() {
return userMappers.findAllUser();
}
@Override
public int deleteUser(Integer id) {
return userMappers.deleteUser(id);
}
@Override
public int addUser(User user) {
return userMappers.addUser(user);
}
@Override
public User findById(Integer id) {
return userMappers.findById(id);
}
@Override
public int updateUser(User user) {
return userMappers.updateUser(user);
}
}
6.5在controller包中创建PageController.java以及UserController.java
@Controller
public class PageController {
/**
* 统一返回页面代码
* @param page
* @return
*/
@RequestMapping("/{page}.html")
public String toPage(@PathVariable("page")String page){
return page;
}
}
@Controller
public class UserController {
@Autowired
private UserServiceImpl userService;
@RequestMapping("/getAll")
public String findAllUser(Model model){
List<User> allUser = userService.findAllUser();
model.addAttribute("userList",allUser);
return "index";
}
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id")Integer id, Model model){
int i=userService.deleteUser(id);
if (i>0){
return "redirect:/getAll";
}
return "error";
}
@RequestMapping("/addUser")
public String add(User user){
int i=userService.addUser(user);
if (i>0){
return "redirect:/getAll";
}
return "error";
}
@RequestMapping("/getById/{id}")
public String getById(@PathVariable("id")Integer id, Model model){
User user=userService.findById(id);
model.addAttribute("user",user);
return "update";
}
@RequestMapping("/updates")
public String updates(User user){
int i=userService.updateUser(user);
if (i>0){
return "redirect:/getAll";
}
return "error";
}
@RequestMapping("/index.html")
public String toIndex(){
return "index";
}
}
6.6在src/main/resources/mapper文件夹下新建UserMappers的映射文件UserMappers.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.p.springboottest.mapper.UserMappers">
<select id="findAllUser" resultType="User">
select * from user
</select>
<insert id="addUser" parameterType="User" useGeneratedKeys="true" keyProperty="id">
insert into `user` values (#{id},#{username},#{password},#{sex},#{age},#{email});
</insert>
<delete id="deleteUser" parameterType="Integer">
delete from `user` where id=#{id}
</delete>
<select id="findById" parameterType="Integer" resultType="User">
select * from user where id=#{id}
</select>
<update id="updateUser" parameterType="User">
update `user` set username=#{username},password=#{password},sex=#{sex},age=#{age},email=#{email}
where id=#{id}
</update>
</mapper>
6.7在src/main/resources/templates文件夹下新建查询页面index.html
1.在html根元素添加命名空间声明:xmlns:th="http://www.thymeleaf.org"
2.在html标签内引用thymeleaf的语法:th:text="${data}"
,接收key为data的数据,替换所修饰标签内的文本内容。
<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"><!--1.添加命名空间声明-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="add.html">新增</a>
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>密码</th>
<th>性别</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody th:each="user:${userList}">
<tr>
<!--2.引用thymeleaf语法-->
<th th:text="${user.id}"></th>
<th th:text="${user.username}"></th>
<th th:text="${user.password}"></th>
<th th:text="${user.sex}"></th>
<th th:text="${user.age}"></th>
<th th:text="${user.email}"></th>
<th>
<a th:href="@{'/delete/'+${user.id}}">删除</a>
<a th:href="@{'/getById/'+${user.id}}">编辑</a>
</th>
</tr>
</tbody>
</table>
</body>
</html>
6.8在src/main/resources/templates文件夹下新建新增页面add.html
<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加员工信息</title>
</head>
<body>
<h1>
添加员工信息:
</h1>
<form action="/addUser" method="post">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="right">
用户姓名:
</td>
<td valign="middle" align="left">
<input type="text" name="username" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="text" name="password" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
年龄:
</td>
<td valign="middle" align="left">
<input type="text" name="age" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
性别:
</td>
<td valign="middle" align="left">
<select name="sex">
<option value="1">男</option>
<option value="0">女</option>
</select>
</td>
</tr>
<tr>
<td valign="middle" align="right">
邮箱:
</td>
<td valign="middle" align="left">
<input type="text" name="email" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="提交" />
</p>
</form>
</body>
</html>
6.9在src/main/resources/templates文件夹下新建修改页面update.html
<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/updates" method="post">
<table cellpadding="0" cellspacing="0" border="0">
<input type="hidden" name="id" th:value="${user.id}"/>
<tr>
<td valign="middle" align="right">
用户姓名:
</td>
<td valign="middle" align="left">
<input type="text" name="username" th:value="${user.username}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="text" name="password" th:value="${user.password}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
年龄:
</td>
<td valign="middle" align="left">
<input type="text" name="age" th:value="${user.age}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
性别:
</td>
<td valign="middle" align="left">
<select name="sex">
<option th:if="${user.sex} == 1" value="1">男</option>
<option th:if="${user.sex} == 0" value="0">女</option>
</select>
</td>
</tr>
<tr>
<td valign="middle" align="right">
邮箱:
</td>
<td valign="middle" align="left">
<input type="text" name="email" th:value="${user.email}"/>
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="提交" />
</p>
</form>
</body>
</html>
7.测试
到这里就完成了增删改查操作,接下来我们对上面的代码在浏览器中进行验证
7.1查询用户信息:
7.2根据id删除用户信息:
7.3新增用户信息:
7.4根据id查询用户信息:
7.5修改用户信息: