Day 16 : 寫好的前端整合置後端

2025 iThome 鐵人賽

DAY 16

自我挑戰組

第一次團體專題系列第 16 篇

17th鐵人賽

s35indy

2025-09-30 23:43:20

28 瀏覽

分享至

今天的挑戰是將組員寫好的前端網頁和我codex寫好的程式融合 , 一開始還很天真的直接上傳所有檔案到github要求codex整合 , 結果codex直接重新寫了一個網頁 , 後面詢問GPT如何操作 (因為GPT回應速度比codex快非常多) , 依照指示將前端檔案放入github並請codex完成後續程式碼處理才成功 , 後續再繼續處理前端和後端變數不同的問題。
給GPT的prompt如下 :
我現在github有一個運行好的程式，組員寫了一個網頁有css和html，我要如何把這個網頁加上我的程式裡面
給Codex的prompt如下 :
請幫忙修正dashboard.html , 將static等補齊 ,在 HTML 中引用 CSS：

以下為今日遇到的難點紀錄 :

階段	遇到的難點	解決方式
1. 把網頁整合到後端程式	組員寫的 HTML + CSS 要加進你現有的程式，但變數命名和後端不一致	建立 `templates/` (放 HTML) 和 `static/` (放 CSS/JS)；前端 name 與後端變數不一致時，可以：① 調整前端欄位名稱，或 ② 後端用 `request.form.get("userId")` 對應；若變數多，可用「對照字典」自動轉換。
2. branch 被改亂	擔心 branch 亂掉影響組員	- 如果只有本地：`git reset --hard commit_id` 回到正常版本。- 如果已 push：可用 `git revert`（保留歷史、多人安全）或 `git reset --hard` + `git push --force`（完全覆蓋）。- 若要安全又不影響組員，建議開新 branch 備份。
3. 刪掉錯誤上傳的檔案 / 搬移到資料夾	上傳錯誤檔案（如 svg, jpg），想刪或移動到正確位置	- GitHub 網頁版：進入檔案 → 按垃圾桶刪除，或刪後重新上傳到正確資料夾。- 本地 Git：用 `git rm file` 或 `git mv file new/path/`，再 `commit` + `push`。
4. merge conflict	想要「完全照新的版本」，不要一個個解	- 網頁版：只能手動一個個解決。- 本地端可用： `git checkout --ours .` 保留當前分支 `git checkout --theirs .` 保留合併進來的版本或 `git reset --hard new-branch && git push --force` 讓舊分支完全等於新分支。
5. GitHub 網頁版錯誤：subdirectory conflict	嘗試把 `backend/css` 改成資料夾時，GitHub 提示：「Sorry, a file exists where you’re trying to create a subdirectory」	- 問題：`css` 已存在且是檔案，不是資料夾。- 解法：① 先刪掉 `backend/css` 檔案，再新增資料夾 `backend/css/` 放入 `styles.css`；② 改存放路徑，例如 `backend/static/css/`；③ 在本地用 `mkdir -p backend/css && mv styles.css backend/css/`，再 `commit` + `push`。