Spring Boot 整合視圖層

整合Thymeleaf

在 pom.xml 中引入相關依賴

引入 Web 項目及 Thymeleaf 模闆相關的依賴項。

執行個體：

<!-- 引入web項目相關依賴 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- ThymeLeaf依賴 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

想對預設的Thymeleaf 配置參數進行自定義配置，那麼可以直接在aplication.properties 中進行配置，部分常見配置如下：

＃是否開啟緩存，開發時可設定為false ，預設為true
spring.thymeleaf.cache=true
＃檢查模闆是否存在，預設為true
spring.thymeleaf.check-template=true
＃檢查模闆位置是否存在，預設為true
spring.thymeleaf.check-template-location=true
＃模闆檔案編碼
spring.thymeleaf.encoding=UTF-8
＃模闆檔案位置
spring.thymeleaf.prefix=classpath:/templates/
#Content-Type 配置
spring.thymeleaf.servlet.content-type=text/html
＃模闆檔案字尾
spring.thymeleaf.suffix=.html

建立控制器方法，指向商品頁面

建立控制器類， GoodsController ， Thymeleaf 直接使用 HTML 作為模闆頁面，故代碼如下：

/**
 * 商品控制器
 */
@Controller // 标注為控制器
public class GoodsController {
	/**
	 * 擷取商品清單
	 */
	@RequestMapping("/goods") // 請求路徑
	public String goods() {
		return "goods.html";// 跳轉到goods.html頁面
	}
}

建立商品頁面

我們在

resource/templates

目錄下建立商品頁面

goods.html

，先不必實作具體功能，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品清單</title>
</head>
<body>
商品清單
</body>
</html>

此時我們啟動項目，然後通路

http://127.0.0.1:8080/goods

，即可顯示對應頁面内容。

在控制器方法中，調用服務方法擷取商品資訊，并将資訊交給模闆引擎處理

商品類 GoodsDo ，服務類 GoodsService ，這兩個類與上面沒有差別直接放出代碼。

/**
 * 商品資料對象
 */
public class GoodsDo {
	/**
	 * 商品名稱
	 */
	private String name;
	/**
	 * 商品價格
	 */
	private String price;
	/**
	 * 商品圖檔
	 */
	private String pic;
  // 省略get set方法
}

/**
 * 商品服務
 */
@Service // 為GoodsService注冊一個元件
public class GoodsService {
	public List<GoodsDo> getGoodsList() {
		List<GoodsDo> list = new ArrayList<GoodsDo>();
		GoodsDo goods = new GoodsDo();
		goods.setName("蘋果");
		goods.setPic("apple.jpg");
		goods.setPrice("3.5");
		list.add(goods);
		return list;
	}
}

好的，此時我們的控制器就可以注入 GoodsService 類型的元件，然後調用其方法了。

@Controller
public class GoodsController {
	@Autowired
	private GoodsService goodsService;// 自動裝配

	@RequestMapping("/goods") // 請求路徑
	public String goods(Model model) {
		model.addAttribute("goodsList", goodsService.getGoodsList());// 交給模闆引擎處理的資料
		return "goods.html";// 跳轉到goods.html頁面
	}
}

在商品頁面通過模闆引擎規則顯示商品資訊

此時我們可以根據 Thymeleaf 模闆引擎，按模闆規則顯示商品資訊了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品清單</title>
</head>
<body>
	<div>商品清單:</div>
	<div th:each="item:${goodsList}">
		<span th:text="${item.name}"></span> 
		<span th:text="${item.price}"></span>
		<span th:text="${item.pic}"></span>
	</div>
</body>
</html>

測試

啟動項目，打開浏覽器通路

http://127.0.0.1:8080/goods

，即可檢視輸出結果。

整合FreeMarker

引入 Web 項目及 FreeMarker 模闆相關的依賴項，代碼如下：

<!-- 引入web項目相關依賴 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- freemarker -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

建立控制器類，由于是商品相關的控制器，是以命名為 GoodsController ，代碼如下：

/**
 * 商品控制器
 */
@Controller // 标注為控制器
public class GoodsController {
	/**
	 * 擷取商品清單
	 */
	@RequestMapping("/goods") // 請求路徑
	public String goods() {
		return "goods";// 跳轉到goods.ftl頁面
	}
}

我們具體解釋下該類的作用。

