第五章 整合視圖層技術(shù)
使用Vue.js? 的前后端分離的化,不需要整合。?
一、SpringBoot整合jsp
重點:
注意:創(chuàng)建SpringBoot整合JSP,一定要為war類型,否則會找不到頁面。

1、引入依賴
在maven的dependencies的依賴中除了springBoot啟動器還要添加對jstl和jsp的依賴。
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
</dependencies>
2、在application.properties中修改jsp全局訪問設(shè)置。
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
接下來就只需要在controller中返回spring類型的視圖名稱即可訪問到WEB-INF/jsp/中相應(yīng)的jsp文件
3、測試demo
書寫 controller
@Controller
public class UserController {
@RequestMapping("/showUser")
public String showUser(Model model) {
List<User> userList = new ArrayList<>();
userList.add(new User("鬼魅傳說"));
userList.add(new User("魑魅魍魎"));
userList.add(new User("妖魔"));
model.addAttribute("userList", userList);
return users;
}
}
書寫WEB-INF/jsp/users.jsp
<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@tagbib url=" " prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<table border="1" width="50%">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<c:forEach items="${userList}" var="user">
<tr>
<td>${ }</td>
<td>${ }</td>
<td>${user.age}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
測試頁面。
二、springboot整合Thymeleaf
在maven中添加對thymeleaf的依賴。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
視圖存放的位置為src/main/resources/templates,該目錄是安全的,意味著該目錄下的內(nèi)容不允許被外界直接訪問。
書寫?user類,擁有?id,name,age三個屬性。
import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.Data; //@Data @ApiModel(description = "用戶模型") public class UserPO { ? ? public UserPO(String Name) { ? ? ? ? this.name = Name; ? ? } ? ? @ApiModelProperty(value = "name") ? ? public String name; ? ? @ApiModelProperty(value = "id") ? ? public String id; ? ? @ApiModelProperty(value = "age") ? ? public String age;
書寫 controller,在model中添加attributeute的userList即可
@Controller
public class UserController {
@RequestMapping("/showUser")
public String showUser(Model model) {
List<User> userList = new ArrayList<>();
userList.add(new User("鬼魅傳說"));
userList.add(new User("魑魅魍魎"));
userList.add(new User("妖魔"));
model.addAttribute("userList", userList);
return users;
}
}
編寫前端視圖src/main/resources/templates/users.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr th:each="user : ${userList}">
<td th:text="${ }"></td>
<td th:text="${ }"></td>
<td th:text="${user.age}"></td>
</tr>
</table>
</body>
</html>
三、SpringBoot整合Freemarker
在maven中除了添加springboot啟動器外,還要添加對freemarker的依賴。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
書寫 controller。
@RequestMapping("/indextwo") public String indextwo(Map<String, Object> map) { ? ? map.put("name","美麗的天使..."); ? ? return "indextwo"; }
在??src/main/resources/templates/? 創(chuàng)建? indextwo.ftl
<!DOCTYPE html> <html> <head> ? ? <meta charset="UTF-8" /> ? ? <title></title> </head> <body> ${name} </body> </html>
Freemarker?的配置
########################################################
###FREEMARKER (FreeMarkerAutoConfiguration)
########################################################
spring.freemarker.allow-request-override=false
spring.freemarker.cache=true
spring.freemarker.check-template-location=true
spring.freemarker.charset=UTF-8
spring.freemarker.content-type=text/html
spring.freemarker.expose-request-attributes=false
spring.freemarker.expose-session-attributes=false
spring.freemarker.expose-spring-macro-helpers=false
#spring.freemarker.prefix=
#spring.freemarker.request-context-attribute=
#spring.freemarker.settings.*=
spring.freemarker.suffix=.ftl
spring.freemarker.template-loader-path=
#comma-separated list
#spring.freemarker.view-names= # whitelist of view names that can be resolved
啟動項目,訪問ip;端口號 /indextwo? ? ?,啟動成功。

四、springboot整合Velocity??
SprintBoot? 在2.0之后放棄了對于velocity的支持,原因是該項目已經(jīng)很長時間沒有更新了。
但是目前框架項目使用,velocity當(dāng)作代碼生成器使用。
五、關(guān)于Freemarker? ?和? ?Thymeleaf? ?的使用選擇。?
thymeleaf優(yōu)點:
靜態(tài)html嵌入標(biāo)簽屬性,瀏覽器可以直接打開模板文件,便于前后端聯(lián)調(diào)。
springboot官方推薦方案。
thymeleaf缺點
1、模板必須符合xml規(guī)范,就這一點就可以判死刑!太不方便了!js腳本必須加入/*<![CDATA[*/標(biāo)識,否則一個&符號就會導(dǎo)致后臺模板合成拋異常,而且錯誤信息巨不友好,害得我調(diào)試了好幾個小時才明白是怎么回事。js里面還好辦,這樣是在html里面含有&等符號,還需要轉(zhuǎn)義?忒麻煩了!
Freemarker?優(yōu)點:
1、通用目標(biāo)。能夠生成各種文本:Html、Xml、RTF、JAVA源代碼等。
2、強大的模版語言。所有常用的指令:include、if/elseif/else。
3、通用數(shù)據(jù)類型。FreeMaker不是直接反射到j(luò)ava對象,java對象通過插件式對象封裝,以變量方式在模版中顯示。
Freemarker?缺點:
thymeleaf由于使用了標(biāo)簽屬性做為語法,模版頁面直接用瀏覽器渲染,使得前端和后端可以并行開發(fā)。freemarket使用</>這樣的語法,就無法直接使瀏覽器渲染出原本頁面的樣子。
使用場景
1、如果你只有簡答的幾個html的頁面,或者你是初學(xué)者h(yuǎn)tml應(yīng)用很少,網(wǎng)頁較少,建議使用?thymeleaf? 。?
2、如果你確定要使用視圖層的架構(gòu),來開發(fā)產(chǎn)品級的功能,建議使用? Freemarker? 。
3、如果你是初學(xué)者,建議直接使用?Vue.js? 。
六、靜態(tài)資源訪問。
在我們開發(fā)Web應(yīng)用的時候,需要引用大量的js、css、圖片等靜態(tài)資源。
默認(rèn)配置
Spring Boot默認(rèn)提供靜態(tài)資源目錄位置需置于classpath下,目錄名需符合如下規(guī)則:
/static
/public
/resources
/META-INF/resources
舉例:我們可以在src/main/resources/目錄下創(chuàng)建static,在該位置放置一個圖片文件。啟動程序后,嘗試訪問
重要提示:?關(guān)于使用vue前后端分離開發(fā)項目,也可以將vue的打包后的文件,放置在static文件目錄下進(jìn)行靜態(tài)資源訪問。這樣使用的優(yōu)點是簡化了部署,部署的時候不需要再進(jìn)行前后端分離的部署。
缺點在于程序部署之后,前端無法修改訪問后臺的數(shù)據(jù)庫端口,或者修改時,比較麻煩。