跟著AI一起:從零打造一個互動式網站Day 1

網頁製作網頁排版網頁製作網頁 html

wqq 2025-09-20 22:38:45 ‧ 165 瀏覽

分享至

前端學習地圖與工具介紹（VS Code、瀏覽器 DevTools）👉 延伸補充：Node.js 與 Express 簡介
前端 (Frontend) 是使用者在網頁上所能看到與操作的所有東西，它的核心技術由三部分組成：

1.HTML (HyperText Markup Language)

定義網頁的結構與內容。

2.CSS (Cascading Style Sheets)

用來描述網頁的外觀與樣式。

3.JavaScript (JS)

增加網頁的互動性。

第一個網頁

建立一個檔案 index.html：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello Sunny</title>
</head>
<body>
  <h1>我是sunny</h1>
  <p>這是我的第一個網頁 🎉</p>
</body>
</html>

打開瀏覽器，就能看到一個網頁。
這裡的 <!DOCTYPE html> 告訴瀏覽器這是一個 HTML5 文件。
所有內容都放在 <html> 裡，lang="zh-Hant" 代表語言是繁體中文。
<meta name="viewport" content="width=device-width, initial-scale=1.0">這行讓你的網頁在手機或平板上看起來不會被縮小，而是依照裝置螢幕大小自動調整，改善「響應式設計」的體驗。
<head> 區塊放的是設定（像是標題、字元編碼），<meta charset="UTF-8"> → 設定編碼，避免亂碼，<title> → 網頁標題（會出現在瀏覽器分頁）。
<body> 區塊才是會顯示給使用者看的內容。

這就是前端的第一步：用 HTML 建立內容，用瀏覽器打開檢視。

後端(自己用 Node.js/Express 做一個小後端，前端用 fetch 串接)

第 0 步：確認環境
安裝完成後，開啟命令提示字元 (cmd) / PowerShell / VS Code 終端機，輸入：

node -v
npm -v

👉 如果出現版本號（例如 v20.11.1、10.2.4），代表安裝成功 🎉

先在該資料夾執行：

npm init -y
npm install express cors

然後在 ironman 資料夾裡，我就會有：
package.json（剛初始化好的）
node_modules/（有 express、cors）

第 1 步：建立最小後端 server.js

在 ironman 資料夾新增檔案 server.js，貼上：

// server.js
const express = require('express');
const cors = require('cors');
const app = express();

// 中介軟體：讓後端看得懂 JSON / 表單，並允許前端跨來源請求
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 測試用 API：確認伺服器有跑起來
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello Sunny! 後端成功運作 🚀' });
});

// 註冊 API（等一下前端會呼叫它）
app.post('/api/register', (req, res) => {
  const { username, password, gender } = req.body;
  // checkbox 可能是字串或陣列，統一成陣列
  let hobby = req.body.hobby ?? [];
  if (!Array.isArray(hobby)) hobby = [hobby];

  // 超簡單驗證
  if (!username || !password) {
    return res.status(400).json({ ok: false, message: '請填寫帳號與密碼' });
  }

  // TODO：實務上要加密密碼、寫入資料庫
  res.json({ ok: true, message: '註冊成功', data: { username, gender, hobby } });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`✅ 伺服器已啟動：http://localhost:${PORT}`);
});

啟動後端
在 ironman 資料夾的終端機執行：

npm start

（因為 package.json 已設定 "start": "node server.js"）
瀏覽器打開 http://localhost:3000/api/hello
應該看到：

{"message":"Hello Sunny! 後端成功運作 🚀"}

遇到的問題:
檔案名一定要英文、要儲存完再跑