站長資訊平臺

SpringBoot | 第十六章：web 應(yīng)用開發(fā)

2018-09-05 來源：importnew

原文出處： oKong

前言

前面講了這么多直接，都沒有涉及到前端web和后端交互的部分。因?yàn)樽髡咚诠臼遣捎?code>前后端分離方式進(jìn)行web項(xiàng)目開發(fā)了。所以都是后端提供api接口，前端根據(jù)api文檔或者服務(wù)自行調(diào)用的。后臺也有讀者說為何沒有關(guān)于web這部分的集成文章。本章節(jié)就主要講解下如何渲染頁面的。

一點(diǎn)知識

我們知道，在web開發(fā)時(shí)，一般都會涉及到很多的靜態(tài)資源，如js、image、css文件等。

SpringBoot的默認(rèn)的靜態(tài)文件目錄是：

/static
/public
/resources
/META-INF/resources

默認(rèn)靜態(tài)文件目錄

所以一般上我們只需要把靜態(tài)文件放入前面的四個(gè)任一一個(gè)即可。默認(rèn)都放在static下，對應(yīng)路徑即為：src/main/resources/static。

而從官網(wǎng)文檔里也可以獲悉，為了實(shí)現(xiàn)動態(tài)的html，SpringBoot是通過模版引擎進(jìn)行頁面結(jié)果渲染的，目前(1.5.15)版本的提供默認(rèn)配置的模版引擎主要為：

FreeMarker
Groovy
Thymeleaf
Mustache

模版引擎

對于模版引擎而言，SpringBoot默認(rèn)存放模版文件的路徑為src/main/resources/templates，當(dāng)然也可以通過配置文件進(jìn)行修改的。因?yàn)椴煌哪０嬉鎸?yīng)的配置屬性是不一樣，所以在具體講解模版引擎時(shí)，會提到的。

當(dāng)然了，使用jsp也是可以的，但官方已經(jīng)不建議使用JSP了，本文也會講解下SpringBoot下JSP的支持的，比較有很多老的項(xiàng)目還是使用JSP居多的。

知道了以上的一些默認(rèn)配置和知識點(diǎn)后，就可以進(jìn)行模版引擎的集成使用了。本章節(jié)主要講解下常用的FreeMarker、Thymeleaf及JSP三個(gè)的集成和使用，其他的基本用法都一樣，就是各模版引擎的語法的差異了。

FreeMarker支持

FreeMarker是一款模板引擎：即一種基于模板和要改變的數(shù)據(jù)，并用來生成輸出文本(HTML網(wǎng)頁，電子郵件，配置文件，源代碼等)的通用工具。

示例

0.POM依賴

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

1.application.properties配置加入相關(guān)配置：

# 緩存配置 開發(fā)階段應(yīng)該配置為false 因?yàn)榻?jīng)常會改
spring.freemarker.cache=false

# 模版后綴名 默認(rèn)為ftl
spring.freemarker.suffix=.html

# 文件編碼
spring.freemarker.charset=UTF-8

# 模版加載的目錄
spring.freemarker.template-loader-path=classpath:/templates/

# 配置
# locale	該選項(xiàng)指定該模板所用的國家/語言選項(xiàng)
# number_format	指定格式化輸出數(shù)字的格式：currency、
# boolean_format	指定兩個(gè)布爾值的語法格式,默認(rèn)值是true,false
# date_format,time_format,datetime_format	定格式化輸出日期的格式
# time_zone	設(shè)置格式化輸出日期時(shí)所使用的時(shí)區(qū)
# 數(shù)字 千分位標(biāo)識
spring.freemarker.settings.number_format=,##0.00

題外話：詳細(xì)的配置可參見org.springframework.boot.autoconfigure.freemarker.FreeMarkerProperties類，或者直接IDE直接配置文件點(diǎn)擊查看。

2.編寫控制層

FreemarkerController.kava:

//因?yàn)槭欠祷仨撁?所以不能是@RestController
@Controller
@RequestMapping("/freemarker")
public class FreemarkerController {
	
