基於nodeJS從0到1實現一個CMS全棧項目（上）

做爲一名前端開發工程師，咱們平時除了對javascript，css，html的積累以外，還須要對http，瀏覽器渲染原理甚至後端的一些知識有所瞭解，這樣對本身職業發展纔會更有幫助。

項目背景

因爲本人對前端領域很是感興趣，接觸到前端的時間也比較早，因此平時會用前端技術作一些有趣的東西，包括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。後期將更詳細的介紹系統的具體實現過程和細節以及服務器相關的配置，包括項目的開源地址我會在十一以前告訴你們，歡迎在公衆號《趣談前端》加入咱們一塊兒討論。

更多推薦

• 《javascript高級程序設計》核心知識總結
• 用css3實現驚豔面試官的背景即背景動畫（高級附源碼）
• 記一次老項目中的跨頁面通訊問題和前端實現文件下載功能
• 5分鐘教你用nodeJS手寫一個mock數據服務器
• JavaScript 中的二叉樹以及二叉搜索樹的實現及應用
• 用 JavaScript 和 C3 實現一個轉盤小遊戲
• 教你用200行代碼寫一個愛豆拼拼樂H5小遊戲（附源碼）
• 基於react/vue生態的前端集成解決方案探索與總結
• 如何用不到200行代碼寫一款屬於本身的js類庫)
• 一張圖教你快速玩轉vue-cli3
• 3分鐘教你用原生js實現具備進度監聽的文件上傳預覽組件
• 使用Angular8和百度地圖api開發《旅遊清單》
• js基本搜索算法實現與170萬條數據下的性能測試
• 《前端算法系列》如何讓前端代碼速度提升60倍
• vue高級進階系列——用typescript玩轉vue和vuex