@Controller 注解标注在 GoodsController 類上，會為該類注冊一個控制器元件，放入 Spring 容器中。該元件具備處理請求的能力，其中的方法可以響應 HTTP 請求；
@RequestMapping ("/goods") 注解标注在方法 goods () 上，是以請求路徑如果比對 /goods ，則由該方法進行處理；
傳回值是字元串 "goods" ，由于我們已經引入 FreeMarker 依賴，是以該傳回值會跳轉到 goods.ftl 頁面。

**Tips：** 注意需要在 application.properties 檔案中設定模闆檔案的字尾，即： spring.freemarker.suffix=.ftl 。如果不添加該配置，直接 return "goods.ftl"; 會報錯。

我們

resource/templates

goods.ftl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品清單</title>
</head>
<body>
商品清單
</body>
</html>

此時我們啟動項目，然後通路 http://127.0.0.1:8080/goods ，即可顯示對應頁面内容。

定義商品類 GoodsDo 用來描述商品資訊，注意 Do 表示資料模型對象（Data Object），代碼如下：

/**
 * 商品資料對象
 */
public class GoodsDo {
	/**
	 * 商品名稱
	 */
	private String name;
	/**
	 * 商品價格
	 */
	private String price;
	/**
	 * 商品圖檔
	 */
	private String pic;
  // 省略get set方法
}

然後我們編寫服務類 GoodsService ，提供擷取商品清單的方法。注意此處僅僅是示範模闆引擎，并不需要通路資料庫，直接傳回一個指定内容的商品清單。

/**
 * 商品服務
 */
@Service // 為GoodsService注冊一個元件
public class GoodsService {
	public List<GoodsDo> getGoodsList() {
		List<GoodsDo> list = new ArrayList<GoodsDo>();
		GoodsDo goods = new GoodsDo();
		goods.setName("蘋果");
		goods.setPic("apple.jpg");
		goods.setPrice("3.5");
		list.add(goods);
		return list;
	}
}

此時，我們的控制器就可以注入 GoodsService 類型的元件，然後調用其方法了。

@Controller
public class GoodsController {
	@Autowired
	private GoodsService goodsService;// 自動裝配

	@RequestMapping("/goods") // 請求路徑
	public String goods(Model model) {
		model.addAttribute("goodsList", goodsService.getGoodsList());// 交給模闆引擎處理的資料
		return "goods";// 跳轉到goods.ftl頁面
	}
}

注意 model.addAttribute("goodsList", goodsService.getGoodsList()); ，我們将商品清單相關的資料交給模闆引擎去處理。

此時我們可以根據 FreeMarker 模闆引擎，按模闆規則顯示商品資訊了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品清單</title>
</head>
<body>
<div>商品清單:</div>
<#list goodsList as item>
${item.name}--${item.price}--${item.pic}
</#list>
</body>
</html>

注意我們通過 FreeMarker 的模闆文法，輸出了商品清單資訊。關于 FreeMarker 模闆引擎更多的文法規則，感興趣的同學可以後續查閱更多資料。

http://127.0.0.1:8080/goods

JSP

注意 Spring Boot 官方已經不推薦使用 JSP 了，确實操作起來也比較麻煩。但是由于 JSP 使用者體量還是比較大的，是以此處還是簡單示範下，開發步驟與 FreeMarker / Thymeleaf 基本一緻。

2 在 pom.xml 中引入相關依賴

引入 Web 項目及 JSP 模闆相關的依賴項。

<!-- 添加web開發功能 -->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--内嵌的tomcat支援子產品 -->
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
	<scope>provided</scope>
</dependency>
<!-- 對jstl的支援 -->
<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
</dependency>

3 建立控制器方法，指向商品頁面

建立控制器類， GoodsController ，代碼如下：

/**
 * 商品控制器
 */
@Controller // 标注為控制器
public class GoodsController {
	/**
	 * 擷取商品清單
	 */
	@RequestMapping("/goods") // 請求路徑
	public String goods() {
		return "goods";// 跳轉到goods.jsp頁面
	}
}

4 建立商品頁面—配置視圖解析器

手工添加

src/main/webapp

及子目錄如下，同時目錄下放一個 goods.jsp 用于測試。注意該目錄是一個 Source Folder 源代碼目錄，不是普通檔案夾目錄。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品清單</title>
</head>
<body>商品清單
</body>
</html>

