• 使用首頁、輸入畫面、輸出畫面等三個基礎畫面，來熟悉畫面之間跳轉及資料移動的原理。
• 本練習不涉及業務邏輯的開發及資料庫的使用。

IDE(統合開發環境): STS for Eclipse

官網下載點
https://spring.io/tools

專案類型: Maven專案

讓Maven來幫忙管理各類jar包的導入，我們只需決定大類就好。
File->New->Project->Maven Project
在Select an Archetype畫面，搜尋maven-archetype-webapp(可能需要一點時間)
選擇org.apache的純正梅粉
輸入自己定義的組織(Example)和專案名稱(BaseSite)

修改pom.xml

可在網站根目錄下看到此檔案，打造一個webApp所需要的建材清單都在這，只需填入大類名稱，細節由梅粉搞定。
追加以下資源

1. Spring-io
2. servlet
3. taglib
   註:除了Spring-io獨立放在內，其他的資源可追加到既存的範圍內即可。

  <dependencyManagement>
  <dependencies>
    <dependency>
      <groupId>io.spring.platform</groupId>
      <artifactId>platform-bom</artifactId>
      <version>Cairo-SR8</version>
      <type>pom</type>
      <scope>import</scope>
    </dependency>
  </dependencies>
  </dependencyManagement>

  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>org.apache.taglibs</groupId>
      <artifactId>taglibs-standard-jstlel</artifactId>
    </dependency>
  </dependencies>

註:版本號可省略，但大型專案建議寫上。

指定java版本(依照自己使用的版本設定即可)

在maven-compiler-plugin下面追加內容如下例:

          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
          <configuration>
            <source>8</source>
            <target>8</target>
          </configuration>

按Alt + F5更新maven以反映pom的設定

修改web.xml

web.xml是伺服器啟動時會讀取的清單
路徑: src->main->webapp->WEB-INF->web.xml
用以下的內容覆寫原本內容

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="
   http://java.sun.com/xml/ns/javaee 
   http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd
  "
  version="3.0">

  <jsp-config>
        <jsp-property-group>
          <url-pattern>*.jsp</url-pattern>
          <page-encoding>UTF-8</page-encoding>
          <include-prelude>/WEB-INF/include.jsp</include-prelude>
        </jsp-property-group>
  </jsp-config>
</web-app>

jsp-config表示套用到所有的jsp檔案的設定。這樣就不用自行在jsp頁面中進行嵌套。
本範例使用UTF-8，且自動加載include.jsp

include.jsp作成

在/WEB-INF下新增一個include.jsp檔案
並在裡面加入以下內容(jsp檔案用的基本標籤庫)

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

新增server

Window->Preferences->Server->Runtime Environments->Add->Apache Tomcat v9.0
勾選Create a new local server

將專案佈署到server

在server名稱上點右鍵->Add and Remove->Add

啟動伺服器

選擇server並按下綠色播放鍵

在瀏覽器上確認運行成功

http://localhost:8080/BaseSite/

停止伺服器

按下紅色方塊停止鍵

到目前為止，確認了專案可掛載到server上運行

在pom.xml檔案進行library設定(導入jar包)

在 範圍內追加以下內容

    <!--Spring MVC START-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
    </dependency>
    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-validator</artifactId>
    </dependency>
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>jcl-over-slf4j</artifactId>
    </dependency>
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
    </dependency>        
    <!--Spring MVC END-->

保存檔案後按alt+f5 讓maven更新

新增source folder

新增folder->路徑: src/main/->名稱: java (用來放置class檔案)

建立DI容器

• DI容器裡面可以放各種設定檔與java bean
• 可以用文字檔配置，也可以使用Java的class進行配置。本案例使用class檔。
• DI容器可以有多個，包含自定義容器以及Spring MVC所使用的制式DI容器(※需實現WebMvcConfigurer接口)

自定義DI容器

新建AppConfig.class
路徑:src/main/java/example/config/AppConfig.class
本檔案不設定任何內容，僅在類名前加上"@Configuration"註記，供Spring掃描。

package example.config;
import org.springframework.context.annotation.Configuration;
@Configuration
public class AppConfig {

}

設定ContextLoadListener(監聽器)

此監聽器的功能是讓Servlet啟動時，能帶著DI容器一起啟動。
在WEB-INF/web.xml內追加以下設定

    <!--Spring MVC START-->
  <listener>
    <listener-class>
      org.springframework.web.context.ContextLoaderListener
    </listener-class>
  </listener>
  <context-param>
    <param-name>contextClass</param-name>
    <param-value>
      org.springframework.web.context.support.AnnotationConfigWebApplicationContext
    </param-value>
  </context-param>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>example.config.AppConfig</param-value>
  </context-param>   
    <!--Spring MVC END-->

制式DI容器

新建WebMvcConfig.class

@Configuration
@EnableWebMvc
@ComponentScan("example.app")
public class WebMvcConfig implements WebMvcConfigurer {

}

註:

