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

閱讀時間約 12 分鐘

※ 靜態資源回傳

※ 什麼是靜態資源:

  • 定義:伺服器上預先準備好的、不會隨著每次請求改變的檔案。這些檔案不需要伺服器進行額外處理,只需透過伺服器提供的連結,即可讓瀏覽器直接下載。
  • 資源通常包括:
  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')
})
raw-image
  1. 設定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')

})
raw-image
  • 提供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')

})
raw-image
  1. 設定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')

})
raw-image
  • 提供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')

})
raw-image
  1. 設定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')

})
raw-image

※ res.send()和res.sendFile()的差別

res.send() 和 res.sendFile() 都是靜態資源回傳的方法,但它們的用途有所不同:

  • res.send()當你想要給瀏覽器回傳資訊時,可以使用 res.send()。這些資訊可以是文字、數字、陣列或者物件。如果回傳的是物件或陣列,res.send() 會自動把它們轉換成 JSON 格式,讓瀏覽器可以輕鬆讀取。
  • res.sendFile()當你想要給瀏覽器回傳一個文件時,可以使用 res.sendFile();並且提供要發送文件的絕對路徑。然後,res.sendFile() 會自動處理許多細節,包括告訴瀏覽器文件的類型(如 HTML、圖片等),並將文件的內容送到瀏覽器。


    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
    ※ 轉接器模式 定義: 轉接器模式是一種結構型設計模式(有時也被稱為wrapper或裝飾模式),用於將一個類(class)的接口轉換成客戶端所期望的另一個接口。這使得原本因接口不匹配而無法工作的類(class)可以一起工作,讓接口不兼容的類別能夠合作無間。 ※ 數字到字符的轉換過程範例 /
    ※ 生產者和消費者模式 定義: 生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。 共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
    ※ 觀察者模式 定義: 觀察者模式(Observer Pattern)是一種設計模式,涉及兩個主要角色:觀察者(Observers)和被觀察者(Subject)。在這種模式中,一群觀察者訂閱並觀察某個被觀察的對象。當被觀察者的狀態發生改變時,它會通知所有觀察者,讓他們知曉並作出相應的反應。這種模
    ※ 工廠模式 定義: 工廠模式是一種實現了「工廠」概念的物件導向設計模式。它提供一個通用的工廠介面,將創建instance(實例)的程式碼交由子類別各自實現,並根據需求去動態地生成相應的物件。這種模式將物件的創建邏輯與使用邏輯分開,使程式碼更容易維護和擴展。 特點: 具有高度標準化和同質性的
    ※ 單例模式介紹 ※ 定義:單例模式是一種設計模式,確保一個class(類)只有一個實例,並提供一個存取它的全域存取點。無論如何取值,皆只對這個實例取值。 ※ 目的:保證一個類別只會產生一個物件,而且提供存取該物件的統一方法。 ※ 講解:單例模式確保一個類無論怎麼 new 或 get,都只能拿
    ※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
    ※ 轉接器模式 定義: 轉接器模式是一種結構型設計模式(有時也被稱為wrapper或裝飾模式),用於將一個類(class)的接口轉換成客戶端所期望的另一個接口。這使得原本因接口不匹配而無法工作的類(class)可以一起工作,讓接口不兼容的類別能夠合作無間。 ※ 數字到字符的轉換過程範例 /
    ※ 生產者和消費者模式 定義: 生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。 共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
    ※ 觀察者模式 定義: 觀察者模式(Observer Pattern)是一種設計模式,涉及兩個主要角色:觀察者(Observers)和被觀察者(Subject)。在這種模式中,一群觀察者訂閱並觀察某個被觀察的對象。當被觀察者的狀態發生改變時,它會通知所有觀察者,讓他們知曉並作出相應的反應。這種模
    ※ 工廠模式 定義: 工廠模式是一種實現了「工廠」概念的物件導向設計模式。它提供一個通用的工廠介面,將創建instance(實例)的程式碼交由子類別各自實現,並根據需求去動態地生成相應的物件。這種模式將物件的創建邏輯與使用邏輯分開,使程式碼更容易維護和擴展。 特點: 具有高度標準化和同質性的
    ※ 單例模式介紹 ※ 定義:單例模式是一種設計模式,確保一個class(類)只有一個實例,並提供一個存取它的全域存取點。無論如何取值,皆只對這個實例取值。 ※ 目的:保證一個類別只會產生一個物件,而且提供存取該物件的統一方法。 ※ 講解:單例模式確保一個類無論怎麼 new 或 get,都只能拿
    你可能也想看
    Google News 追蹤
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
    Thumbnail
    在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
    Thumbnail
    製作檔案後續流程 -->底片-->曬版-->印刷機---印刷 -->出版----------->印刷機---印刷 最先接觸的是底片機,那時照相機還是膠捲時代,而報紙與周刊要印刷前都是輸出成透明黑字圖底片,再經由曬版功序進入印刷機。 出片機 以下廠牌為當時最大宗(中譯名),西元年是我
    Thumbnail
    菜雞成長故事 寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展,或是想動手做做小專案,故才成就了這一篇心路歷程,這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間,希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考?(雖然我依然還是一個小菜雞,請鞭小力)
    Thumbnail
    #框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式 今天的影片內容,我們來聊聊你有沒有被框架效應綁架了你的判斷? 想想最近新聞瘋狂報導的白飯之亂,公說公有理,婆說婆有理 到底誰才是對的呢? 而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
    Thumbnail
    初學後端的人,可能對如何學習後端技術或語言會感到很困惑。 本篇文章提供了作者的幾種思路,幫助後端學員進行學習
    Thumbnail
    在工作室培訓難免會陷入低潮的原因,本篇文章分析了陷入低潮的原因,及提供預防及解決方法。
    Thumbnail
    這篇文章針對對好想工作室後端培訓(backend camp)有興趣的人,給他們一些申請建議。
    Thumbnail
    本篇文章介紹了好想工作室後端培訓(backend camp)可能會遇到的各種狀況。
    Thumbnail
    簡單介紹好想工作室。 好想工作室是一個在台南的「資訊聚落」,提供免費的軟體工程師培訓,目前位於台南火車站旁。
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    Thumbnail
    軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
    Thumbnail
    在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
    Thumbnail
    製作檔案後續流程 -->底片-->曬版-->印刷機---印刷 -->出版----------->印刷機---印刷 最先接觸的是底片機,那時照相機還是膠捲時代,而報紙與周刊要印刷前都是輸出成透明黑字圖底片,再經由曬版功序進入印刷機。 出片機 以下廠牌為當時最大宗(中譯名),西元年是我
    Thumbnail
    菜雞成長故事 寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展,或是想動手做做小專案,故才成就了這一篇心路歷程,這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間,希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考?(雖然我依然還是一個小菜雞,請鞭小力)
    Thumbnail
    #框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式 今天的影片內容,我們來聊聊你有沒有被框架效應綁架了你的判斷? 想想最近新聞瘋狂報導的白飯之亂,公說公有理,婆說婆有理 到底誰才是對的呢? 而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
    Thumbnail
    初學後端的人,可能對如何學習後端技術或語言會感到很困惑。 本篇文章提供了作者的幾種思路,幫助後端學員進行學習
    Thumbnail
    在工作室培訓難免會陷入低潮的原因,本篇文章分析了陷入低潮的原因,及提供預防及解決方法。
    Thumbnail
    這篇文章針對對好想工作室後端培訓(backend camp)有興趣的人,給他們一些申請建議。
    Thumbnail
    本篇文章介紹了好想工作室後端培訓(backend camp)可能會遇到的各種狀況。
    Thumbnail
    簡單介紹好想工作室。 好想工作室是一個在台南的「資訊聚落」,提供免費的軟體工程師培訓,目前位於台南火車站旁。