使用 Eclipse 快速建立 Spring Starter Project
使用 Eclipse 快速建立 Spring Starter Project，並且利用 Thymeleaf 或 Apache Freemarker 來建立網頁。Spring 框架( Framework )是以 Java 為平台的一個開源專案。該框架的一些核心功能理論上可用於任何 Java 應用，但 Spring 還為基於 Java企業版平台構建的 Web 應用提供了大量的拓展支援。Spring Boot 是由 Pivotal 團隊提供的全新框架，其設計目的是用來簡化開發過程，如同官方網站寫的：
Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can “just run”.
We take an opinionated view of the Spring platform and third-party libraries so you can get started with minimum fuss. Most Spring Boot applications need very little Spring configuration.
建立一個具備 MVC 網站
在建立 Spring 專案前，可以讀一下 Spring Boot 在 Eclipse 的安裝與設定 與 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab，這在後續的程式開發中都會用到。在開啟 Eclipse 後，先修改 Eclipse 的參數 ( Windows -> Preferences ) 的 Workspace, CSS, HTML files Workspace, CSS, HTML files 編碼均為 UTF8， 並安裝所需的 extensions: FreeMarker, JBoss Tools, ResourceBundle Editor, Spring Tools，以便於開發。
官方網站有一份原文教學: Serving Web Content with Spring MVC，那麼在 Eclipse 如何快速實現呢? 很簡單，我們來試試看，首先在 Eclipse 中的選單 File -> New -> Other 中新增一個 Spring Starter Project 。
接下來給這個專案一個名字： apps， 專案屬於： com.polinwei ，以及這個專案預設的 package：com.apps
因為只是要快速建立一個可以運作的 Web，所以 Project Dependencies 只要選 Spring Web ，再按 Finish 即可。
Eclipse 會自動產生 Gradle 的一個檔案 build.gradle，並且會先執行它
plugins {
id 'org.springframework.boot' version '2.2.1.RELEASE'
id 'io.spring.dependency-management' version '1.0.8.RELEASE'
id 'java'
}
group = 'com.polinwei'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation('org.springframework.boot:spring-boot-starter-test') {
exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
}
}
test {
useJUnitPlatform()
}執行完成後，會取得相關的 JAR 檔，而完成後的目錄結構會像下面這樣
建立 MVC 中的 Controller & View
在此說明 View 的兩種 Template Engine ：Thymeleaf 與 Apache Freemarker ， 當然還有其它的版模引擎，但以目前使用的經驗來說，Thymeleaf 與 Spring MVC Web 的搭配不需要太多的設定就可以運作； Apache Freemarker 的歷史悠久，網路文件的支援比較多，但對於 Spring MVC Web 需要作些設定，其它的版模引擎就不在此討論。
Thymeleaf
先以 Thymeleaf 來說，只要在 build.gradle 的 dependencies 加入 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
testImplementation('org.springframework.boot:spring-boot-starter-test') {
exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
}
}然後在 package: com.apps.controller 建立一個 Controller (控制器) MainController.java ，內容如下：
package com.apps.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class MainController {
@GetMapping("/home")
public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
model.addAttribute("name", name);
return "home";
}
}這裡要注意，因為建立專案時，專案預設的 package 是在 com.apps ，所以 MainController 的 package 需要在 com.apps 下，如本例為 com.apps.controller。
再到 src/main/resources 下的 templates 目錄下建立一個 HTML 檔案 home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home Page</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>然後在 Eclipse 中執行 Spring Boot App，即可連到 http://localhost:8080/home 作流覽，簡單又快速對吧!!
Freemarker
如果是 Freemarker ，則需要在 application.properties 加入 spring.freemarker.suffix: .html 這是要宣告 Freemarker 在 spring boot 的版模引擎檔名是 .html 。因版模引擎本來預設的目錄就是在 templates，所以 spring.freemarker.template-loader-path: classpath:/templates 就不需要宣告了。
# ===============================
# FreeMarker
# ===============================
# spring.freemarker.template-loader-path: classpath:/templates
spring.freemarker.suffix: .html再到 src/main/resources 下的 templates 目錄下建立一個 HTML 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello ${name}!</title>
</head>
<body>
<h2 class="hello-title">Hello ${name}!</h2>
</body>
</html>這樣對於 Freemarker 的設定就完成了，以上面的 Thymeleaf 與 Freemarker 例子比較起來，Freemarker 是比較貼近原本的 HTML 檔案格式。接下來的例子中，也會以 Freemarker 作為主要的開發。
利用 git 將專案上傳到 gitlab.com
作好的專案可以利用 git 將它上傳到 GitHub.com ，作法請參考： 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 文章中的 將已有的地端專案上傳到雲端 GitLab 的雲端程式碼管理庫，這樣就不用每次重覆作一次，而我是將它上傳到 gitlab.com ，git 下的語法是相同的，只是網址不一樣而已。
執行指令後，在 gitlab.com 中可以看到剛上傳的專案。
git 指令還不熟的，再看一下 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 吧!!
Tags
Video
發佈留言