前端工程師最好的全棧開發實踐-設計開發屬於自己的nodejs部落格

frogo發表於2019-02-26

我本是一名文科專業半路出家的前端開發人員,從最初只會切圖和寫CSS、Html到現在會寫點JS,一路坑坑窪窪,也是經歷了很多,從2010年開始就用WordPress開設了自己的部落格,雖然內容零零散散的並不多,但是多多少少也留下了時光的縮影,一直希望自己有一個自留地。用Node.js做服務端替換WordPress是去年的一個想法,由於一直騰不出時間,所以拖到了現在。當然了WordPress作為全球使用者量最廣的開源部落格程式,易用性等諸多好處無可厚非,光自己的部落格在過去幾年就用了很多套模板,也用它做過很多不同風格不同功能的網站, 也許Node.js不是個人部落格的最好的開發語言選擇,不管是情懷還是其他,我相信一定有前端開發人員跟我一樣有想過這樣的嘗試。市面上開源的部落格程式很多,UI模板也相當漂亮,但是自己開發一個屬於自己的部落格程式,沒事的時候折騰折騰,可能會是一件比較美好的事情,最主要的目的是在其折騰的過程中,可以多嘗試服務端的功能開發,這對從一個純前端轉向全棧開發工程師是非常好的實踐。 git上面有很多開源的Node.js原始碼,教程也比較詳細,有的功能全面,有的相對簡約,當然每個人只要選擇適合自己的就好,下面簡單介紹下我的專案,從技術角度而言,深度有限,大神多提意見。

架構

專案沿用傳統的MVC,比較古老的架構,model(物件模型),view(檢視),controller(控制器),model通俗的說就是資料庫表欄位的對映,view就是介面,UI,controller就是運算元據庫,一般是接收到路由資訊,然後對資料庫進行操作,再把資料返回給view層。如果是熟悉後端的開發人員可能一眼就看的懂,不過對於沒有做過後端開發的純前端人員來說,可能需要一些時間去消化。想起我第一次做全棧開發,一個儲存CCTV配置資料的專案,基於c#和sqlserver,也是標準的MVC架構,很簡單的增刪改查,是廢了不少功夫。

資料庫

資料庫這塊用的MongoDB,為什麼用它,因為簡單好用,再就是它是在非關係資料中功能最豐富,最像關聯式資料庫的。運算元據庫的工具用了mongoose,api易讀,很容易上手。之前是wordpress用的mysql,匯出資料到MongdoDB確實沒什麼特別的好的方法和工具,嘗試用了一些工具和指令碼,效率不高,最後還是手工完成的,好在本人比較懶,那麼多年沒幾篇內容。

WEB框架和模板

後端用了Express的web框架,頁面渲染部分是handlebars模板,個人感覺{{}}大括號的寫法比較適合前端開發人員,但是handlebars模板是個弱邏輯語言,有一些不方便,需要helper,特別是分頁和評論,邏輯特別複雜,不過如果你喜歡hb模板,可以去git上下helper的庫。jade模板(現在改成pug了)會比較方便一些,對一些複雜邏輯的處理比較高效,主要是可以直接在模板中寫js語法,但是縮排的寫法不是每個前端開發都能習慣的。

前端

如今的前後端分離,MV*框架,工程化,模組化,這些概念大行其道,如果一個做前端的不知道這幾個概念,恐怕工作都難找到。但是這個專案沒有前後端分離,直接在後端渲染頁面,也沒有用MVVM框架,工程化和模組化就更不用說了,後臺頁面用了一個jQuery和BootStrap和一些外掛,前臺頁面好像就一個jQuery,CSS基本手寫,我相信前端開發人員看到會比較親切。我的初衷是希望通過這個專案瞭解更多後端開發思路和模式,其次個人部落格是個傳播源,在後端渲染也是為了利於SEO。

原理

我這裡簡單從一個頁面開啟到完全載入,程式做了哪些事去論述一下整個專案工作原理,當你開啟部落格的一個頁面,node.js在後端通過路由機制(express提供的路由模組)去匹配到這個頁面的url,然後查詢對應的controller(就是處理這個URL的函式),在這個controller函式中,對資料庫進行一些過濾篩選(用mongoose對資料庫進行操作)最終拿到頁面需要的資料,然後再把資料傳遞給對應的模板(handlebars),最終渲染成HTML。

由於時間倉促,部落格的功能可能比較簡陋,但是基本的功能已經滿足了,另外專案也有很多沒用到的函式和介面,來不及整理,留待以後擴充套件吧。部落格demo 這是我的部落格git地址github.com/frogo/blog,歡迎大家star和fork,

Screenshot

alt
alt
alt

相關文章