	//正常和springmvc設(shè)置返回參數(shù)是意義的用法了
	@GetMapping("/map")
	public String index(String name,ModelMap map) {
		map.addAttribute("name", name);
		map.addAttribute("from", "lqdev.cn");
		//模版名稱，實(shí)際的目錄為：src/main/resources/templates/freemarker.html
		return "freemarker";
	}
	
	@GetMapping("/mv")
	public String index(String name,ModelAndView mv) {
		mv.addObject("name", name);
		mv.addObject("from", "lqdev.cn");
		//模版名稱，實(shí)際的目錄為：src/main/resources/templates/freemarker.html
		return "freemarker";
	}
}

3.編寫模版文件

freemarker.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>freemarker簡單示例</title>
</head>
<body>
<h1>Hello Freemarker</h1>
<!-- 這里注意：默認(rèn)變量都不能為null的， 當(dāng)參數(shù)為null時(shí)，會發(fā)生異常的 -->
<!-- 這里后面幾個(gè)"!"避免下，這樣就是空白了 -->
<h2>名稱：${name!}，來自：${from}</h2>
</body>
</html>

4.啟動應(yīng)用，訪問：http://127.0.0.1:8080/freemarker/mv?name=oKong?或者?http://127.0.0.1:8080/freemarker/map?name=oKong?就能查看頁面了。

關(guān)于一些Freemarker的語法這里就不說明了，大家可到官網(wǎng)查看下：https://freemarker.apache.org/docs/index.html或者，中文參考(可能版本不是最新)：http://freemarker.foofun.cn/toc.html

Thymeleaf支持

Thymeleaf是一個(gè)XML/XHTML/HTML5模板引擎，可用于Web與非Web環(huán)境中的應(yīng)用開發(fā)。Thymeleaf的主要目標(biāo)在于提供一種可被瀏覽器正確顯示的、格式良好的模板創(chuàng)建方式，因此也可以用作靜態(tài)建模。你可以使用它創(chuàng)建經(jīng)過驗(yàn)證的XML與HTML模板。相對于編寫邏輯或代碼，開發(fā)者只需將標(biāo)簽屬性添加到模板中即可。接下來，這些標(biāo)簽屬性就會在DOM（文檔對象模型）上執(zhí)行預(yù)先制定好的邏輯。

0.pom依賴

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

1.application.properties配置加入相關(guān)配置：

# 啟用緩存:建議生產(chǎn)開啟
spring.thymeleaf.cache=false 
# 建議模版是否存在
spring.thymeleaf.check-template-location=true 
# Content-Type 值
spring.thymeleaf.content-type=text/html 
# 是否啟用
spring.thymeleaf.enabled=true 
# 模版編碼
spring.thymeleaf.encoding=UTF-8 
# 應(yīng)該從解析中排除的視圖名稱列表（用逗號分隔）
spring.thymeleaf.excluded-view-names= 
# 模版模式
spring.thymeleaf.mode=HTML5 
# 模版存放路徑
spring.thymeleaf.prefix=classpath:/templates/ 
# 模版后綴
spring.thymeleaf.suffix=.html

2.編寫控制層

ThymeleafController.java:

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {

	// 正常和springmvc設(shè)置返回參數(shù)是意義的用法了
	@GetMapping("/map")
	public String index(String name, ModelMap map) {
		map.addAttribute("name", name);
		map.addAttribute("from", "lqdev.cn");
		// 模版名稱，實(shí)際的目錄為：src/main/resources/templates/thymeleaf.html
		return "thymeleaf";
	}

	@GetMapping("/mv")
	public ModelAndView index(String name) {
		ModelAndView mv = new ModelAndView();
		mv.addObject("name", name);
		mv.addObject("from", "lqdev.cn");
		// 模版名稱，實(shí)際的目錄為：src/main/resources/templates/thymeleaf.html
		mv.setViewName("thymeleaf");
		return mv;
	}
}

3.編寫模版文件

thymeleaf.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>thymeleaf簡單示例</title>
</head>
<body>
<h1>Hello thymeleaf</h1>
<!-- 這里注意：拼接時(shí) 變量要單獨(dú)使用${param}，其他的常量使用''包裹 -->
<h2 th:text="'名稱：'+${name}+'，來自：'+${from}">默認(rèn)值</h2>
</body>
</html>

