Cloudflare Workers 全端 Demo:React SPA + Hono API + D1(資料)+ R2(媒體)。
Browser (React SPA)
│
├─ static assets → Workers Assets
└─ /api/* → Worker (Hono) [run_worker_first]
├─ D1 kghs-db
└─ R2 kghs-media
npm install
npm run db:migrate:local
npm run cf-typegen
npm run dev開啟 Vite 網址後會導向登入頁;首次登入會初始化 D1。之後一般 POST /api/seed 不會覆寫既有資料(含密碼),僅 ?force=1 才重匯。
| 帳號 | 角色 |
|---|---|
st001~st006 |
學生 |
t001 / t002 / t003 |
教師 |
staff01~staff04 |
處室承辦(總務/輔導/圖書/學務) |
admin |
管理員 |
帳號設定:登入帳號不可編輯;姓名可改;密碼需確認後更新。管理員可新增/編輯/刪除使用者。
Worker 名稱:kghs · D1:kghs-db · R2:kghs-media
# 建立遠端資源(首次)
npx wrangler d1 create kghs-db
npx wrangler r2 bucket create kghs-media
# 把回傳的 database_id 填入 wrangler.jsonc
npm run db:migrate:remote
npm run deploy部署後打一次 POST https://kghs.<account>.workers.dev/api/seed 初始化資料。
| 路由 | 處室 | 重點 |
|---|---|---|
/login |
— | 帳號密碼登入(Session 存 D1) |
/account |
— | 個人資料/密碼;管理員帳號 CRUD |
/repairs |
總務 | 語音/Vision 報修、SOP、預防保養預算、推播紀錄 |
/resources |
輔導 | 資源 CRUD、依年級自動推播 |
/books |
圖書館 | 推薦推播、國圖 Mock 建購匯出 |
/leaves |
學務 | 請假申請 CRUD 與審核 |
/analytics |
學務 | 出缺勤/校安、缺席×成績、輔導轉介 |
- 文件:
GET /api/vendor/docs - 認證:
X-Vendor-Key: vendor-ac-demo-key(另有 elec/lock/av) - 工單:
GET /api/vendor/tickets - 回寫:
POST /api/vendor/tickets/:id/callbackbody{ status, note, externalRef?, eta? } - 廠商入口頁:
/vendor - 總務 UI:報修 →「廠商回寫」可派工/模擬 callback
允許狀態:assigned→parts|in_progress,parts→in_progress|assigned,in_progress→completed|parts
- 執行期唯一來源:Cloudflare D1(帳號、請假、收藏、報修、資源、圖書、分析等皆有 CRUD)
worker/data/*.json僅供 seed 初始化,非執行期讀寫- 瀏覽器僅暫存登入 token(
kghs_token),業務資料不落地本機文字檔
# 開發中重匯種子資料
curl -X POST 'http://127.0.0.1:5173/api/seed?force=1'