週末的vibe coding，繼續優化工時系統，我開始用接口文檔終結前後端之間的拉扯！
整理版優先睇
用接口文檔終結前後端拉扯：可樂分享細化後的Vibe Coding流程
作者可樂利用週末繼續優化工時系統，今次新增咗去除審批環節、改用MD編輯器填報工時、導出Excel、同埋多維度統計圖等功能。佢最大嘅收穫係摸索出一套讓AI同時寫好前後端而唔使反覆拉扯嘅方法。
具體做法係從自己擅長嘅前端入手，設計好統計圖後，將所需數據整理成接口文檔，再叫AI根據文檔生成後端接口。呢種方式大大減少咗交互次數，接口寫得又準又快。佢仲介紹咗MD編輯器組件、Easy Excel呢啲工具，同埋AI調試時要先詳細描述問題，讓AI分析可能原因（plan mode），而唔係直接叫佢解決。
整體結論係：用接口文檔做橋樑，可以令前後端開發更加順暢，尤其適合Vibe Coding呢種快速迭代嘅方式。文章最後提供咗前後端源碼連結，讀者可以參考。
- 接口文檔係前後端橋樑，能大幅減少AI溝通往返次數，提升開發準確度
- 從自己擅長嘅一端出發（例如前端），設計好後再讓AI根據接口文檔生成另一端
- MD編輯器同Easy Excel可以快速提升工時系統嘅內容格式同導出功能
- 統計需求要考慮多維度聚合：按時間同項目分別統計工時，先有真正價值
- AI調試時先用plan mode分析可能原因，詳細描述問題，避免盲目修改
vue-markdown-editor 組件文檔
用於工時內容填報嘅MD編輯器，支持大部分Markdown格式，但唔支持待辦勾選。
Easy Excel
阿里巴巴開源項目，相比Apache POI更便捷，適合簡單數據查詢場景，可直接讓AI生成導出接口。
前端源碼 (kele-gonshi-frontend)
工時系統前端GitHub倉庫。
後端源碼 (kele-gonshi-backend)
工時系統後端GitHub倉庫。
內容片段
https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/base-editor.html#%E5%9C%A8-vue3-%E4%B8%AD%E5%BC%95%E5%85%A5寫在開頭
Hi，我係可樂。距離上次發文又過咗一週，今次為工時系統更新咗幾個新功能。最大嘅收穫係終於摸索出一套讓AI同時寫好前後端、仲唔使反覆拉扯嘅方法。項目源碼放喺最後，有興趣可以睇下。
用接口文檔終結前後端拉扯
本次修改嘅功能
- 1 去除審批環節：簡化流程。
- 2 工時內容填報改為MD格式，支援全屏編輯。
- 3 加咗工時信息導出功能，可以查詢指定時間範圍。
- 4 加咗兩個統計：針對某個項目嘅工時累計（時間維度），同埋指定年月累計工時最高嘅前5個項目。
- 5 儀表盤入面嘅統計圖數據填充。
MD編輯器與多維度統計係今次重點
常用組件與工具
MD編輯器組件用嚟取代原本嘅文本框，方便寫出格式化內容。組件地址同官方文檔已提供，佢支援大部分MD格式，唯獨唔支援待辦勾選。
Easy Excel係阿里巴巴開源項目
相比Apache POI，導出Excel更加便捷。如果只係簡單數據查詢，可以直接讓AI幫你寫好導出接口，自己一行代碼都唔使寫。
讓AI直接生成導出接口，零代碼
多維度統計嘅思路
統計嘅時候，對於同一個量化值（縱座標），可以揀唔同嘅橫座標做數據聚合。一般可以從時間或空間入手，例如按年份或者按區域。
換句話講，你可以同時知道「某項目每月工時變化」同「某月份邊啲項目工時最高」呢類資訊。
細化Vibe Coding流程
今次最關鍵嘅改進係將接口文檔作為前後端聯調嘅橋樑。由自己擅長嗰一端開始，設計完之後就叫AI根據接口文檔幫手完成另一端。
接口文檔規定咗形參、使用方式同返回JSON格式
- 1 從前端開始，用echarts設計好統計圖。
- 2 將前端需要嘅數據整理成接口文檔。
- 3 叫AI根據接口文檔寫後端請求接口。
- 4 寫後端時，導出數據庫.sql文件畀AI瞭解表結構，可以寫複雜SQL，唔侷限於ORM。
相比直接畀提示詞，接口文檔令交互次數大幅減少，接口寫得好準確。
呢種交互方式寫出嘅接口非常準確
AI調試技巧
注意：每次代碼冇異常、準備開始下一段邏輯嘅時候，一定要提交git——呢個係血淚教訓。
例如：「當前頁面統計圖喺選擇日期後冇更新，統計圖消失，控制枱報錯XXX。」越詳細越好。
先plan mode再fix，事半功倍
寫在開頭
hi，我是可樂
距離上次發文又過了一週，這次給系統更新了一些新的功能。
最大的收穫是，終於摸索出一套讓AI同時寫好前後端還不用反覆拉扯的方法。項目源碼連結放在了最後，大家感興趣可以看一下
1. 本次修改的功能
1）去除審批環節
2）工時內容填報，切換為md格式，可以全屏編輯
3）加一個工時信息導出，（可以查詢指定的時間範圍）
4）加兩個工時信息統計，
4.1 針對某個項目的工時累計，在時間維度的統計
4.2 指定年月，羅列累計工時最高的前5個項目
5）儀表盤中的統計圖數據填充
2. 本次coding經驗分享
2.1 MD編輯器組件
在填寫工作內容的位置，把原本的文本框替換為MD編輯器，方便寫出更加格式化的內容。
組件地址：我試了一下，支持了大部分的md格式，就是代辦勾選的功能好像不支持。官方文檔如下，大家感興趣可以看一下。
https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/base-editor.html#%E5%9C%A8-vue3-%E4%B8%AD%E5%BC%95%E5%85%A5
2.2 Easy Excel
Alibaba的開源項目，這個不需要我多解釋了，直接看官網吧，相比於 Apache POI，用它導出Excel更加便捷。如果涉及到的數據只是簡單的數據查詢，可以讓AI直接幫你寫好導出接口，自己一行代碼也不用寫。
2.3 挖出統計的需求
我們在統計的時候，對於同一個量化值（縱座標），可以選擇不同的橫座標進行數據聚合。一般可以選擇從時間或空間入手，比如按照年份進行統計，或者按照區域的不同進行統計。
在這個項目中，量化值為工時，那麼時間可以作為一個數據的聚合標準，每個項目也可以作為一個數據的聚合標準。這樣，多維度的統計就出來了。
2.4 細化了 vibe coding 流程
相比於上一次的前後端聯調，這次我把接口文檔作為前後端聯調的橋樑。
就像上次文章中說的那樣，我們要從我們擅長的那一端入手，在設計完我們擅長的那一端之後，可以向AI發出下面的提示詞，讓AI根據接口文檔幫助我們完成不擅長的事情。
現在把這個(接口 / 前端組件需要的數據)整理成接口文檔，我要發給（前端 / 後端）看
本期從前端開始，以設計前端統計圖為例，把整個流程跑一遍。
咱們先在前端用echarts完成統計圖設計後，接下來就是要填充數據。
我們把上面的提示詞丟給AI，然後你就能得到下面的文本：
把接口文檔複製，讓AI為後端開始寫請求接口。
在寫後端接口的時候，可以導出一個數據庫的.sql文件，這樣AI可以瞭解你的表結構，可以給你寫複雜sql，而不是隻會通過orm框架完成數據處理與查詢，對於簡單的聯查sql，在你業務描述準確的情況下，一次就能跑通。
這就是這次細化後的流程。相比於自己直接寫提示詞給前後端，接口文檔直接規定了形參，使用方式，返回的json串的格式。這種交互方式寫出的接口非常準確，大大減少了交互次數。
2.5 AI調試一直出錯怎麼辦
注意：在每次代碼無異常，要開始下一段邏輯的時候，一定要提交git。（血淚教訓）
本次vibe coding的過程中，遇到錯誤後，我覺得最有效的解決方法：
1）詳細的描述問題。比如當前頁面的統計圖在選擇日期後沒有更新，統計圖消失，控制枱報錯xxx。越詳細越好。
2）讓AI幫你分析問題可能會出現在哪裏。注意，一定要讓他給你分析問題可能會出現在哪裏（plan mode），而不是直接讓他給你解決報錯。前期的多次計劃分析，反而能幫你節省很多時間。
寫在最後
以上就是今天的經驗分享，你在vibe coding 中遇到過什麼難題嗎？
分享出來，我們共同進步
源碼連結放在最後，下期再見啦，Bye~
github連結
前端地址：
https://github.com/feikelez/kele-gonshi-frontend.git後端地址：
https://github.com/feikelez/kele-gonshi-backend.git