專案概述
紀氏五金品牌形象網站。開發內部後台與 API 供前端使用。 專案包含完整的內容管理系統,支援 Excel 批次上傳與多媒體格式處理。
專案類型: 企業形象網站
開發時間: 2023年3月
主要技術: Laravel, AWS S3, Nuxt3
前端框架: Nuxt3 (SSR)
雲端服務: AWS S3, Netlify
網站連結: 前往網站
專案範圍
負責開發內部後台與API供前端使用。整個專案採用前後端分離架構, 後端專注於資料處理與 API 服務,前端則使用 Nuxt3 框架建置。
前端網站採用現代化設計,具有優秀的使用者體驗。整合 SEO 優化與響應式設計, 確保在所有裝置上都能完美呈現企業形象。
後台管理介面展示
產品資料管理與批次處理
Scribe API 文件介面
專案成果
100%
資料遷移成功率
50+
API 端點
3000+
產品資料記錄
A+
SEO 分數
後端技術細節
全 API 架構
此專案幾乎所有資料都是透過 API 處理,後台可以對全部資料做 CRUD。 採用 RESTful API 設計原則,提供完整的資源操作介面。
資料遷移處理
因為舊網站是 WordPress,所以在資料遷移上使用 Excel 上傳, 花不少時間跟 PM 溝通 Excel 上傳的格式與規則。透過精心設計的匯入流程, 確保所有資料都能正確轉移到新系統。
複雜格式處理
Excel 規則包含處理 富文本編輯器中的圖片路徑、YouTube 影片嵌入轉換、以及 多種檔案格式。 確保所有媒體檔案在資料遷移過程中都能正確轉換與保存。系統能夠自動識別各種媒體類型, 並進行相應的格式轉換,大幅降低人工處理的工作量。
新技術探索
此專案嘗試了之前沒用過的服務:
- AWS S3 - 雲端檔案儲存服務,第一次使用 AWS 生態系統, 學習了物件儲存的概念與 IAM 權限管理
- Scribe API Docs - API 文件生成工具,使用體驗遠超 Swagger
Scribe 使用心得
Scribe 超級實用,語法相比 Swagger 簡單非常多。對前端非常友善,最喜歡的功能是可以產生相對應的程式碼給前端工程師複製貼上, 大幅加速雙方的開發流程。文件會自動從程式碼註解生成,保持文件與程式碼的同步性。
前端技術選擇
專案前端使用 Nuxt3, 考量到之後客戶可能會有 SEO 的需求。Nuxt3 的 SSR 功能能夠確保搜尋引擎能夠正確索引網站內容, 同時也提供優秀的開發體驗與效能表現。部署到 Netlify 後,享受到了 CI/CD 自動化部署的便利性。
核心功能
Excel 批次處理
智能 Excel 格式解析,自動處理圖片路徑與媒體轉換,從 WordPress 遷移資料時特別實用
AWS S3 整合
無縫接軌雲端儲存,提供穩定的檔案管理服務,確保媒體資源的高可用性
Scribe API 文件
自動生成互動式 API 文件,提升開發協作效率,語法比 Swagger 簡單許多
WordPress 遷移
完整的內容管理系統遷移,保持資料完整性,順利從舊系統轉移到新平台
多媒體處理
支援圖片、影片等多種媒體格式的智能轉換,包含 YouTube 影片嵌入轉換
SEO 優化
Nuxt3 SSR 支援,確保搜尋引擎友善的網站架構,提升網站能見度
使用技術
Server
- Linode 雲端主機
- AWS S3 物件儲存
後端
- Laravel Framework
- Livewire - 後台互動介面
- RESTful API 設計
- Excel 資料處理
API 文檔
- Scribe API Docs - 自動生成 API 文件