目次
1. HTML 頁面訪問路徑配置
2. 靜態檔案路徑配置
在叡揚接受全端訓練時
為了完成練習題，需要自己配置 HTML 的訪問路徑跟所需的靜態檔
對我這種 Java & Spring Boot 小白來說是一個蠻難得的經驗
畢竟進入專案時，這些路徑都已經被配置好了
故紀錄一下配置的方法和檔案路徑
首先，先確定有安裝 Maven
下面連結為 Vscode 的 Maven 插件
首先先來看一下目錄結構
要配置 HTML 我們要關注的資料夾和檔案有：
- pom.xml
- resources/
- controller/
那我們就接著開始了！
HTML 頁面訪問路徑配置
pom.xml
在這裡我們使用 Spring 官方所推薦的模板引擎 Thymeleaf
它可以支援不同類別的模板，例如：
- HTML (HTML5, XHTML 1.0/1.1, HTML 4)
- XML
- Text (plain text)
- JavaScript (.js files)
- CSS (.css files)
如果你已經裝好 Maven ，我們就可以直接打開 pom.xml 加入
<!-- Template Engine -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>Thymeleaf 的基本配置就已經完成了
resources/template/ & resources/application.yml
│ │ ├── resources
│ │ │ ├── application.yml
│ │ │ │
│ │ │ └── template
│ │ │ └── index.html要配置 HTML 檔，要先至 resources/ 資料夾，創立一個 template/ 資料夾來放置我們的 index.html
之後，編輯底下的 application.yml ，加入：
thymeleaf: cache: false prefix: classpath:/template/ suffix: .html encoding: UTF-8 mode: HTML5
在這裡也一起附上 application.yml 的基本配置
spring: main: allow-bean-definition-overriding: true thymeleaf: cache: false prefix: classpath:/template/ suffix: .html encoding: UTF-8 mode: HTML5 datasource: url: jdbc:mysql://localhost:3306/xxxxx username: xxxx password: xxxx driver-class-name: com.mysql.cj.jdbc.Driver profiles: active: dev, fast jpa: hibernate: ddl-auto: none servlet: multipart: max-file-size: -1 max-request-size: -1server: port: 8080
index.html
在 <html> 加上
<html xmlns:th=”http://www.thymeleaf.org">controller/
在 controller 資料夾底下新增 WebController.java 配置訪問路徑
只需要 return 檔名就好
package com.tutorial.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.stereotype.Controller;
@Controllerpublic class WebController { @RequestMapping({ "/" }) public String getWeb() { return "index"; }}
在瀏覽器上輸入： http://localhost:8080/
Port 看自己的
application.yml怎麼設定的
即可看到網頁首頁～
靜態檔案路徑配置
靜態的 .css .js 檔就沒有那麼複雜
直接 resources/ 資料夾底下創 static/css/ 和 static/js/ 放靜態檔案
│ │ ├── resources
│ │ │ │
│ │ │ ├── application.yml
│ │ │ │
│ │ │ ├── static
│ │ │ │ ├── css
│ │ │ │ │ └── custom.css
│ │ │ │ └── js
│ │ │ │ ├── funcData.js
│ │ │ │ ├── roleData.js
│ │ │ │ └── userData.js
│ │ │ └── template
│ │ │ └── index.html在 index.html 引入 .css .js 時，路徑並不是相對路徑，直接：
<script src="js/funcData.js"></script><link href="css/custom.css" rel="stylesheet" />
即可引入！
拍個手讓我知道，這個文章對你們有幫助 ♥(´∀` )人
