Springboot用官方建議訪問Html頁面並接傳值
https://www.jianshu.com/p/198497e08e00
特別強調:啟動類和所有的controller service mapper等包必須位於同一個主包下(同一個包中),而且啟動類在最外面,否則這些層都掃不到,不報錯,但是無法實現我們的功能,要非常注意
我們以前通常習慣用webapp來放置jsp頁面,但是到了Springboot中,官方建議用Static文件夾來存放及靜態的資源,
用templates來存放可供訪問的Html資源頁面,具體的操作如下.
1.加入所需要的POM依賴
<!--添加static和templates的依賴--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> pom的依賴添加完成后會在resources的文件夾下面生成Static和templates的文件夾
2.增加yml文件配置
spring
thymeleaf:
prefix: classpath:/templates/ 3.在templates中添加html的頁面:
index.html:
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>第一個HTML頁面</title> </head> <body> <h1>Hello Spring Boot!!!</h1> <p th:text="${hello}"></p> <div> <p th:text="${say}"></p> </div> </body> </html> 4.編寫controller層
HelloController:
import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import java.util.HashMap; @Controller //注意這里必須為Controller public class HelloController { /** * 本地訪問內容地址 ：http://localhost:8080/hello * @param map * @return */ @RequestMapping("/hello") public String helloHtml(HashMap<String, Object> map, Model model) { model.addAttribute("say","歡迎歡迎,熱烈歡迎"); map.put("hello", "歡迎進入HTML頁面"); return "index"; } } 5.完成后啟動項目,訪問http://localhost:8080/hello,能看到如下頁面:
image.png
這里static主要存放css js等靜態資源文件 不做過多的講述,主要來講講templates中html的Thymeleaf的屬性,這里也是困擾我一段時間的地方,當然Springboot用Thymeleaf的原因主要是為了簡化代碼,用習慣了其實都挺不錯的.
static下的靜態頁面:
static.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>這是一個靜態頁面 可以直接訪問!</h2> </body> </html> 直接訪問http://localhost:8080/static.html即可:
image.png
6.動態templates下存放的頁面常用的th標簽
常用th標簽都有那些？
關鍵字 功能介紹 案例
th:id 替換id <input th:id="'xxx' + ${collect.id}"/> th:text 文本替換 <p th:text="${collect.description}">description</p> th:utext 支持html的文本替換 <p th:utext="${htmlcontent}">conten</p> th:object 替換對象 <div th:object="${session.user}"> th:value 屬性賦值 <input th:value="${user.name}" /> th:with 變量賦值運算 <div th:with="isEven=${prodStat.count}%2==0"></div> th:style 設置樣式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" th:onclick 點擊事件 th:onclick="'getCollect()'" th:each 屬性賦值 tr th:each="user,userStat:${users}"> th:if 判斷條件 <a th:if="${userId == collect.userId}" > th:unless 和th:if判斷相反 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> th:href 鏈接地址 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> th:switch 多路選擇 配合th:case 使用 <div th:switch="${user.role}"> th:case th:switch的一個分支 <p th:case="'admin'">User is an administrator</p> th:fragment 布局標簽，定義一個代碼片段，方便其它地方引用 <div th:fragment="alert"> th:include 布局標簽，替換內容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> th:replace 布局標簽，替換整個標簽到引入的文件 <div th:replace="fragments/header :: title"></div> th:selected selected選擇框 選中 th:selected="(${xxx.id} == ${configObj.dd})" th:src 圖片類地址引入 <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /> th:inline 定義js腳本可以使用變量 <script type="text/javascript" th:inline="javascript">6.1 th:text
可對表達式或變量求值，並將結果顯示在其被包含的 html 標簽體內替換原有html文本。
文本鏈接: 用 "+" 符號，若是變量表達式也可以用“|”符號
eg.
<p th:text="#{home.welcome}">Welcome to our grocery store!</p> equals.(局限：只能在html5中使用)
<p data-th-text="#{home.welcome}">Welcome to our grocery store!</p> - The
th:textattribute, which evaluates its value expression and sets the result as the body of the host tag, effectively replacing the “Welcome to our grocery store!” text we see in the code.（th：text屬性，他聲明設置表達式的值，並使表達式返回的值來填充標簽內容，替換或設置標簽內部的內容，當前例子中即替換“歡迎光臨本店”這些字。） - The
#{home.welcome}expression, specified in the Standard Expression Syntax, instructing that the text to be used by theth:textattribute should be the message with thehome.welcomekey corresponding to whichever locale we are processing the template with.（#{home.welcome}表達式，一個標准的表達式語法，指出在模板中，th:text屬性所對應Message的key，即使用home.welcome對應的value替換現有內容。）
6.2 th:utext（非轉義文本：unescaped text）
e.g.（想要輸出轉義字符效果）
home.welcome=Welcome to our <b>fantastic</b> grocery store! 執行此模板，默認使用<p th:text="#{home.welcome}"></p>來解析，結果為：
<p>Welcome to our <b>fantastic</b> grocery store!</p> 解決方案：（This is the default behaviour of the th:text attribute. If we want Thymeleaf to respect our HTML tags and not escape them, we will have to use a different attribute: th:utext (for “unescaped text”):）
使用<p th:utext="#{home.welcome}"></p>即可。
<p th:utext="#{home.welcome}">Welcome to our grocery store!</p> 等效於html：
<p>Welcome to our <b>fantastic</b> grocery store!</p>
6.3 th:href
@{xxx} ：鏈接url的表達式
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>作者：城南少年與貓
鏈接：https://www.jianshu.com/p/198497e08e00
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。