Thymeleaf介绍
模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,根据网站的模板引擎会生成一个标准的HTML文档。
Thymeleaf特点
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,可以处理HTML、XML、JavaScript、CSS甚至存文本。
Thymeleaf跟JSP有点相同,但却有所不同,JSP支持Web服务器端动态是一个动态网页的开发,Thymeleaf是一个模板引擎,通过静态网页HTML的模式,JSP有一点不好,因为JSP会受一些限制。
Thymeleaf使用的话成本低、易于前端人员的开发。
快速上手
- 使用什么构建项目:Spring Boot
- 使用jar还是导入依赖:Maven3.6版本通过导入依赖的方式
-
创建项目已省略:创建Spring Boot项目详情步骤
-
添加依赖:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--模板引擎的依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
<version>5.1.18</version>
</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>
<fork>true</fork>
</configuration>
</plugin>
</plugins>
</build>
- 添加配置:
#端口号
server.port=8080
#数据库驱动
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#数据库路径
spring.datasource.url=jdbc:mysql://localhost:3306/crm?useUnicode=true&characterEncoding=utf-8
#数据库登录密码
spring.datasource.username=root
#数据库登录账号
spring.datasource.password=123456
#输出日志
logging.level.root=warn
logging.level.com.aiweiyi.qingjing.task=trace
logging.pattern.console=%p%m%n
#关闭thymeleaf缓存
spring.thymeleaf.cache=false
#thymeleaf默认访问类型
spring.thymeleaf.mode=HTML5
#thymeleaf访问路径请求
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf默认访问的后缀名
spring.thymeleaf.suffix=.html
接下来我们测试一波,不然我讲这么多就感觉在故作玄虚
- 准备好我们的model业务逻辑层也就是我们的(service)
public interface UserService {
//登录
public User login(String usrName, String usrPassword);
//新增用户
public int addUser(User user);
//删除用户
public int deleteUser(Long usrId);
//修改用户
public int updateUser(User user);
//根据主键Id查询用户信息
public User getUser(Long usrId);
//查询所有用户信息
public List<User> findAllUsers();
}
- 实现类:
@Service("userService")
public class UserServiceImpl implements UserService {
@Resource
private UserMapper userMapper;
@Override
public User login(String usrName, String usrPassword) {
QueryWrapper<User> query = new QueryWrapper<User>();
query.eq("usr_name", usrName);
query.eq("usr_password", usrPassword);
return userMapper.selectOne(query);
}
@Override
public int addUser(User user) {
return userMapper.insert(user);
}
@Override
public int deleteUser(Long usrId) {
return userMapper.deleteById(usrId);
}
@Override
public int updateUser(User user) {
return userMapper.updateById(user);
}
@Override
public User getUser(Long usrId) {
return userMapper.selectById(usrId);
}
@Override
public List<User> findAllUsers() {
return userMapper.selectList(null);
}
}
- 持久层:pojo
@TableName("sys_user")
public class User implements Serializable {
@TableId(type = IdType.AUTO)
@TableField("usr_id")
private Long usrId;
@TableField("usr_name")
private String usrName;
@TableField("usr_Password")
private String usrPassword;
@TableField("usr_role_id")
private Long usrRoleId;
@TableField("usr_flag")
private Integer usrFlag;
public User() {
}
public User(Long usrId, String usrName, String usrPassword, Long usrRoleId, Integer usrFlag) {
this.usrId = usrId;
this.usrName = usrName;
this.usrPassword = usrPassword;
this.usrRoleId = usrRoleId;
this.usrFlag = usrFlag;
}
//省略getter和setter方法
}
- 控制器:controller
@Controller
public class ExampleController {
@Resource
private UserService userService;
@GetMapping(value = "/hello/{id}")
//根据id查询显示数据
public String getUser(@PathVariable("id") Long usrId, Model model) {
User user = userService.getUser(usrId);
model.addAttribute("user", user);
return "demo/hello";
}
}
- 页面开发:thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
欢迎您,<span th:text="${user.usrName}">usrName</span>!
</body>
</html>
- 测试结果:
总结一下:使用了Thymeleaf相对于JSP就少了很多的代码,对于前端开发者而言就提高了很多的效率,减少了更多的成本。