SSH 專案開發流程：先行設計 UI 介面再實現業務邏輯的可行性與方法

結論：完全可行，且為主流敏捷開發模式

前後端分離架構下，UI 設計與業務開發可並行，關鍵在於介面契約的前期協商。

實施步驟

1. 需求分析與原型設計：產出線框圖/高保真原型（Axure, Figma, Sketch），確認交互流程。
2. 介面契約定義：雙方協議 RESTful API 規範：
   • URL、HTTP Method、請求/回應 JSON 結構
   • 錯誤碼、分頁、排序、過濾參數
   • 認證方式（JWT, OAuth2 等）
3. 前端先行開發（Mock 數據）：
   • 靜態頁面：HTML5 + CSS3 (Less/Sass) + JS (Vue/React/Angular/jQuery)。
   • 使用 Mock.js、json-server 或 Swagger Mock 服務模擬後端回應。
   • 完成頁面渲染、表單驗證、交互邏輯。
4. 後端並行開發：
   • 資料庫設計、實體類、DAO/Repository。
   • Service 層業務邏輯、事務控制。
   • Controller 實現契約介面，整合 Swagger 文件自動生成。
5. 聯調與整合：前端切換至真實 API，解決字段不匹配、異常處理、權限控制等問題。

關鍵技術點

• 跨域處理：開發期配置 CORS 或前端代理 (vue.config.js proxy / setupProxy.js)。
• 介面文件同步：採用 Swagger/OpenAPI 3.0，代碼即文件，減少溝通成本。
• 版本控制策略：前後端分倉或 Mono-repo 皆可，關鍵在分支管理與 CI/CD 流水線。

注意事項

若採用傳統 JSP/Velocity 服務端渲染模式，則需先定資料結構、Controller 回傳 Model，再寫頁面，無法完全分離。現代專案強烈建議前後端分離。