iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

美麗的邂逅-與安室....伊春系列 第 17

三位一體 (Spring MVC)

  • 分享至 

  • xImage
  •  
分工是為了合作,要合作就要分工。高內聚、低耦合。
  • MVC = Model, View, Controller
  • spring-boot-starter-web
  • tomcat-embed-jasper
  • @EnableWebMvc

以作戰來作喻,行軍作戰共有三件事,第一是前線對壘,一個是籌備資源,一個是分配這些籌備的資料,對應到程式,前線對壘就是顯示(View),籌備資源就是資源管理(Model), 而分配資源就是(Controller), 這個分工方式就稱作 MVC。Spring MVC 就是為了提供這種 "三位一體" 的架構。但是Spring框架(沒有Boot)使用起來,實在有點小複雜,因此 Spring Boot 保留了這些架構,但是提供了"許多道的符", 藉由法力,(相對)輕鬆搞定。對! 就是 "司普令符".
如果再具體一點說,M / Model 通常是指資料庫的定義與存取,C / Controller 包含在前面幾回中提到路由,其次是資料的詮釋,在經過特定的處理 (可能與 Domain Know How 有關),在 V / View 顯示上,在這裡我們尚不介紹 M: Model, 主要在 C: Controller 及 V: View。在上回中,Controller是回傳特定的 HTML 語法,若是要修改HTML的內容,則要重新編譯,也比較受限,MVC架構就是為了分工,分工也意味著,大家可以各自獨立作業,因此 MVC 的架構中,回傳 JSP 的檔名,這樣 JSP 的檔案可以獨立修改,不需編譯就可以自動以新的版本執行。(若要實現這一點,還要配合 tomcat, 這在後面再作介紹),至少,修改的靈活度要高了許多,修改 View 的工程師(稱作前端工程式)就不必理會Controller的設計。
Spring MVC 的設定原本有點小複雜,透過司普令符,就容易許多。總共有五個步驟,重點如下:(先列出標題,詳細內容在列出全部標題後再陳述)

  1. 首先在創建專案時,選擇 Web > Spring Web, 當然,也可以直接修改 pox.xml (Marven) 或 builder.gradle (Gradle) , 增加對 spring-boot-starter-web 的依賴(dependencies) (若是不會修改,請復習第16回:螞粉與蓋兜)。
  2. 增加對 tomcat-embed-jasper 的依賴,以Maven為例,在<dependencies>中增加
	<dependency>
		<groupId>org.apache.tomcat.embed</groupId>
		<artifactId>tomcat-embed-jasper</artifactId>
	</dependency>
  1. 改一道符,不用 @RestController,改用 @Controller (範例詳於後)。
  2. 修改 application.properties 或是使用 @Configuration,@EnableWebMvc
  3. 將 JSP 放到指定的位置 (在範例中為 src/main/webapp/WEB-INF/view/ 若無則新增)

第 3.點

修改前一回,範例(simpleDemo)中的 RoutingController.java

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class RoutingController {
    @GetMapping({"/", "/hello"})
    public String sayHello() {
        return "hello";
    }
}

注意到兩點:

  1. 使用 @Controller 取代 @RestController
  2. 在GetMapping 中,我們也可以包含一個以上的路由,加個大括弧框起來。

第 4.點

然後再修改 src/main/resources/application.properties (若是沒有這個檔案,則新增之)。

# Spring MVC settings
spring.mvc.view.prefix: /WEB-INF/view/
spring.mvc.view.suffix: .jsp

這樣,就設定完成了,前一行 prefix 指明文檔所在的檔案夾, 系統會在前面加上 src/main/webapp/, 因此確實的路徑會是 src/main/webapp/WEB_INF/view(也可以加上檔案的前綴字元,例如我們的檔案名稱是 FILENAME, 我們可以設成WEB-INF/view/; 後一行suffix 指明副檔名為 .jsp, 也可以加上檔名的後綴字元。
這個設定,也可以透過編程來完成,新增類別 SpringConfig,提供 InternalResourceViewResolver

package com.javainterviewpoint;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
public class SpringConfig
{
	@Bean
	public InternalResourceViewResolver viewResolver()
	{
		InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
		viewResolver.setPrefix("/WEB-INF/view/");
		viewResolver.setSuffix(".jsp");		
		return viewResolver;
	}
}

第 5.點

創建 src/main/webapp/WEB-INF/view/hello.jsp ( File > New > Other > Web > JSP File )

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simpleDemo</title>
</head>
<body bgcolor=”greenyellow”>
<h2>Hello</h2>
<p>This is Spring Boot MVC Demo, by Faust @ hello.jsp, </p>
<p>Nice to meet you.</p>
</body>
</html>

執行的結果如下:
https://ithelp.ithome.com.tw/upload/images/20191002/20120951V5KevGxpma.png
現在還有兩件事要解決,第一是Controller 如何收資料(由前端送訊息至後端),第二是Controller 如何發資料(給 JSP,由後端發訊息到前端), 在下面兩回中,我們即將介紹這兩件事。


上一篇
螞粉與蓋兜 (MAVEN vs. Gradle)
下一篇
從地方到中央 (JSP to Controller)
系列文
美麗的邂逅-與安室....伊春30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言