※ 靜態資源回傳
※ 什麼是靜態資源：
- 定義：伺服器上預先準備好的、不會隨著每次請求改變的檔案。這些檔案不需要伺服器進行額外處理，只需透過伺服器提供的連結，即可讓瀏覽器直接下載。
- 資源通常包括：
- 靜態 HTML 文件。
- CSS。
- 圖像（Image）。
- Video。
- 字體文件：google fonts。
- favicon：網頁名稱旁邊的icon。
- robots.txt：避免網站因要求過多而超載。
- sitemap：叫做網站地圖，是一種用來提供關於網站內的一些基本資訊的檔案。
※ 靜態資源和動態資源的區別：
- 不是依據網頁中的元素會不會動。
- 是依據資源是否事先準備好。
- 以圖片來說：
- 請求（request）前就已經準備好，就叫做靜態資源。
- 請求（request）後才動態生成的圖片（AI生成），就叫做動態資源。
- 以餐廳來說：
- 餐廳在客人光臨前就已經把菜單準備好了，此時菜單就叫做靜態資源。
- 客人向餐廳點了一份漢堡，漢堡經過廚房製作後，端到客人面前。此時漢堡就叫做動態資源。
※ 靜態資源回傳實際操作範例介紹
- 提供file.txt 的回傳：
- res.sendFile()：將指定路徑的文件發送到客戶端。
（一）首先在file資料夾中建立txt資料夾。在txt資料夾內建立test.txt檔案，並在檔案內容放假資料。
//打造web server應用程式
const express = require("express") //載入express套件
const app = express() //建立application實例
const path = require("path") //取得絕對路徑；path是內建模組，專門處理文件和目錄的路徑。
//設定根路由
app.get("/", (req, res) => {
res.send("hello, world")
})
//第一種回傳file.txt；取得靜態資源，利用res.sendFile
app.get("/txt", (req, res) => {
//確保程式在不同的作業系統上取得專案資料夾的絕對路徑
const absPath = path.join(__dirname, "/file/test.txt")
//載入檔案發生錯誤時的處理方式
res.sendFile(absPath, (err) => {
console.log(err)
})
}
)
//設立錯誤訊息
// 通配符路由，捕捉所有其他未定義的 GET 請求
app.get("/*", (req, res) => {
res.send("Not found")
})
//監聽port
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
- 設定public folder：用於存放應用程式的靜態資源。
//打造web server應用程式
const express = require("express") //載入express套件
const app = express() //建立application實例
// 第二種回傳file.txt；當他的請求路徑是static時才提供public folder
app.use("/static", express.static("public"))//告訴 Express 靜態檔案的資料夾位置
//設定根路由
app.get("/", (req, res) => {
res.send("hello, world")
})
//設立錯誤訊息
// 通配符路由，捕捉所有其他未定義的 GET 請求
app.get("/*", (req, res) => {
res.send("Not found")
})
//監聽port
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
- 提供html的回傳：
- res.sendFile()
//打造web server應用程式
const express = require("express") //載入express套件
const app = express() //建立application實例
const path = require("path") //取得絕對路徑
//設定根路由
app.get("/", (req, res) => {
res.send("hello, world")
})
//回傳html
app.get('/getHtml', (req, res) => {
//取得專案資料夾的絕對路徑
const absPath = path.join(__dirname, "/file/html/test.html")
//載入檔案發生錯誤時的處理方式
//先定義一個絕對路徑，取得事先準備好的資源
res.sendFile(absPath, (err) => {
console.log(err)
})
})
//設立錯誤訊息
// 通配符路由，捕捉所有其他未定義的 GET 請求
app.get("/*", (req, res) => {
res.send("Not found")
})
//監聽port
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
- 設定public folder
（二）在public資料夾內建立html資料夾。在html資料夾內建立test.html檔案，並使用Vs Code快速鍵（html）建立html資料。
//打造web server應用程式
const express = require("express") //載入express套件
const app = express() //建立application實例
// 第二種回傳file.txt；當他的請求路徑是static時才提供public folder
app.use("/static", express.static("public"))//一樣無須修改
//設定根路由
app.get("/", (req, res) => {
res.send("hello, world")
})
//設立錯誤訊息
// 通配符路由，捕捉所有其他未定義的 GET 請求
app.get("/*", (req, res) => {
res.send("Not found")
})
//監聽port
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
- 提供Image的回傳：
（一）在file資料夾中建立image資料夾。在image資料夾內建立image檔案。
//打造web server應用程式
const express = require("express") //載入express套件
const app = express() //建立application實例
const path = require("path") //取得絕對路徑
//設定根路由
app.get("/", (req, res) => {
res.send("hello, world")
})
//提供image
app.get('/getImage', (req, res) => {
//取得專案資料夾的絕對路徑
const absPath = path.join(__dirname, "/file/image/angels-1.jpg")
//載入檔案發生錯誤時的處理方式
//先定義一個絕對路徑，取得事先準備好的資源
res.sendFile(absPath, (err) => {
console.log(err)
})
})
//設立錯誤訊息
// 通配符路由，捕捉所有其他未定義的 GET 請求
app.get("/*", (req, res) => {
res.send("Not found")
})
//監聽port
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
- 設定public folder， html 即可寫入 <img src=“” />。
（二）在public資料夾內建立image資料夾。在image資料夾內建立image檔案。
//打造web server應用程式
const express = require("express") //載入express套件
const app = express() //建立application實例
// 第二種回傳file.txt；當他的請求路徑是static時才提供public folder
app.use("/static", express.static("public"))//一樣無須修改
//設定根路由
app.get("/", (req, res) => {
res.send("hello, world")
})
//設立錯誤訊息
// 通配符路由，捕捉所有其他未定義的 GET 請求
app.get("/*", (req, res) => {
res.send("Not found")
})
//監聽port
app.listen(3000, () => {
console.log('express app listen on port 3000')
})
※ res.send()和res.sendFile()的差別
res.send() 和 res.sendFile() 都是靜態資源回傳的方法，但它們的用途有所不同：
- res.send()：當你想要給瀏覽器回傳資訊時，可以使用
res.send()。這些資訊可以是文字、數字、陣列或者物件。如果回傳的是物件或陣列，res.send()會自動把它們轉換成 JSON 格式，讓瀏覽器可以輕鬆讀取。 - res.sendFile()：當你想要給瀏覽器回傳一個文件時，可以使用
res.sendFile()；並且提供要發送文件的絕對路徑。然後，res.sendFile()會自動處理許多細節，包括告訴瀏覽器文件的類型（如 HTML、圖片等），並將文件的內容送到瀏覽器。