前言
Spring-boot-starter-web集成了Tomcat以及Spring MVC，會自動配置相關東西，Thymeleaf是用的比較普遍的模板引擎javascript
1.引入依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2.在一個名爲application.propertiesde 的文件中配置Thymeleaf
server.port=8080
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.check-template-location=true
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.mode=HTML5
3.文件結構
4.Controller
package com.dlp.Controller;
import com.dlp.model.Person;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
/** * Created by Administrator on 2017/9/6. */
@Controller
public class HelloController {
@RequestMapping(value = "/index")
public String index(Model model) {
Person single = new Person("hyj",21);
List<Person> people = new ArrayList<Person>();
Person p1 = new Person("dlp",21);
Person p2 = new Person("tq",21);
Person p3 = new Person("mk",21);
people.add(p1);
people.add(p2);
people.add(p3);
model.addAttribute("singlePerson",single);
model.addAttribute("people",people);
return "index";
}
}
這裏使用@Controller而不用@RESTController是由於這裏返回一個頁面而不是一個值，若是隻是使用@RestController註解Controller，則Controller中的方法沒法返回jsp頁面，配置的視圖解析器InternalResourceViewResolver不起做用，返回的內容就是Return 裏的內容。css
5.Model類
package com.dlp.model;
/** * Created by Administrator on 2017/9/6. */
public class Person {
private String name;
private Integer age;
public Person() {
super();
}
public Person(String name,Integer gae) {
super();
this.name=name;
this.age=gae;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name=name;
}
public Integer getAge() {
return age;
}
public Integer setAge(Integer age) {
return age;
}
}
6.index頁面
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/bootstrap/css/bootstrap-theme.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="${singlePerson.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:onlick="'getName(\''+${person.name}+'\');'">得到名字</button>
</li>
</ul>
</div>
</div>
</div>
<script th:src="@{/jquery/jquery-3.2.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:inline="javascript"> var single = [[${singlePerson}]]; console.log(single.name+"/"+single.age); function getName(name) { console.log(name); } </script>
</body>
</html>
xmlns:th="http://www.thymeleaf.org"命名空間，將鏡頭轉化爲動態的視圖，須要進行動態處理的元素使用「th:」前綴；兩個link引入bootstrap框架，經過@{}引入web靜態資源（括號裏面是資源路徑）訪問model中的數據經過${}訪問，案例html
7.運行
