springboot2.x——thymeleaf引擎模板
springboot2.x——thymeleaf引擎模板
java的引擎模板主要有:thymeleaf、freemarker、volecity等等,有兴趣的可以去了解另外两个模板,此处只说thymeleaf。(三者的优点与缺点:https://blog.csdn.net/ztchun/article/details/76407612)
thymeleaf是什么?
-
1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
-
2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
-
3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
springboot为什么推荐使用thymeleaf?
- 提供了完美的springmvc支持
- thymeleaf既是原型又是页面,开发速度更快,符合springboot的理念。
pom.xml引入thymeleaf依赖:
nekohtml依赖:非严格的Html严格
创建application.properties文件(此处,为了方便阅读,实际开发会使用yml文件)
yml语法需要注意一点:格式需要对齐,请勿使用tab键!!!!
spring:
thymeleaf:
cache: false # 开发时关闭缓存,不然没法看到实时页面
mode: LEGACYHTML5 # 用非严格的 HTML
encoding: UTF-8
servlet:
content-type: text/html
server:
port: 9090 #更改tomcat端口
一个简单的测试用例:创建一个javaBean和对应的controller
User.java
1 package com.baiye.springboothello.entity; 2 3 public class User { 4 private Long id; 5 private String userName; 6 private int age; 7 8 9 public User() { 10 11 } 12 13 public User(Long id, String userName, int age) { 14 this.id = id; 15 this.userName = userName; 16 this.age = age; 17 } 18 19 public Long getId() { 20 return id; 21 } 22 23 public void setId(Long id) { 24 this.id = id; 25 } 26 27 public String getUserName() { 28 return userName; 29 } 30 31 public void setUserName(String userName) { 32 this.userName = userName; 33 } 34 35 public int getAge() { 36 return age; 37 } 38 39 public void setAge(int age) { 40 this.age = age; 41 } 42 }
UserController.java
1 package com.baiye.springboothello.controller; 2 3 import com.baiye.springboothello.entity.User; 4 import org.springframework.stereotype.Controller; 5 import org.springframework.ui.Model; 6 import org.springframework.web.bind.annotation.RequestMapping; 7 import org.springframework.web.bind.annotation.RequestMethod; 8 9 import java.util.ArrayList; 10 import java.util.List; 11 12 @Controller 13 public class UserController { 14 @RequestMapping(value = "/getUserInfo",method = RequestMethod.GET) 15 public String getUserInfo(Model model){ 16 User user = new User(100L,"admin",18); 17 User user2 = new User(101L,"李四",19); 18 User user3 = new User(102L,"张三",20); 19 User user4 = new User(103L,"王五",21); 20 List<User> list = new ArrayList<>(); 21 list.add(user2); 22 list.add(user3); 23 list.add(user4); 24 model.addAttribute("user",user); 25 model.addAttribute("list",list); 26 return "userInfo"; 27 } 28 }
对于前端的文件:html、css、js等静态文件,springboot推荐存存放于resources目录下的static中,但是这里我们使用了thymeleaf引擎模板,因此html应该放在resources下另一个目录中——template下:
userInfo.html
1 <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello Thymeleaf</title> 6 </head> 7 <body> 8 <div> 9 <span>访问 Model:</span><span th:text="${user.userName}"></span> 10 </div> 11 <div> 12 <span>访问列表</span> 13 <table> 14 <thead> 15 <tr> 16 <th>编号</th> 17 <th>姓名</th> 18 <th>年龄</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr th:each="item : ${list}"> 23 <td th:text="${item.id}"></td> 24 <td th:text="${item.userName}"></td> 25 <td th:text="${item.age}"></td> 26 </tr> 27 </tbody> 28 </table> 29 </div> 30 </body> 31 </html>
所有的引擎模板都需要引入,themeleaf不例外,请在头部引入:<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
themeleaf更多的标签学习:https://blog.csdn.net/u014042066/article/details/75614906
启动main函数,注意端口的改变,运行结果如下: