Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。可以完全替代JSP。
Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
那么Spring Boot怎样和thymeleaf整合呢?
首先新建maven项目,导入spring boot的依赖
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.8.RELEASE</version> </parent>
导入thymeleaf starter pom依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
在src/main/resources下新建static目录(存放js、css、图片等静态资源)和templates目录(存放展示模板,如html等),将bootstrap相关的js、css放入到static下
新建Person类,作为数据载体
package com.spring.boot.web.model; public class Person { private String name; private int age; public Person(String name,int age) { this.name = name; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } }
新建WebController类,指定入口方法,向模板填充数据
package com.spring.boot.web.controller; import java.util.ArrayList; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import com.spring.boot.web.model.Person; @Controller public class WebController { @RequestMapping("/") public String index(Model model){ Person onePerson = new Person("微儿博客", 18); List<Person> list = new ArrayList<Person>(); Person p1 = new Person("张三", 18); Person p2 = new Person("李四", 19); Person p3 = new Person("王五", 20); list.add(p1); list.add(p2); list.add(p3); model.addAttribute("oneperson", onePerson);//向模板传数据 model.addAttribute("people", list); return "index";//找到名为index.*的模板 } }
在src/main/resources/templates下新建index.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>test</title> <link th:href="@{css/bootstrap.min.css}" rel="stylesheet"/> </head> <body> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">访问model</h3> </div> <div class="panel-body"> <span th:text="${oneperson.name}"></span> </div> </div> <div th:if="${not #lists.isEmpty(people)}"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">列表</h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item" th:each="person:${people}"> <span th:text="${person.name}"></span> <span th:text="${person.age}"></span> <button class="btn" th:οnclick="'getName(\''+${person.name}+'\');'">获取名字</button> </li> </ul> </div> </div> </div> <script type="text/javascript" th:src="@{js/jquery-1.12.3.min.js}"></script> <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script> <script th:inline="javascript"> function getName(name){ alert(name); } </script> </body> </html>
创建执行类Main
package com.spring.boot.web; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class Main { public static void main(String[] args) { SpringApplication.run(Main.class, args); } }
执行,访问localhost:8080
更多文章请访问 http://www.weare.net.cn