简单介绍Thymeleaf模板引擎

模板引擎

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,根据网站的模板引擎会生成一个标准的HTML文档。

Thymeleaf特点

Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,可以处理HTML、XML、JavaScript、CSS甚至存文本。

Thymeleaf跟JSP有点相同,但却有所不同,JSP支持Web服务器端动态是一个动态网页的开发,Thymeleaf是一个模板引擎,通过静态网页HTML的模式,JSP有一点不好,因为JSP会受一些限制。

Thymeleaf使用的话成本低、易于前端人员的开发。

快速上手

• 使用什么构建项目:Spring Boot
• 使用jar还是导入依赖:Maven3.6版本通过导入依赖的方式

1. 创建项目已省略:创建Spring Boot项目详情步骤

2. 添加依赖:

 <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>

3. 添加配置:

#端口号
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

接下来我们测试一波,不然我讲这么多就感觉在故作玄虚

4. 准备好我们的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();
}

5. 实现类:

@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);
    }
}

6. 持久层: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方法
 }

7. 控制器: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";
    }
}

8. 页面开发: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>

9. 测试结果:
   

总结一下:使用了Thymeleaf相对于JSP就少了很多的代码,对于前端开发者而言就提高了很多的效率,减少了更多的成本。