注意，我們還需要添加一個視圖解析器，實作 JSP 頁面往指定目錄跳轉。

@SpringBootApplication
public class SpringBootJspApplication {
	public static void main(String[] args) {
		SpringApplication.run(SpringBootJspApplication.class, args);
	}
	@Bean // 注冊視圖解析器
	public InternalResourceViewResolver setupViewResolver() {
		InternalResourceViewResolver resolver = new InternalResourceViewResolver();
		resolver.setPrefix("/WEB-INF/jsp/");// 自動添加字首
		resolver.setSuffix(".jsp");// 自動添加字尾
		return resolver;
	}
}

或者

5 在控制器方法中，調用服務方法擷取商品資訊，并将資訊交給模闆引擎處理

/**
 * 商品資料對象
 */
public class GoodsDo {
	/**
	 * 商品名稱
	 */
	private String name;
	/**
	 * 商品價格
	 */
	private String price;
	/**
	 * 商品圖檔
	 */
	private String pic;
  // 省略get set方法
}

/**
 * 商品服務
 */
@Service // 為GoodsService注冊一個元件
public class GoodsService {
	public List<GoodsDo> getGoodsList() {
		List<GoodsDo> list = new ArrayList<GoodsDo>();
		GoodsDo goods = new GoodsDo();
		goods.setName("蘋果");
		goods.setPic("apple.jpg");
		goods.setPrice("3.5");
		list.add(goods);
		return list;
	}
}

@Controller
public class GoodsController {
	@Autowired
	private GoodsService goodsService;// 自動裝配

	@RequestMapping("/goods") // 請求路徑
	public String goods(Model model) {
		model.addAttribute("goodsList", goodsService.getGoodsList());// 交給模闆引擎處理的資料
		return "goods";// 跳轉到goods.jsp
	}
}

6 在商品頁面通過模闆引擎規則顯示商品資訊

此時我們可以根據 JSP 模闆引擎，按模闆規則顯示商品資訊了。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品清單</title>
</head>
<body>
	<div>商品清單:</div>
	<c:forEach var="item" items="${goodsList}">
         ${item.name}--${item.price}--${item.pic}
	</c:forEach>
</body>
</html>

注意我們通過 JSP 的模闆文法，輸出了商品清單資訊。關于 JSP 模闆引擎更多的文法規則，感興趣的同學可以後續查閱更多資料。

7 測試

http://127.0.0.1:8080/goods

Spring Boot 整合視圖層

整合Thymeleaf

在 pom.xml 中引入相關依賴

建立控制器方法，指向商品頁面

建立商品頁面

在控制器方法中，調用服務方法擷取商品資訊，并将資訊交給模闆引擎處理

在商品頁面通過模闆引擎規則顯示商品資訊

測試

整合FreeMarker

JSP

2 在 pom.xml 中引入相關依賴

3 建立控制器方法，指向商品頁面

4 建立商品頁面—配置視圖解析器

5 在控制器方法中，調用服務方法擷取商品資訊，并将資訊交給模闆引擎處理

6 在商品頁面通過模闆引擎規則顯示商品資訊

7 測試

繼續閱讀

nginx安裝、前後端分離部署流程1. 筆記資料來源2. Nginx簡介3. Nginx 常用指令4. Nginx配置5. 前後端分離配置

微人事項目學習之權限管理

Error —— Unsatisfied dependency expressed through field ‘baseMapper‘問題解決

Spring Cloud 之Hystrix熔斷器、Hystrix-Dashboard可視化監控中心

RabbitMQ：MessageConverter消息轉換器

第一個SpringBoot程式以及定制啟動時的banner圖案第一個SpringBoot程式

springboot2整合ActiveMQ

SpringBoot——日志檔案設定

微人事學習筆記（持續更新）登入頁面服務端登入接口制作前後端接口對接Home頁面制作前後端分離權限管理思路探讨權限管理：後端接口設計基礎資訊設定頁面

首次阿裡雲部署學生級web服務

Spring Boot：靜态資源

jeecg-boot的shiro認證過程2. jwtFilter

SpringSecurity整合短信驗證碼認證

基于Springboot+VUE+Mysql的大學生校園疫情防控管理系統

springboot使用 swagger-ui 2.10.5 有關版本更新帶來的問題

spring boot @SpringBootApplication @EnableAutoConfiguration 的工作原理