後端框架與API 開發(二) – 靜態資源

※ 靜態資源回傳

※ 什麼是靜態資源：

• 定義：伺服器上預先準備好的、不會隨著每次請求改變的檔案。這些檔案不需要伺服器進行額外處理，只需透過伺服器提供的連結，即可讓瀏覽器直接下載。
• 資源通常包括：

1. 靜態 HTML 文件。
2. CSS。
3. 圖像（Image）。
4. Video。
5. 字體文件：google fonts。
6. favicon：網頁名稱旁邊的icon。
7. robots.txt：避免網站因要求過多而超載。
8. sitemap：叫做網站地圖，是一種用來提供關於網站內的一些基本資訊的檔案。

※ 靜態資源和動態資源的區別：

• 不是依據網頁中的元素會不會動。
• 是依據資源是否事先準備好。
• 以圖片來說：

1. 請求（request）前就已經準備好，就叫做靜態資源。
2. 請求（request）後才動態生成的圖片（AI生成），就叫做動態資源。

• 以餐廳來說：

1. 餐廳在客人光臨前就已經把菜單準備好了，此時菜單就叫做靜態資源。
2. 客人向餐廳點了一份漢堡，漢堡經過廚房製作後，端到客人面前。此時漢堡就叫做動態資源。

※ 靜態資源回傳實際操作範例介紹

• 提供file.txt 的回傳：

1. 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')
})

2. 設定public folder：用於存放應用程式的靜態資源。

（二）首先建立public資料夾。在public資料夾內建立text資料夾內建立test.txt檔案，並在檔案內容放假資料。

//打造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的回傳：

1. res.sendFile()

（一）在file資料夾中建立html資料夾。在html資料夾內建立test.html檔案，並使用Vs Code快速鍵建立html資料。

//打造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')

})

2. 設定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')

})

2. 設定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、圖片等），並將文件的內容送到瀏覽器。