Spring Boot 整合 freemarker 和 thymeleaf 模板引擎 (第四章)

一、简单介绍freemarker 和 thymeleaf

SpringBoot推荐的模板引擎有两种:freemarker和thymeleaf。freemaker性能比thymeleaf好，模板必须符合xml规范。 thymeleaf由于使用了标签属性做为语法，模版页面直接用浏览器渲染，使得前端和后端可以并行开发。freemarket使用</>这样的语法，就无法直接使浏览器渲染出原本页面的样子。thymeleaf更合适前后联调，值的绑定都是基于html的dom元素属性的。

二、Spring Boot整合 freemarker 模板

1、pom.xml加入freemarker依赖

<!-- 引入freemarker包 -->
    <dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-freemarker</artifactId>
	</dependency>

2、application.yml加入freemarker配置

freemarker:
    allow-request-override: false
    cache: false
    check-template-location: true
    charset: UTF-8
    content-type: text/html; charset=utf-8
    expose-request-attributes: false
    expose-session-attributes: false
    expose-spring-macro-helpers: false
    suffix: .ftl
    template-loader-path: classpath:/templates

3、新建 IndexController类添加indexFre方法

@Controller
@RequestMapping(value = "/userIndex")
public class IndexController {

    @Autowired
    private UserInfoService userInfoService;

    /**
     * freemarker模板
     * @param modelAndView
     * @return
     */
    @RequestMapping(value = "/indexFre")
    public ModelAndView indexFre(ModelAndView modelAndView) {
        //设置返回的页面名称
        modelAndView.setViewName("indexFre");
        //要返回在页面的数据
        List<UserInfo> userList =  userInfoService.findUserInfo();
        modelAndView.addObject("userList", userList);
        return modelAndView;
    }

}

4、在resources/templates下新建 indexFre.ftl文件

<!DOCTYPE html>
<html>
<head lang="en">
    <title>SpringBoot整合Freemarker</title>
</head>
<body>
<h2>SpringBoot整合Freemarker<h2>

    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <#list userList as user>
            <tr>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.sex}</td>
            </tr>
        </#list>
    </table>
</body>
</html>

启动服务访问：http://localhost:8086/userIndex/indexFre

三、Spring Boot整合 thymeleaf 模板

1、pom.xml加入 thymeleaf 依赖

<!--引入thymeleaf的依赖-->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>

2、application.yml加入thymeleaf配置

thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encodin: UTF-8
    content-type: text/html
    cache: false

3、在新建的 IndexController类中添加 indexThy 方法

@Controller
@RequestMapping(value = "/userIndex")
public class IndexController {

    @Autowired
    private UserInfoService userInfoService;

    /**
     * thymeleaf模板
     * @param modelAndView
     * @return
     */
    @RequestMapping(value = "/indexThy")
    public ModelAndView indexThy(ModelAndView modelAndView) {
        //设置返回的页面名称
        modelAndView.setViewName("indexThy");
        //要返回在页面的数据
        List<UserInfo> userList =  userInfoService.findUserInfo();
        modelAndView.addObject("userList", userList);
        return modelAndView;
    }

}

4、在resources/templates下新建 thymeleaf.html文件

注：th:each是 thymeleaf模板的语法。如： th:if条件判断

<!DOCTYPE html>
<html>
<head lang="en">
    <title>SpringBoot整合thymeleaf</title>
</head>
<body>
<h2>SpringBoot整合thymeleaf<h2>

    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <!--循环userList-->
        <tr th:each="user:${userList}">
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.sex}"></td>
        </tr>
    </table>
</body>
</html>

启动服务访问：http://localhost:8086/userIndex/indexThy

项目目录图：

学如逆水行舟，不进则退。心似平原跑马，易放难收。全栈工程师是指掌握多种技能，并能利用多种技能独立完成产品的人。也叫全端工程师(同时具备前端和后台能力)，英文Full Stack engineer。【人工智能】【区块链】【系统/网络/运维】【云计算/大数据】【数据库】【移动开发】【后端开发】【游戏开发】【UI设计】【微服务】【爬虫】【Java】【Go】【C++】【PHP】【Python】【Android/IOS】【HTML/CSS】【JavaScript】【Node】。。。

欢迎各位大神萌新一起专研分享各行各业技术!

IT全栈工程师技术交流群：593674370