第六章：thymeleaf頁面模版-4. 對象輸出

時間 2019-11-13

標籤第六 thymeleaf 頁面模版對象輸出简体版

原文原文鏈接

在實際的開發之中常常面對頁面要顯示對象內容的處理操做,因而下面來觀察一下如何進行對象信息的輸出javascript

1.準備一個VO類html

package cn.mldn.microboot.vo;

import java.io.Serializable;
import java.util.Date;

@SuppressWarnings("serial")
public class Member implements Serializable {
	private Long mid ;
	private String name ;
	private Integer age ;
	private Date birthday ;
	private Double salary ;
	public Long getMid() {
		return mid;
	}
	public void setMid(Long mid) {
		this.mid = mid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	public Date getBirthday() {
		return birthday;
	}
	public void setBirthday(Date birthday) {
		this.birthday = birthday;
	}
	public Double getSalary() {
		return salary;
	}
	public void setSalary(Double salary) {
		this.salary = salary;
	}
}

2.編寫一個控制器將對象內容進行屬性傳遞java

package cn.mldn.microboot.controller;

import java.util.Date;

import javax.servlet.http.HttpServletRequest;

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;
import cn.mldn.microboot.vo.Member;

@Controller
public class MessageController extends AbstractBaseController {
	@RequestMapping(value = "/message/member_show", method = RequestMethod.GET)
	public String memberShow(Model model) {
		Member vo = new Member();
		vo.setMid(101L);
		vo.setName("啊三");
		vo.setAge(9);
		vo.setSalary(99999.99);
		vo.setBirthday(new Date());
		model.addAttribute("member", vo);
		return "message/member_show";
	}
}

3.編寫一個具體的頁面進行輸出web

<!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>
	
		<p th:text="'用戶編號：' + ${member.mid}"/>
		<p th:text="'用戶姓名：' + ${member.name}"/>
		<p th:text="'用戶年齡：' + ${member.age}"/>
		<p th:text="'用戶工資：' + ${member.salary}"/>
		<p th:text="'出生日期：' + ${member.birthday}"/>
		<p th:text="'出生日期：' + ${#dates.format(member.birthday,'yyyy-MM-dd')}"/>
	
</body>
</html>

4.如今程序編寫到此處能發現一個小小的問題，若是要如今按照此類方式進行輸出，咱們會以爲這個操做太麻煩了，有一種更簡單的作法:spring

<!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>
	<div th:object="${member}">
		<p th:text="'用戶編號：' + *{mid}"/>
		<p th:text="'用戶姓名：' + *{name}"/>
		<p th:text="'用戶年齡：' + *{age}"/>
		<p th:text="'用戶工資：' + *{salary}"/>
		<p th:text="'出生日期：' + *{birthday}"/>
		<p th:text="'出生日期：' + *{#dates.format(birthday,'yyyy-MM-dd')}"/>
	</div>
</body>
</html>

區別:關於"${屬性}"和"*{屬性}"區別?app

這兩種屬性訪問機制在訪問單獨或者是完整屬性時候是同樣的，而若是要使用"*{}"形式進行訪問每每須要結合"th:object"做爲總體對象的聲明後，才能夠訪問屬性。ui

$訪問完整信息，而*訪問指定對象中的屬性內容，若是訪問的只是普通的內容二者沒有區別。this