當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

SpringBoot的Thymeleaf支持，结合SpringMVC做的案例（学习SpringBoot实战）

發(fā)布時(shí)間：2024/9/27 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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/> </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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：广州这边租电动车不租了退回去会不会收折旧
下一篇：可以拿塑料扫把扫小车前挡风玻璃吗用塑料把