🏪 品牌電商 · 全端開發

品牌官網 + 後台管理系統

為電商品牌打造完整的前台品牌展示頁與後台內容管理系統,讓業主無需工程師即可自行更新網站內容、管理社群連結。

Node.js Express SQLite JWT 登入 HTML / CSS REST API RWD

功能總覽

這個系統能做什麼?

業主不需要懂程式,登入後台就能改掉前台所有內容,儲存後前台立即生效。

🖼️
Hero 主視覺管理
品牌名稱、主標題、副標描述,後台改完前台馬上更新,不需要碰程式碼。
品牌理念編輯
核心價值可新增、刪除、調整順序,最多 4 項,適合品牌定期更新訴求重點。
📱
社群連結管理
IG、LINE 官方帳號連結統一在後台設定,換帳號不需要找工程師。
🔐
安全登入系統
JWT Token 驗證,密碼 bcrypt 加密儲存,登出後 Token 自動失效。
🔑
修改密碼
後台內建改密碼功能,驗證舊密碼後才能設定新密碼,安全有保障。
🗄️
資料庫持久化
所有內容存在 SQLite 資料庫,重啟伺服器資料不會消失,可隨時備份。

畫面預覽

前台 × 後台,一次看清楚

左側是客人看到的品牌首頁,右側是業主登入後的管理介面。

🌐 前台品牌首頁 客人看到的
— Collection 2025
美好
生活的
選擇
我們相信,每一件精心設計的物件,都承載著創作者對生活的態度與理解。
探索品牌 追蹤我們
B

米白底 · 日式工藝質感 · 左右分割版型

⚙️ 後台管理介面 業主登入後
BRAND
Content Manager
總覽
總覽
內容管理
首頁 Hero
品牌理念
社群連結
帳號
修改密碼
總覽
歡迎回來,管理員
前台狀態
上線
● 正常運作中
可管理區塊
4
個內容區塊
社群連結
2
IG + LINE
— 快速編輯
Hero 區塊 品牌理念 社群連結 修改密碼

深色側欄 · 象牙白主區 · 登入後才能進入


技術架構

用了哪些技術?

前後端分離架構,後端提供 REST API,前台與後台各自讀取,部署靈活。

🟢
Node.js
後端執行環境
🚂
Express
API 路由框架
🗃️
SQLite
輕量資料庫
🔑
JWT
登入驗證
🔒
bcrypt
密碼加密
🌐
HTML / CSS
前後台介面
Fetch API
前端打 API
📦
REST API
前後端溝通

可擴充方向

這套系統還能加什麼?

這是一個可以持續成長的架構,以下功能都可以在現有基礎上擴充。

🚀 下一步可以做的
根據客戶需求選擇性追加,不影響現有功能。
🖼️
圖片上傳
後台直接上傳圖片取代文字佔位符,用 multer 處理。
🛒
商品頁 + 購物車
新增商品管理、購物車功能,擴充為完整電商。
💳
金流串接
串接綠界 ECPay,支援信用卡、超商代碼付款。
📦
物流整合
7-11、黑貓取貨,透過綠界物流 API 一起串。
👥
會員系統
顧客註冊登入、訂單查詢、購買紀錄管理。
☁️
雲端部署
部署到 VPS 或 Railway,讓網站真正上線給客人使用。
想要一個類似的系統?
我們可以依照你的品牌需求客製化,從設計到上線全包。
找我們聊聊 🐾