後端框架與API 開發(2-2) – 靜態資源產生假資料

更新於 2024/07/05閱讀時間約 2 分鐘

※ 用 faker 套件產生假資料步驟

  • 安裝 faker套件快速生成假資料(人名、地名、時間)。
npm install faker@5.5.3
  • 引入 faker 套件:
const faker = require('faker')
  • 建立data資料夾來生成假資料。創建一個名為 generateData.js 的檔案,並在其中使用 faker 來生成假資料。
const faker = require('faker');

function generateFakeData() {
return {
name: faker.name.findName(),
address: faker.address.streetAddress(),
city: faker.address.city(),
email: faker.internet.email(),
date: faker.date.recent()
};
}

module.exports = generateFakeData;
  • 建立Express應用程式並引用假資料生成函數。可以在主檔案(如 app.js 或 index.js)中引用並使用這些資料。
const express = require('express');

const path = require('path');

const generateFakeData = require('./data/generateData'); // 引入生成假資料的函數

const app = express();

const PORT = process.env.PORT || 3000;

// 設定靜態檔案資料夾

app.use(express.static(path.join(__dirname, 'public')));

// 建立路由,並在路由中使用假資料

app.get('/fake-data', (req, res) => {

const fakeData = generateFakeData();

res.json(fakeData);

});

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

※ 用 Vscode 套件產生假資料步驟

  • Extensions的icon中搜尋lorem。
  • 點擊Lorem ipsum進行安裝。
  • ctrl+shift+P。
  • 跑出列表後搜尋lorem。
  • 從快速指令中選擇想插入幾行文字。
  • 插入多段文字記得使用「``」,避免發生錯誤。
    全端網頁開發專業知識分享
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    使用靜態檔案下載 Bootstrap 的原因主要有以下幾點: 客製化:當你下載了 Bootstrap 的靜態檔案,你可以根據自己的需求來修改這些檔案。例如,你可以改變預設的顏色、字型大小、間距等,使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化:如果你的網站只使用 Boot
    ※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
    ※ 靜態資源回傳 ※ 什麼是靜態資源: 定義:是指事先準備好的資源,這些資源在伺服器上是靜態的、不會隨著每個請求而改變。 資源通常包括: 靜態 HTML 文件。 CSS。 圖像(Image)。 Video。 字體文件:google fonts。 favicon:網頁名稱旁邊的ico
    ※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
    ※ 轉接器模式 定義: 轉接器模式是一種結構型設計模式(有時也被稱為wrapper或裝飾模式),用於將一個類(class)的接口轉換成客戶端所期望的另一個接口。這使得原本因接口不匹配而無法工作的類(class)可以一起工作,讓接口不兼容的類別能夠合作無間。 ※ 數字到字符的轉換過程範例 /
    ※ 生產者和消費者模式 定義: 生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。 共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
    使用靜態檔案下載 Bootstrap 的原因主要有以下幾點: 客製化:當你下載了 Bootstrap 的靜態檔案,你可以根據自己的需求來修改這些檔案。例如,你可以改變預設的顏色、字型大小、間距等,使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化:如果你的網站只使用 Boot
    ※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
    ※ 靜態資源回傳 ※ 什麼是靜態資源: 定義:是指事先準備好的資源,這些資源在伺服器上是靜態的、不會隨著每個請求而改變。 資源通常包括: 靜態 HTML 文件。 CSS。 圖像(Image)。 Video。 字體文件:google fonts。 favicon:網頁名稱旁邊的ico
    ※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
    ※ 轉接器模式 定義: 轉接器模式是一種結構型設計模式(有時也被稱為wrapper或裝飾模式),用於將一個類(class)的接口轉換成客戶端所期望的另一個接口。這使得原本因接口不匹配而無法工作的類(class)可以一起工作,讓接口不兼容的類別能夠合作無間。 ※ 數字到字符的轉換過程範例 /
    ※ 生產者和消費者模式 定義: 生產者和消費者在同一時間內共同存取某一個資料空間。生產者負責生成數據並將其放入共享空間,消費者負責從共享空間中取走數據進行處理。兩者之間互不相干,也不須互相知道對方的存在。 共同存取資料空間:生產者和消費者共享同一個資料空間。這個空間通常是緩衝區或隊列,用於在它
    你可能也想看
    Google News 追蹤
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
    Thumbnail
    本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程,包括請假表單和採購表單。以及如何動態生成簽核表單,並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
    Thumbnail
    ts-rest 可以實現從服務器到客戶端的全型別安全,可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
    Thumbnail
    軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
    Thumbnail
    在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
    Thumbnail
    製作檔案後續流程 -->底片-->曬版-->印刷機---印刷 -->出版----------->印刷機---印刷 最先接觸的是底片機,那時照相機還是膠捲時代,而報紙與周刊要印刷前都是輸出成透明黑字圖底片,再經由曬版功序進入印刷機。 出片機 以下廠牌為當時最大宗(中譯名),西元年是我
    Thumbnail
    菜雞成長故事 寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展,或是想動手做做小專案,故才成就了這一篇心路歷程,這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間,希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考?(雖然我依然還是一個小菜雞,請鞭小力)
    Thumbnail
    #框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式 今天的影片內容,我們來聊聊你有沒有被框架效應綁架了你的判斷? 想想最近新聞瘋狂報導的白飯之亂,公說公有理,婆說婆有理 到底誰才是對的呢? 而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
    Thumbnail
    初學後端的人,可能對如何學習後端技術或語言會感到很困惑。 本篇文章提供了作者的幾種思路,幫助後端學員進行學習
    Thumbnail
    在工作室培訓難免會陷入低潮的原因,本篇文章分析了陷入低潮的原因,及提供預防及解決方法。
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
    Thumbnail
    本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程,包括請假表單和採購表單。以及如何動態生成簽核表單,並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
    Thumbnail
    ts-rest 可以實現從服務器到客戶端的全型別安全,可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
    Thumbnail
    軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
    Thumbnail
    在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
    Thumbnail
    製作檔案後續流程 -->底片-->曬版-->印刷機---印刷 -->出版----------->印刷機---印刷 最先接觸的是底片機,那時照相機還是膠捲時代,而報紙與周刊要印刷前都是輸出成透明黑字圖底片,再經由曬版功序進入印刷機。 出片機 以下廠牌為當時最大宗(中譯名),西元年是我
    Thumbnail
    菜雞成長故事 寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展,或是想動手做做小專案,故才成就了這一篇心路歷程,這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間,希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考?(雖然我依然還是一個小菜雞,請鞭小力)
    Thumbnail
    #框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式 今天的影片內容,我們來聊聊你有沒有被框架效應綁架了你的判斷? 想想最近新聞瘋狂報導的白飯之亂,公說公有理,婆說婆有理 到底誰才是對的呢? 而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
    Thumbnail
    初學後端的人,可能對如何學習後端技術或語言會感到很困惑。 本篇文章提供了作者的幾種思路,幫助後端學員進行學習
    Thumbnail
    在工作室培訓難免會陷入低潮的原因,本篇文章分析了陷入低潮的原因,及提供預防及解決方法。