專案背景

由於本人對前端領域非常感興趣，接觸到前端的時間也比較早，所以平時會用前端技術做一些有趣的東西，包括H5遊戲，一些簡單框架的封裝，腳手架的設計等等，在我之前的文章中也有比較詳細的介紹。最近由於希望對node服務端技術，vue，react hooks這些技術實踐做一次總結，也希望自己能做出一些比較實用的專案，把它開源出來可以一起完善，優化，迭代。

所以基於這樣的想法，我想到了CMS，我們是不是可以做一個這樣的系統，通過一些配置，生成自己的部落格網站呢？雖然目前也有很多比較好的部落格系統可以使用，比如hexo等，大家也可以參考這些優秀開源的原始碼，也會收穫滿滿。

技術架構

我採用前後端分離的方式開發，具體技術棧有：

• 服務端：NodeJs + Koa + redis + Json-Schema

• 管理後臺：Vue-cli3 + vue + vuex + typescript + axios + antd

• 前臺頁面：WP（自己基於webpack開發的腳手架） + React + axios + antd

• 部署上線：pm2 + nginx

• 程式碼管理：git

react我們會用到最新的react-hooks基礎，也會教一些基本的用法。技術架構圖：

（本圖使用adobeXD繪製，更多技巧多交流哈）

實現效果和關鍵技術點介紹

1.node服務端搭建

這裡我們採用node社群比較輕量的服務端框架Koa，然後服務端中間鍵有：

• ramda函式式庫，提供優雅的呼叫方式來實現業務邏輯，地址ramda

• koa-static提供靜態資源訪問，具體用途在專案實現細節裡面會詳細介紹

• koa-logger控制檯輸出請求日誌，方便開發中進行除錯

• koa-body處理請求報文，讓koa可以方便的拿到post/put的資料

• koa-session處理session相關操作

• koa2-cors本地聯調時通過cors方式處理跨域問題

• ioredis基於nodejs的redis客戶端，效能和操作方式都非常優秀

• jsonschema校驗json資料格式，這裡我用來封裝redis形式的schema

• multer用來處理檔案上傳

• koa-router用來編寫服務端路由和api

• bcrypt對使用者密碼進行加密

上面就是我們web服務端主要使用的中間鍵，對於每一塊如何去組織和架構，包括自己實現錯誤校驗中介軟體，我會在後面一一介紹，由於寫服務端的過程中也查閱了很多資料，如有不足或需要優化的地方，歡迎交流。

服務端大致分為如下幾層：

主要分為資料層，服務層和底層框架層等。

2.後臺管理系統

後臺管理系統主要採用vue相關生態，我會採用typescript和vuex來組織管理程式碼及專案狀態，主要模組有登入模組，許可權控制，部落格配置頁面，文章編寫修改頁面，資料統計頁面等，第三方UI採用antd，效果如下：

登入模組：

主頁模組：

預覽頁面：支援pc端移動端預覽

然後關鍵點在於如何去維護配置的資料和config的資料結構的設計，因為考慮到預覽功能和編輯設計到的狀態既有同步狀態也有非同步，所以我們80%的手遊交易地圖業務是在vuex裡做的。文章編輯這塊用的wangeditor，你也可以採用其他更優秀的富文字編輯器實現很強大的功能。效果圖如下：

總體來說，vue做的後臺管理系統主要用到了vuex，vue-router，antd，axios，wangeditor這幾個核心庫，型別檢驗主要用的typescript，主要涉及到介面型別的定義，第一版不會涉及更多諸如範型的知識，不過會涉及到一點介面的繼承。頁面中的元件的使用，自定義元件的封裝也會在後期詳細介紹，如果有更好的思考，經驗，可以多多交流。

3.CMS前臺實現

前臺實現我主要採用react相關生態去實現，這塊用vue也是可以的，主要是本人想複習和進一步使用react hooks去實現一些有趣的東西。用到的技術主要有：react-router-dom，antd，axios，react-hooks，如果大家想嘗試使用redux，也可以使用，後期我也會總結相關的文章和技術技巧。

理論上這塊是要涉及到服務端渲染的，因為C端產品一個重要的點就是seo，所以後面也會增加ssr相關的技術實現。目前是採用骨架屏來實現偽ssr技術。

然後專案的腳手架我們有采用create-react-app，而是自己總結開發的基於webpack的腳手架，如果對webpack有興趣的，可以一起探索一下webpack的奧妙。因為每個人配置的頁面都不一樣，這裡我展示一個通過我們管理系統配置的一個部落格網站：

最後

由於最近空閒時間都在做專案程式碼優化和調整，nginx伺服器配置和伺服器效能優化的工作，所以希望感興趣的朋友可以一起參與進來，打造一個更完美的CMS。後期將更詳細的介紹系統的具體實現過程和細節以及伺服器相關的配置，包括專案的開源地址我會在十一之前告訴大家，歡迎在公眾號《趣談前端》加入我們一起討論。