SpringBoot 学习教程(三):Thymeleaf模板引擎
Web开发的核心内容主要包括内嵌Servlet容器和Spring MVC
Thymeleaf的官方例子https://github.com/thymeleaf/thymeleafexamples-petclinic
(一)Thymeleaf基础知识
Thymeleaf是一个java类库,他是一个xml/xhtml/html5的模板引擎,且提供额外的模块与Spring MVC集成,可以作为MVC的Web应用的View层,取代jsp。
1.引入Thymeleaf
通过命名空间xmlns:th=http://www.thymeleaf.org,将静态页面转换为动态视图,th:前缀
2.访问Model的数据
通过“${}”访问model中的属性
3.Model中的数据迭代
与jsp类似
4.数据判断
e.g.<div th:if="${not # lists.isEmpty(people)}">
${not # lists.isEmpty(people)}表达式判断people是否为空
5.在JavaScript中访问model
<th:inline="javascript">
e.g.var single = [[${singlePerson}]];
[[${}]]格式获得实际的值
(二)Spring boot实例
1.创建项目时添加Thymeleaf依赖,会自动包含spring-boot-starter-web
2.JavaBean
Person.java
package com; public class Person { private String name; private Integer age; public Person(){ } public Person(String name, Integer age) { super(); this.name = name; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } }
3.演示页面
haha.html放置在src/main/resources/templates下
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <div> <span th:text="${singlePerson.name}"></span> </div> <div th:if="${not # lists.isEmpty(people)}"> <h3 >列表</h3> </div> <div> <ul> <li th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> <button th:onclick="'getName(\'' + ${person.name} + '\');'">获取名字</button> </li> </ul> </div> <script th:inline="javascript"> var single = [[${singlePerson}]]; alert(single.name +"/" + single.age); function getName(name){ alert(name); } </script> </body> </html>
application.properties默认配置如下,根据需求修改
# THYMELEAF (ThymeleafAutoConfiguration) spring.thymeleaf.cache=true # Enable template caching. spring.thymeleaf.check-template=true # Check that the template exists before rendering it. spring.thymeleaf.check-template-location=true # Check that the templates location exists. spring.thymeleaf.content-type=text/html # Content-Type value. spring.thymeleaf.enabled=true # Enable MVC Thymeleaf view resolution. spring.thymeleaf.encoding=UTF-8 # Template encoding. spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution. spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers. spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL. spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL. spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain. spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.
5.数据及程序入口
ThymeleafdemoApplication.java
package com; import java.util.ArrayList; import java.util.List; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller @SpringBootApplication public class ThymeleafdemoApplication { @RequestMapping("/") public String index(Model model){ Person single = new Person("aa",11); List<Person> people = new ArrayList<Person>(); people.add(new Person("xx",11)); people.add(new Person("yy",22)); people.add(new Person("zz",33)); model.addAttribute("people", people); model.addAttribute("singlePerson", single); return "haha"; } public static void main(String[] args) { SpringApplication.run(ThymeleafdemoApplication.class, args); } }
运行——结果
1.访问http://localhost:8080
2.弹出窗口,获取到single对象的属性(name,age)
3.单机获取名字,取得对应model的name