• @Configuration 表示這是一個設定檔
• @EnableWebMvc 自動載入MVC相關bean和設定檔
• @ComponentScan("example.app") 指定註解掃瞄範圍

設定DispatcherServlet

DispatcherServlet是Spring公司提供的制式Servlet，負責對應使用者的各種請求。
在web.xml追加以下內容

    <servlet>
    <servlet-name>app</servlet-name>
    <servlet-class>
      org.springframework.web.servlet.DispatcherServlet
    </servlet-class>
    <init-param>
      <param-name>contextClass</param-name>
      <param-value>
        org.springframework.web.context.support.AnnotationConfigWebApplicationContext
      </param-value>
    </init-param>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>example.config.WebMvcConfig</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet> 
  <servlet-mapping>
    <servlet-name>app</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

• 搭配制式DI容器使用(WebMvcConfig)。
• 對應的url範圍可以指定
• 初始值從springframework拿，也可以在WebMvcConfig裡追加。

設定CharacterEncodingFilter(防止亂碼)

除了HTML預設的ISO 8859-1編碼之外，使用其他的編碼輸入文字的話都需要這個過濾器
在web.xml內追加以下內容

  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>
      org.springframework.web.filter.CharacterEncodingFilter    
    </filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>ForceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

記憶重點

我們在web.xml裡面設定了

• ContextLoadListener(監聽器)
• CharacterEncodingFilter(過濾器)
• DispatcherServlet

並利用class檔 + @Configuration註釋的方式，建立了自製及制式的兩個DI容器
提供給ContextLoadListener和DispatcherServlet使用

設定ViewResolver

指定由誰擔任MVC中view的角色，常見的是指定jsp檔案來擔任。
修改WebMvcConfig，覆寫以下方法。

@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
registry.jsp(); //使用jsp()方法，讓放在WEB-INF下的jsp檔案都會被掃描到
}

在include.jsp內追加MVC用標籤

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 

Controller作成

新增example.app包
在其下新增class檔案WelcomeController

package example.app;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class WelcomeController {

  @RequestMapping("/")
  public String home() {
  return "index"; //當用戶進入首頁，就呼叫名稱為index的jsp檔案(需放在WEB-INF資料夾下)
  }
}

把原先放在webapp下的index.jsp移動到WEB-INF資料夾下
啟動伺服器並打開瀏覽器確認設定正確
http://localhost:8080/BaseSite/

此時是經由WelcomeController導向index頁，與之前自動讀取webapp下的index.jsp不同(檔案放的地方也不一樣了)。

確認首頁能經由Servlet顯示後，接下來建立可輸入文字的頁面以及可顯示結果的頁面。
在index頁面追加輸入頁面的連結(因為有中文，存檔時會跳警告，請存為utf-8格式。)

<html>
<body>
<h2>Hello World!</h2>
<ul>
  <li><a href="<c:url value='/echo' />">前往輸入頁面</a></li>
</ul>
</body>
</html>

要接收用戶輸入的資料，需要一個儲存表單用的EchoForm.class
在example.app包下追加它
※需要實現Serilizable接口

package example.app;

import java.io.Serializable;

public class EchoForm implements Serializable {
private static final long serialVersionID = 1L;

private String text;

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}
}

裡面單純的放一個String型變數text來接收使用者輸入的文字，並設定get,set方法。

新增EchoController

用來處理輸入頁面的請求

package example.app;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
@RequestMapping("echo")  //當url路徑為/echo時觸發此Controller
public class EchoController {

  @RequestMapping(method = RequestMethod.GET)  //當請求方法為get時觸發此方法
  public String viewInput(Model model) {  //model是Spring提供的打包用物件，取代了request的運送功能。
  EchoForm form = new EchoForm();
  model.addAttribute(form);  //使用model的addAttribute()方法把資料放進model裡，屬性名會自動設定為物件名(echoForm)，字首會轉為小寫。
  return "echo/input";
  }
}

在WEB-INF/echo下建立input.jsp

<html>
<body>
  <h2>輸入畫面</h2>
  <form:form modelAttribute="echoForm">
    <div>請輸入文字：</div>
    <div>
      <form:input path="text" />
    </div>
    <div>
      <form:button>送信</form:button>
    </div>
  </form:form>
</body>
</html>

以上input頁面的實裝完成，接下來進行output頁面的實裝
在EchoController追加POST方法

  @RequestMapping(method = RequestMethod.POST)
  public String echo(EchoForm form) {
  return "echo/output";  //本案例不對輸入文字做任何處理，直接導向output頁面
  }

在WEB-INF/echo下建立output.jsp

<html>
<body>
  <h2>輸出畫面</h2>
　　<div>輸入的文字是...</div>
  <div>
      「<span><c:out value="${echoForm.text }"></c:out></span>」
  </div>
  <br>
  <div>
    <a href="<c:url value='/' />">回首頁</a>
  </div>
</body>
</html>

打開伺服器和頁面讓我們來看看成功了沒…
如果出現中文亂碼或是無法識別標籤的情況，請檢查web.xml裡面是否進行了jsp-config的設定