用 Express 來架設靜態網站的後端

2023年4月3日

前言

最初接觸前端時，是透過使用 HTML 和 CSS 來建構網站。然而，如果希望網站具備類似留言板等功能，就必須建立後端架構。以下是使用 Express 快速建立後端的方法~

Installation

安裝 Express

npm install express-generator -g

建立 package.json

npm init
npm install express --save //有save會有版本號碼

在專案中加入 Express

在資料夾中創建一個新的檔案 app.js，在這個檔案中編寫下面的程式碼：

const express = require('express');
const app = express();

// 將 public 資料夾設置為靜態檔案的路徑
app.use(express.static('public'));

// 定義根路徑的路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

// 啟動服務器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

在資料夾中創建一個 public 資料夾，存放之前寫好的 HTML 靜態網站的檔案最後整個專案資料夾的檔案結構如下所示：

.
├── app.js
├── node_modules
├── package-lock.json
├── package.json
└── public //存放之前寫好的 HTML 靜態網站的檔案

啟動Server

於瀏覽器輸入以下網址 http://localhost:3000/ 就能成功看到架設的網站了～

node app.js

前言​

Installation​

在專案中加入 Express​

啟動Server​

前言

Installation

在專案中加入 Express

啟動Server