SpringBoot整合之使用Thymeleaf，Freemarker

最新推荐文章于 2023-08-29 14:48:03 发布

youngljx

最新推荐文章于 2023-08-29 14:48:03 发布

阅读量162

点赞数

分类专栏： SpringBoot Thymeleaf

本文链接：https://blog.csdn.net/YOUNGljx/article/details/104910941

版权

SpringBoot 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Thymeleaf

3 篇文章 0 订阅

订阅专栏

一个Java小白的学习之路个人博客 youngljx.top

模板引擎Thymeleaf，Freemarker

jsp是在服务端渲染，模板引擎是在客户端渲染，效率更高
Spring目前亲儿子是thymeleaf，以后不知道，后缀是html。

1.SpringBoot整合Freemarker

引入freemarker模板依赖

<dependency>
	<groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

freemarker静态资源配置(application.properties)

#设定ftl文件路径,所有页面文件放到templates中
spring.framemarker.template-loader-path=classpath:/templates

#关闭缓存，即时刷新，上线生产环境需要改为true
spring.framemarker.cache=false
spring.framemarker.charset=UTF-8
spring.framemarker.check-template-location=true
spring.framemarker.content-type=text/html
spring.framemarker.expose-request-attributes=true
spring.framemarker.expose-session-attributes=true
spring.framemarker.request-context-attribute=request
#文件后缀.ftl
spring.framemarker.suffix=.ftl

测试部分
创建freemarker.index.ftl页面和freemarker.content.content.ftl页面

<!-- index.ftl -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
index页面
</body>
</html>

<!-- content.ftl -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Content页面-ss
${resource.name}
${resource.age}
</body>
</html>

创建controller内容

package com.example.demo2.controller;
import com.example.demo2.domain.Resource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class testFreemarker {
    @Autowired
    private Resource resource;
    @RequestMapping("index")
    public String toIndex(){
        System.out.println("进来index");
        return "freemarker/index";
    }
    @RequestMapping("toContent")
    public String toContent(ModelMap map){//ModelMap相当于SpringMVC中的ModelAndView
        map.addAttribute("resource",resource);
        return "freemarker/content/content";
    }
}

2、SpringBoot整合Thymeleaf

引入thymeleaf模板依赖

   <!-- 首先引入springboot整合thymeleaf依赖 -->
    <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

thymeleaf静态资源配置(application.properties)

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#关闭缓存，即时刷新，上线生产环境需要改为true
spring.thymeleaf.cache=false

测试部分
创建thymeleaf.index.html页面和thymeleaf.content.content.html页面

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
thymeleaf:index页面
</body>
</html>

<!-- content.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
thymeleaf:Content页面-ss
<h1 th:text="${name}">hello jack</h1>
</body>
</html>

controller内容

package com.example.demo2.controller;
import com.example.demo2.domain.Resource;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class testThymeleaf {
    @RequestMapping("thymeleaf/index")
    public String toIndex(){
        return "thymeleaf/index";
    }

    @RequestMapping("thymeleaf/toContent")
    public String toContent(ModelMap map){
        map.addAttribute("name","jack");
        return "thymeleaf/content/content";
    }
}

参考 SpringBoot整合模板引擎

thymeleaf常用标签的使用方法
时间类型转换

 <div>
    <input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
    <input th:value="${#dates.format(user.birthday,'dd/MM/yyyy')}"/>
</div>

参考笔记 Thymeleaf 之基本用法和常见错误

补充：使用示例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" type="text/css"/>
</head>

<body class="container">
<br/>
<h1>修改用户信息</h1>
<br/><br/>
<div class="with:80%">
            <form class="form-horizontal" th:action="@{/edit}" th:object="${user}" method="post">
                <input type="hidden" name="id" th:value="*{id}"/>
                <div class="form-group">
                    <label for="userName" class="col-sm-2 control-label">userName</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="userName" id="userName" th:value="*{userName}"
                               placeholder="userName"/>
                    </div>
                </div>
                <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" id="password" th:value="*{password}"
                       placeholder="Password"/>
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">age</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="Submit" class="btn btn-info"/>
                &nbsp; &nbsp; &nbsp;
                <a th:href="@{/list}" class="btn btn-info">Back</a>
        </div>

        </div>
    </form>
</div>
</body>
</html>

youngljx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot整合之使用Thymeleaf，Freemarker

SpringBoot整合Thymeleaf1、pom.xml配置依赖  <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spr...
复制链接

扫一扫