第六章：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信息输出的处理之中，几乎都将可能使用到的支持所有设计在内了。