第六章：thymeleaf頁面模版-1. 信息輸出

時間 2019-11-13

標籤第六 thymeleaf 頁面模版信息輸出简体版

原文原文鏈接

在整個的springboot之中支持最好的頁面顯示模板就是thymeleaf,並且使用此開發模板能夠徹底避免掉JSP存在最大的敗筆在於不少人在jsp文件裏面編寫過多的Scriptle代碼，這種結構不方便維護和閱讀。並且在編寫JSP的時候你會發現你必需要導入一些標籤庫等等概念，全部如今有個更加簡化的thymeleaf 開發框架實現javascript

2.1信息顯示html

在MVC的設計開發過程之中，不少狀況下都須要經過控制器將一些顯示的內容交給頁面來完成，因此首先來觀察一個最簡單的信息顯示。
2.1 顯示一個普通的文本信息java

如今假設說在控制器裏面傳輸了一些簡單的信息內容:web

package cn.mldn.microboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import cn.mldn.microboot.util.controller.AbstractBaseController;

@Controller
public class MessageController extends AbstractBaseController {
	
	@RequestMapping(value = "/show", method = RequestMethod.GET)
	public String show(String mid, Model model) { // 經過model能夠實現內容的傳遞
		model.addAttribute("url", "www.mldn.cn"); // request屬性傳遞包裝
		model.addAttribute("mid", mid); // request屬性傳遞包裝
		return "message/message_show"; // 此處只返回一個路徑， 該路徑沒有設置後綴，後綴默認是*.html
	}
}

然後在message_show.html 頁面裏面要進行數據顯示時只須要經過「${屬性名稱} 」便可完成spring

message_show.html安全

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>SpringBoot模版渲染</title>
	<link rel="icon" type="image/x-icon" href="/images/mldn.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<p th:text="'官方網站：' + ${url}"/>
	<p th:text="'用戶名：' + ${mid}"/>
</body>
</html>

發如今"p"元素之中出現有一個熟悉 th:text 而這個th 就是thymeleaf的支持語法表示顯示的是一個普通的文本信息；springboot

2. 在正規的開發環境下控制器傳遞過來的內容只有核心文本，可是能不能傳遞帶有樣式或者是html標籤的數據呢?下面來作一個驗證處理app

寫一個操做方法名字爲showStyles方法框架

package cn.mldn.microboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import cn.mldn.microboot.util.controller.AbstractBaseController;

@Controller
public class MessageController extends AbstractBaseController {
	@RequestMapping(value = "/message/showStyle", method = RequestMethod.GET)
	public String showStyle(Model model) { // 經過model能夠實現內容的傳遞
		model.addAttribute("url", "<span style='color:red'>www.mldn.cn</span>"); // request屬性傳遞包裝
		return "message/message_show_style"; 
	}
}

編寫message/message_show_style.html頁面jsp

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>SpringBoot模版渲染</title>
	<script type="text/javascript" th:src="@{/js/main.js}"></script> 
	<link rel="icon" type="image/x-icon" href="/images/mldn.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<a href="aa.html" th:href="@{/show}">訪問</a>
	<hr/>
	<p th:text="'官方網站：' + ${url}"/>
	<p th:utext="'官方網站：' + ${url}"/>
</body>
</html>

若是從安全的角度來說確定使用"th:text"的處理方式顯示信息才安全，全部的html代碼會被過濾掉，至少不會出現惡意代碼。

3.在一個項目中確定會存在一些資源文件，實際上使用"th:text"也能夠獲取資源文件的內容

如今假設定義的資源文件內容以下：

welcome.url=www.mldn.cn
welcome.msg=歡迎{0}光臨!

隨後能夠在頁面之中進行讀取：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>SpringBoot模版渲染</title>
	<script type="text/javascript" th:src="@{/js/main.js}"></script> 
	<link rel="icon" type="image/x-icon" href="/images/mldn.ico"/>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<a href="aa.html" th:href="@{/show}">訪問</a>
	<hr/>
	<p th:text="'官方網站：' + ${url}"/>
	<p th:utext="'官方網站：' + ${url}"/>
	<hr/>
	<h2 th:text="#{welcome.url}"/>
	<h2 th:text="#{welcome.msg('xiaoli')}"/>
</body>
</html>

4.除了以上的功能以外，在"th:text"操做裏面還能夠編寫一些基礎的運算

<p th:utext="'官方網站：' + ${url} + '、數學計算：' + (1 + 2)"/>

會發如今整個thymeleaf信息輸出的處理之中，幾乎都將可能使用到的支持所有設計在內了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。