留言板 - 前端

前後端分離、部署於 AWS EC2、在 Cloudflare 註冊域名的 MPA

Node.js 後端說明

另有 PHP 語法的後端

• 預期功能
• 展示
• 主要技術
• 安裝
• 學習內容
• 展望
• 素材

預期功能

用戶可以

• 瀏覽留言
• 註冊／登入／登出
• 修改帳戶名稱
• 新增／修改／刪除留言

展示

線上部署

/forum	/forum/auth

主要技術

• 前端
  • Vite v5
• Node.js 後端
  • Express v4
  • Sequelize v6
  • MySQL v8
• PHP 後端
  • PHP v8
  • MySQL v8
• 部署
  • Apache v2
  • AWS EC2 Debian
  • Cloudflare Registrar

安裝

dir=/var/www/html/
read -p "Install to [$dir]: " ans
cd ${ans:-$dir}
git clone git@github.com:nepikn/forum-frontend.git

cd forum-frontend/
npm install
npm run build
rm ../forum/ -fr
mv dist/ ../forum/

cd ..
rm forum-frontend/ -fr

學習內容

• 學習歷程 - Apache
• 學習歷程 - AWS
• 依據 HTTP 請求的方法判斷是否渲染

// src/util/api.js
export class Handler {
  // ...

  async handleReq(options = {}) {
    const json = await this.req(options.path || this.defPath, {
      ...this.defOptions,
      ...options,
    });

    (({ method } = options) => {
      if (method && method != "GET") this.render(json);
    })();

    return json;
  }

  // ...
}

// src/api/comment.js
export default class Comment extends Handler {
  defPath = "/comment";
  defOptions = {
    credentials: "include",
  };

  constructor(render) {
    super();
    this.render = render;
  }

  add(contentOrForm) {
    return super.handlePost({
      queries: { content: contentOrForm },
    });
  }

  // ...
}

• 不同模式不同打包配置

// vite.config.js
export default defineConfig(({ mode }) => {
  const cwd = process.cwd();
  const env = loadEnv(mode, cwd);

  // ...
});

展望

• 以 RequestInit.body 傳送 POST、PUT 請求
• 以 React Router 管理前端路由

素材

• Reddit Design System
• Login Page design