Spring Boot 整合檢視層

阿新 • • 發佈：2020-08-05

整合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

在 pom.xml 中引入相關依賴

引入 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;
	}
}

或者

此時我們啟動專案，然後訪問 http://127.0.0.1:8080/goods ，即可顯示對應頁面內容。

5 在控制器方法中，呼叫服務方法獲取商品資訊，並將資訊交給模板引擎處理

商品類 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";// 跳轉到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 中引入相關依賴引入 Web 專案及 Thymeleaf 模板相關的依賴項。

Spring Boot整合web層實現過程詳解

Spring Boot中對Spring MVC的檔案上傳是一脈相傳的，我們雙擊shift去搜CommonsMultipartResolver這個類，它是檔案上傳的一個實現類。我們先看一下原始碼：

Spring Boot整合持久層

整合持久層就是和資料庫打交道，這裡以mysql為例。 1.準備工作首先建立一個數據庫和表，程式碼如下：

spring boot 整合log4jdbc 檢視完整sql

新增maven。 <dependency> <groupId>org.bgee.log4jdbc-log4j2</groupId> <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>

Spring Boot整合Flyway實現資料庫版本控制？

今天給大家介紹一款比較好用的資料庫版本控制工具Flyway。在通過Spring Boot構建微服務的過程中，一般情況下在拆分微服務的同時，也會按照系統功能的邊界對其依存的資料庫進行拆分。在這種情況下，微服務的資料庫版

spring boot整合elastic-job

版權宣告：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連結和本宣告。

Spring Boot-整合Dubbo

Dubbo官方網站： dubbo.apache.org/zh-cn/ 前言我將會用一個小demo來介紹如何與Spring Boot整合；

Spring Boot實戰（九）：Spring Boot整合Mybatis完成級聯一對多CRUD操作

在關係型資料庫中，隨處可見表之間的連線，對級聯的表進行增刪改查也是程式設計師必備的基礎技能。關於Spring Boot整合Mybatis在之前已經詳細寫過，不熟悉的可以回顧Spring Boot整合Mybatis並完成CRUD操作，這是本文

Spring Boot實戰（八）：Spring Boot整合Mybatis並完成CRUD操作

MyBatis 是一款優秀的持久層框架，被各大網際網路公司使用，本文使用Spring Boot整合Mybatis，並完成CRUD操作。

Spring Boot整合quartz實現定時任務並支援切換任務資料來源

org.quartz實現定時任務並自定義切換任務資料來源在工作中經常會需要使用到定時任務處理各種週期性的任務，org.quartz是處理此類定時任務的一個優秀框架。隨著專案一點點推進，此時我們並不滿足於任務僅僅是定時執

Spring Boot整合Ehcache快取解決方式

本次內容主要介紹基於Ehcache 3.0來快速實現Spring Boot應用程式的資料快取功能。在Spring Boot應用程式中，我們可以通過Spring Caching來快速搞定資料快取。

5分鐘快速學會spring boot整合Mybatis的方法

一、前言記得剛接觸SpringBoot時，大吃一驚，世界上居然還有這麼省事的框架，立馬感嘆：SpringBoot是世界上最好的框架。哈哈！

5分鐘快速學會spring boot整合JdbcTemplate的方法

一、前言 Spring Boot是由Pivotal團隊提供的全新框架，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員不再需要定義樣板化的配置。通過這種方式，Sprin

Spring boot整合shiro+jwt實現前後端分離

本文例項為大家分享了Spring boot整合shiro+jwt實現前後端分離的具體程式碼，供大家參考，具體內容如下

Spring Boot整合Spring Cache及Redis過程解析

這篇文章主要介紹了Spring Boot整合Spring Cache及Redis過程解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Spring boot整合log4j2過程解析

這篇文章主要介紹了Spring boot整合log4j2過程解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

spring boot整合shiro安全框架過程解析

這篇文章主要介紹了spring boot整合shiro安全框架過程解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Spring Boot整合tk.mybatis程式碼例項

這篇文章主要介紹了Spring Boot整合tk.mybatis程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Spring Boot 整合 Druid過程解析

這篇文章主要介紹了Spring Boot 整合 Druid過程解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Spring Boot整合Spring Data Jpa程式碼例項

一、Spring Data Jpa的簡介 spring data：其實就是spring 提供的一個操作資料的框架。而spring data JPA 只是spring data 框架下的一個基於JPA標準操作資料的模組。

Spring Boot 整合檢視層

整合Thymeleaf

在 pom.xml 中引入相關依賴

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

建立商品頁面

在控制器方法中，呼叫服務方法獲取商品資訊，並將資訊交給模板引擎處理

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

測試

整合FreeMarker

在 pom.xml 中引入相關依賴

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

建立商品頁面

在控制器方法中，呼叫服務方法獲取商品資訊，並將資訊交給模板引擎處理

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

測試

JSP

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

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

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

5 在控制器方法中，呼叫服務方法獲取商品資訊，並將資訊交給模板引擎處理

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

7 測試

相關推薦