4.啟動應(yīng)用，訪問：http://127.0.0.1:8080/thymeleaf/mv?name=oKong?或者?http://127.0.0.1:8080/thymeleaf/map?name=oKong?就能查看頁面了。

JSP支持

雖然SpringBoot官方已經(jīng)不建議使用jsp了。但在一些老的項(xiàng)目遷移時(shí)，jsp的支持是毋庸置疑的。所以還是需要兼容的。。

0.pom依賴加入

<!-- spring boot 內(nèi)置tomcat jsp支持 -->
<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
</dependency>

1.application.properties配置加入相關(guān)配置：

#jsp 支持
spring.mvc.view.suffix=.jsp
spring.mvc.view.prefix=/WEB-INF/jsp/

2.編寫控制層

JspController.java

@Controller
@RequestMapping("/jsp")
public class JspController {
	
	//正常和springmvc設(shè)置返回參數(shù)是意義的用法了
		@GetMapping("/map")
		public String index(String name,ModelMap map) {
			map.addAttribute("name", name);
			map.addAttribute("from", "lqdev.cn");
			//模版名稱，實(shí)際的目錄為：src/main/webapp/jsp/index.html
			return "index";
		}
		
		@GetMapping("/mv")
		public ModelAndView index(String name) {
			ModelAndView mv = new ModelAndView();
			mv.addObject("name", name);
			mv.addObject("from", "lqdev.cn");
			//模版名稱，實(shí)際的目錄為：src/main/webapp/jsp/index.html
			mv.setViewName("index");
			return mv;
		}
}

3.webapp/WEB-INF/jsp目錄下編寫jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8">
<title>jsp示例</title>
</head>
<body>
<h1>Hello Jsp</h1>
<h2 >名稱：${name}，來自：${from}</h2>
</body>
</html>

5.啟動應(yīng)用，訪問：http://127.0.0.1:8080/jsp/mv?name=oKong?或者?http://127.0.0.1:8080/jsp/map?name=oKong?就能查看頁面了。

這里需要注意：在使用spring-boot-maven-plugin打包插件時(shí)，默認(rèn)情況下打包的應(yīng)用時(shí)訪問不了jsp目錄文件的，需要把版本修改為1.4.2.RELEASE版本，同時(shí)pom中加入resource配置：

<resources>
	<!-- 打包時(shí)將jsp文件拷貝到META-INF目錄下 -->
	<resource>
		<!-- 指定resources插件處理哪個(gè)目錄下的資源文件 -->
		<directory>src/main/webapp</directory>
		<!--注意此次必須要放在此目錄下才能被訪問到 -->
		<targetPath>META-INF/resources</targetPath>
		<includes>
			<include>**/**</include>
		</includes>
	</resource>
<!-- 	<resource>
	  	指定resources插件處理哪個(gè)目錄下的資源文件
		<directory>src/main/resources/static</directory>
		注意此次必須要放在此目錄下才能被訪問到
		<targetPath>META-INF/resources/static</targetPath>
		<includes>
			<include>**/**</include>
		</includes>
	</resource> -->
	<resource>
		<directory>src/main/resources</directory>
		<includes>
			<include>**/**</include>
		</includes>
<!-- 		<excludes>
		   <exclude>src/main/resources/static/**</exclude>
		</excludes> -->
		<filtering>false</filtering>
	</resource>
</resources>

總結(jié)

本章節(jié)主要是講解了利用模版引擎進(jìn)行動態(tài)頁面實(shí)現(xiàn)功能。對于有此需要的同學(xué)可以去看下使用的模版引擎的相關(guān)使用教程，這里就不多加闡述了，畢竟目前工作現(xiàn)在用這個(gè)的機(jī)會比較少了，也只是知道個(gè)大概使用，具體一些深入的使用還是看具體的官方文檔吧！

最后

目前互聯(lián)網(wǎng)上很多大佬都有SpringBoot系列教程，如有雷同，請多多包涵了。本文是作者在電腦前一字一句敲的，每一步都是實(shí)踐的。若文中有所錯(cuò)誤之處，還望提出，謝謝。

標(biāo)簽： web環(huán)境代碼電子郵件互聯(lián)網(wǎng) 開發(fā)者

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。