3.4. View

3.4. View
上一頁	第 3 章 Spring MVC	下一頁

3.4.1. 配置靜態檔案目錄

		
#靜態資源訪問路徑
spring.mvc.static-path-pattern=/**

#靜態資源映射路徑
spring.resources.static-locations=classpath:/

3.4.2. 添加靜態檔案目錄

		
package cn.netkiller.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("classpath:/images/");
    }
}

3.4.3. Using Spring’s form tag library

3.4.3.1. css

3.4.3.1.1. cssClass

cssClass 使用該屬性指定表單元素CSS樣式名，相當於HTML元素的class屬性

				
<form:input path="userName" cssClass="inputStyle"/>

3.4.3.1.2. cssStyle

cssStyle 直接通過該屬性指定樣式，相當於HTML元素的style屬性

				
<form:input path="userName" cssStyle="width:100px"/>

3.4.3.1.3. cssErrorClass

cssError Class表示表單元素髮生錯誤時對應的樣式

				
<form:input path="userName" cssClass="userNameClass" cssErrorClass= "userNameClassError"/>

3.4.3.2. cssClass

3.4.4. Thymeleaf

http://thymeleaf.org/

3.4.4.1. Maven pom.xml

			
			<dependency>  
	            <groupId>org.springframework.boot</groupId>  
	            <artifactId>spring-boot-starter-thymeleaf</artifactId>  
	        </dependency>

3.4.4.2. Spring 配置

			
	<!-- **************************************************************** -->
	<!-- THYMELEAF-SPECIFIC ARTIFACTS -->
	<!-- TemplateResolver <- TemplateEngine <- ViewResolver -->
	<!-- **************************************************************** -->

	<bean id="templateResolver"
		class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
		<property name="prefix" value="/WEB-INF/templates/" />
		<property name="suffix" value=".html" />
		<property name="templateMode" value="HTML5" />
	</bean>

	<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
		<property name="templateResolver" ref="templateResolver" />
	</bean>

	<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
		<property name="templateEngine" ref="templateEngine" />
	</bean>

3.4.4.3. controller

			
package cn.netkiller.controller;

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

@Controller
@RequestMapping("/")
public class HelloController {

	@RequestMapping(value = "/{name}", method = RequestMethod.GET)
	public String getMovie(@PathVariable String name, ModelMap model) {
		model.addAttribute("name", name);
		return "hello";
	}

}

3.4.4.4. HTML5 Template

			
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Spring MVC + Thymeleaf Example</title>
</head>
<body>
	Hello, <span th:text="${name}" />!
</body>
</html>

3.4.4.5. thymeleaf 渲染表格

			
	@RequestMapping("/list")
	public ModelAndView list() {

		Iterable<User> users = userRepository.findAll();

		ModelAndView mv = new ModelAndView();
		mv.addObject("users", users);
		mv.setViewName("table");
		return mv;
	}

模板檔案

			
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>用戶登記</title>
</head>
<body>
	<h1>Welcome to Thymeleaf</h1>
	<table border="1" width="100%">
		<tr>
			<td>ID</td>
			<td>姓名</td>
			<td>聯繫方式</td>
			<td>詳細地址</td>
			<td>圖片</td>
		</tr>
		<tr th:each="user : ${users}">
			<td th:text="${user.id}"></td>
			<td th:text="${user.name}"></td>
			<td th:text="${user.tel}"></td>
			<td th:text="${user.address}"></td>
			<td th:text="${user.picture}"></td>
		</tr>
	</table>
</body>
</html>

3.4.4.6. URL 連結

			
	<span th:text="${number+1}"></span> /
	<span th:text="${totalPages}"></span>

	<a href="#"
		th:href="@{/api/user/browse?sort=id,desc&size=10(page=${number-1})}">上一頁</a>
	<a href="#"
		th:href="@{/api/user/browse?sort=id,desc&size=10(page=${number+1})}">下一頁</a>

拼接 URL 的方法

			
<img src="#" th:src="${'https://img.netkiller.cn/' + pic}" height="128" th:target="_blank" />

3.4.4.7. 拆分字元串

pictures 是一個以逗號分割得字元串。我們需要拆分並逐條顯示。

			
	<div th:unless="${picture == null}">
		<a th:each="pic : ${#strings.arraySplit(pictures, ',')}" href="#" th:href="${pic}"> <img src="#" th:src="${pic}" height="64" /></a>
	</div>

3.4.4.8. 日期格式化

			
	<span th:text="${#dates.format(createDate, 'yyyy-MM-dd HH:mm')}"></span

			

// java.util.Date 處理

${#dates.day(date)}
${#dates.month(date)}
${#dates.monthName(date)}
${#dates.monthNameShort(date)}
${#dates.year(date)}
${#dates.dayOfWeek(date)}
${#dates.dayOfWeekName(date)}
${#dates.dayOfWeekNameShort(date)}
${#dates.hour(date)}
${#dates.minute(date)}
${#dates.second(date)}
${#dates.millisecond(date)}


// java.time 時間處理
${#temporals.day(date)}
${#temporals.month(date)}
${#temporals.monthName(date)}
${#temporals.monthNameShort(date)}
${#temporals.year(date)}
${#temporals.dayOfWeek(date)}
${#temporals.dayOfWeekName(date)}
${#temporals.dayOfWeekNameShort(date)}
${#temporals.hour(date)}
${#temporals.minute(date)}
${#temporals.second(date)}
${#temporals.millisecond(date)}

// 處理天實例

<p th:text="${#dates.day(standardDate)}"></p>
<p th:text="${#temporals.day(localDateTime)}"></p>
<p th:text="${#temporals.day(localDate)}"></p>

// 處理周實例

<p th:text="${#dates.dayOfWeekName(standardDate)}"></p>
<p th:text="${#temporals.dayOfWeekName(localDateTime)}"></p>
<p th:text="${#temporals.dayOfWeekName(localDate)}"></p>

// 處理秒實例

<p th:text="${#dates.second(standardDate)}"></p>
<p th:text="${#temporals.second(localDateTime)}"></p>

3.4.5. FreeMarker

http://freemarker.org/

上一頁	上一級	下一頁
3.3. @RestController	起始頁	3.5. Service