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