2020 年 5 月 14 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

使用 Eclipse 快速建立 Spring Starter Project

2 min read

使用 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.

 

  1. 建立一個具備 MVC 網站
  2. 建立 MVC 中的 Controller & View
  3. Thymeleaf
  4. Freemarker
  5. 利用 git 將專案上傳到 gitlab.com

 

 

在建立 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,以便於開發。

 

  • 建立一個具備 MVC 網站

官方網站有一份原文教學: Serving Web Content with Spring MVC,那麼在 Eclipse 如何快速實現呢? 很簡單,我們來試試看,首先在 Eclipse 中的選單 File -> New -> Other 中新增一個 Spring Starter Project 。

spring_starter_project

接下來給這個專案一個名字: apps,  專案屬於: com.polinwei ,以及這個專案預設的 package:com.apps

spring-package

因為只是要快速建立一個可以運作的 Web,所以 Project Dependencies 只要選 Spring Web ,再按 Finish 即可。

spring-web

 

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 檔,而完成後的目錄結構會像下面這樣

spring-init-architecture

 

  • 建立 MVC 中的 Controller & View

在此說明 View 的兩種 Template Engine :ThymeleafApache 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 作流覽,簡單又快速對吧!!

springboot-thymeleaf

 

  • 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 的設定就完成了,以上面的 ThymeleafFreemarker 例子比較起來,Freemarker 是比較貼近原本的 HTML 檔案格式。接下來的例子中,也會以 Freemarker 作為主要的開發。

 

  • 利用 git 將專案上傳到 gitlab.com

作好的專案可以利用 git 將它上傳到 GitHub.com ,作法請參考: 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 文章中的 將已有的地端專案上傳到雲端 GitLab 的雲端程式碼管理庫,這樣就不用每次重覆作一次,而我是將它上傳到 gitlab.com ,git 下的語法是相同的,只是網址不一樣而已。

git_project_to_gitlab

執行指令後,在 gitlab.com 中可以看到剛上傳的專案。

gitlab_project_detail

 

git 指令還不熟的,再看一下 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 吧!!

 

 

 

 

Copyright © All rights reserved. | Newsphere by AF themes.