當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
SpringBoot的Thymeleaf支持，结合SpringMVC做的案例（学习SpringBoot实战）
生活随笔
收集整理的這篇文章主要介紹了
SpringBoot的Thymeleaf支持，结合SpringMVC做的案例（学习SpringBoot实战）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、創(chuàng)建SpringBoot項(xiàng)目
創(chuàng)建項(xiàng)目可以參考：http://blog.csdn.net/tototuzuoquan/article/details/78167839中通過(guò)Spring Initializr創(chuàng)建項(xiàng)目的過(guò)程。
在這個(gè)過(guò)程中的選擇thymeleaf模板引擎。
2、創(chuàng)建好之后的目錄結(jié)構(gòu)：
3、pom.xml的內(nèi)容
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.wisely</groupId><artifactId>ch7_2</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>ch7_2</name><description>Demo project for Spring Boot</description><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.7.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build> </project>4、Person的內(nèi)容如下
package com.wisely;public class Person {private String name;private Integer age;public Person() {}public Person(String name, Integer age) {this.name = name;this.age = age;}public String getName() {return name;}public Integer getAge() {return age;}public void setName(String name) {this.name = name;}public void setAge(Integer age) {this.age = age;} }5、Ch72Application的內(nèi)容如下
package com.wisely;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;import java.util.ArrayList; import java.util.List;@Controller @SpringBootApplication public class Ch72Application {@RequestMapping("/")public String index(Model model) {Person single = new Person("aa",11);List<Person> people = new ArrayList<Person>();Person p1 = new Person("xx",11);Person p2 = new Person("yy",22);Person p3 = new Person("zz",33);people.add(p1);people.add(p2);people.add(p3);model.addAttribute("singlePerson", single);model.addAttribute("people", people);return "index";}public static void main(String[] args) {SpringApplication.run(Ch72Application.class, args);} }6、index.html的內(nèi)容如下：
其中jQuery和bootstrap的包不引入
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head><meta content="text/html;charset=UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><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"/><title>Title</title> </head> <body><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">訪問(wèn)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="personItem:${people}"><span th:text="${personItem.name}"></span><span th:text="${personItem.age}"></span><button class="btn" th:onclick="'getName(\'' + ${personItem.name} + '\');'">獲得名字</button></li></ul></div></div></div><script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></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>7、運(yùn)行
在瀏覽器中輸入：http://localhost:8080/，效果如下：
參考文章：
關(guān)于thymeleaf的知識(shí)，可以訪問(wèn)：http://www.thymeleaf.org的官網(wǎng)
總結(jié)
以上是生活随笔為你收集整理的SpringBoot的Thymeleaf支持，结合SpringMVC做的案例（学习SpringBoot实战）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 广州这边租电动车不租了退回去会不会收折旧
- 下一篇： 可以拿塑料扫把扫小车前挡风玻璃吗用塑料把