作者：小傅哥
部落格：https://bugstack.cn
沉澱、分享、成長，讓自己和他人都能有所收獲！
作為後端碼農，你還寫前端代碼嗎？ 其實小傅哥工作中也很少需要去寫前端代碼，即使有也隻是做做 ERP 頁面，簡單的使用下 HTML、DIV+CSS、JQuery 對着功能修修補補。而這點老技能的積累還是在上學時學習的，那時候有本書叫《鋒利的 JQuery》。學習後，做了好多的的頁面結合後端技術練習程式設計項目。
現在看看這些頁面還挺有意思，學生成績管理、線上考試、圖書館系統，還有一個彩禮管理系統 。距離這些頁面的編寫時間到現在已經有10多年了，而前端的技術為了更好的适應網際網路應用需求的開發，也發生了很多的變化。包括各類新的架構的誕生，讓寫前端代碼也變得面向對象；vue、react、Typescript 等。
一、為啥寫前端代碼？
哈哈哈，其實本來我也不愛寫前端代碼，寫習慣了後端以後，那種打開大合的方式駕馭着資料庫、Redis、ES、Dubbo等以後，突然寫點前端代碼，那一個像素1px，就感覺是在shi上雕花。有時候寫一天那，也就扣吃出來點那麼多東西，是以過往中很少自己去寫前端頁面。那為啥現在要寫呢？
因為，有訴求！當自己想完成一個小東西的時候，隻有後端技術，是沒法展示出自己的想法到一個産品層的。那麼即使你後端的代碼寫的再漂亮，前端不做一個展現，不展現出後端來，還是缺少點什麼。
而這個寫前端代碼的萌芽，就是在小傅哥開始做 ChatGPT-Web 時候開始的，後端的 ChatGPT-SDK、API 模型，小傅哥都可以使用非常好的架構和會話的設計模式來實作。但這樣好的代碼怎麼展現出來呢，隻有自己幹一下才知道！是以，新的征程開始了，我這個前端的二把刀選手，開啟了UI界面的設計和編碼實作。在這裡小傅哥選擇了 next.js + Typescript 因為它更符合面向對象的思維，學習成本低，開發效率高。
二、你想做成啥樣子？
小傅哥給大家部署了一個 ChatGPT 服務，因為它使用的就是 Typescript 語言，并且 UI 設計的還比較符合我的審美。是以小傅哥也想做一個這樣的東西。當然我會程式設計出自己的一個架構結構，并且融入自己的想法進去。位址：itedus.cn - 可以進入體驗。
對于後端碼農來說，你可能乍一看頁面感覺也沒啥。但就這樣一套界面，寫起來也需要老多東西了，而且是在一個新的語言開發下，與直接使用鋒利的JQuery 完全不一樣。但沒關系，好在我的程式設計思想還在，隻要我能要的，基本它都是能支援的。實在不知道的，還可以問 ChatGPT 不是。
三、一番摸索找到路！
有時候你以為 HelloWorld 簡單，那是你已經熟練了一個語言。知道它用什麼工具開發更順暢、怎麼建立工程更容易、設定什麼腳本更好用、怎麼方式編碼才正确。
但沒關系，你所有想開始學習的内容，隻要是小傅哥炸進去的，都會給你趟出一條容易學習的路。既能讓你上手學習到東西，也不至于上你隻是沒有思考的CV代碼。—— 我一直覺得，隻是跟着視訊 CV 代碼，那隻是粘貼老師的思維邏輯，自己啥都沒學到。
- 經過一番摸索已經有點找到開發 Typescript 語言的感覺了，怎麼設定頁面、怎麼路由位址、怎麼引入依賴、怎麼安裝元件。
- 從這個圖上你是不感覺，這東西除了有點前端的味道以外，也挺有後端代碼的感覺的。也都是面向對象的引入、設定、使用。要不說開發就做三件事；定義屬性、建立方法、調用展示。—— 如果你也想學習下，那麼跟着小傅哥肯定是可以學習下來的，并且以後自己也能寫寫頁面。或者說最起碼能修修補補了。
四、已經開發到哪了？
ChatGPT 是小傅哥新增的一個星球項目，做了 Dev-Ops、API、ChatGPT-SDK，最近開始折騰頁面的開發。小傅哥計劃按照PC端微信的界面結構，開發一個網頁版的 UI，并把 AI 對話填充進去。并且支援面試官角色、履歷優化角色、文案編寫角色、法務咨詢角色等，友善各類使用者使用。
- 課程：https://bugstack.cn/md/project/chatgpt/chatgpt.html
- 描述：小傅哥的代碼品質絕對不會湊 CRUD 寫代碼，必須把架構和設計模式安排的明明白白，用加入的兄弟們學到爽！