Web模塊:spring-boot-starter-web


  1. spring-boot-autoconfigure-1.5.1.RELEASE.jar!/org/springframework/boot/autoconfigure/web
上述jar的web包下,編寫了自動配置Web項的邏輯
 
下面列舉常用的幾個類
ServerPropertiesAutoConfiguration和ServerProperties,自動配置內嵌Servlet容器
HttpEncodingAutoConfiguration和HttpEncodingProperties,自動配置http編碼,默認utf-8
MultipartAutoConfiguration和MultipartProperties,自動配置文件上傳
JacksonHttpMessageConvertersConfiguration,自動配置MappingJackson2HttpMessageConverterConfiguration與MappingJackson2XmlHttpMessageConverterConfiguration
WebMvcAutoConfiguration和WebMvcProperties,自動配置Spring MVC
 

Spring Boot推薦使用Thymeleaf作為模板引擎,其提供了完美的Spring MVC支持、

 

內嵌Tomcat、Jetty無法執行jar形式的jsp;Undertow不支持JSP

 

  • Thymeleaf頁面基本樣式
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>首頁</title>
  6. <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
  7. <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
  8. <script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script>
  9. <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
  10. </head>
  11. <body>
  12. Hello World
  13. </body>
  14. </html>
xmlns:th="http://www.thymeleaf.org" 引入Thymeleaf命名空間,將靜態頁面轉化成動態頁面。需要動態處理的元素將使用 th: 作為前綴
@{bootstrap/js/bootstrap.min.js} 引入Web靜態資源
 
  • 訪問model中元素屬性
  1. <div class="panel panel-primary">
  2. <div class="panel-heading">
  3. <h3 class="panel-title">訪問model</h3>
  4. </div>
  5. <div class="panel-body">
  6. <span th:text="${singlePerson.name}"></span>
  7. </div>
  8. </div>
訪問model中singlePerson的name屬性。這里需要為text屬性添加th:前綴
 
  • 迭代元素
  1. <ul class="list-group">
  2. <li class="list-group-item" th:each="person:${people}">
  3. <span th:text="${person.name}"></span>
  4. <span th:text="${person.age}"></span>
  5. <button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">獲得名字</button>
  6. </li>
  7. </ul>
th:each做循環迭代person作為迭代元素,${person}訪問model中元素
 
  • 空判斷
  1. <div th:if="${not #lists.isEmpty(people)}">
  2. </div>
判斷person是否為空,Thymeleaf支持>、<、>=、<=、==、!=、SpEL表達式
 
  • JavaScript中訪問model中元素
  1. <script th:inline="javascript">
  2. var single = [[${singlePerson}]];
  3. console.log(single.name+"/"+single.age)
  4. function getName(name){
  5. console.log(name);
  6. }
  7. </script>
使用[[${modelName}]]獲取model中的元素值
 
 
  •  Thymeleaf與Spring MVC集成

pom

 

  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4. </dependency>
引入默認靜態文件
靜態文件包括 腳本、樣式、圖片,默認在src/main/resources/static下
 

編寫Thymeleaf模板
默認位置在  templates
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>測試頁面</title>
<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet"/>
<script th:src="@{jquery-1.10.2.min.js}" type="text/javascript"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

</head>
<body>
Hello World<br/>

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">訪問model</h3>
</div>
<div class="panel-body">
<!--/*@thymesVar id="singlePerson" type=""*/-->
<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:onclick="'getName(\'' + ${person.name} + '\');'">獲得名字</button>
</li>
</ul>
</div>
</div>
</div>

<script th:inline="javascript">
var single = [[${singlePerson}]];
console.log(single.name + "/" + single.age);

function getName(name) {
console.log(name);
}
</script>

</body>
</html>





 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM