從零打造一款支持SSR的全棧CMS系統(tǒng)

去年和朋友開發(fā)了一款輕量便捷的內(nèi)容管理系統(tǒng)——「simpleCMS」, 且能同時(shí)適配PC端和移動(dòng)端.

目前市面上已經(jīng)有很多成熟的 「cms」 系統(tǒng), 比如 「worldPress」, 博客系統(tǒng) 「hexo」, 對(duì)于技術(shù)開發(fā)者來說使用和部署很簡單, 但是定制和自定義擴(kuò)展方面, 卻需要一定的技術(shù)門檻和開發(fā)成本.

基于以上一些痛點(diǎn)和局限, 我們開發(fā)了一款簡單易用, 且天然支持服務(wù)端渲染(SSR)的全棧 「cms」 系統(tǒng), 方便大家輕松定制自己的博客網(wǎng)站. 大家可以基于該項(xiàng)目擴(kuò)展成自己的CMS系統(tǒng)或者博客網(wǎng)站.

你將收獲

• 收獲一個(gè)完整的全棧項(xiàng)目
• 對(duì)前端架構(gòu)設(shè)計(jì), nodejs有更深的理解
• 參與一個(gè)高價(jià)值的開源項(xiàng)目, 讓你簡歷更具競爭力
• 對(duì)umi + react生態(tài)有更深的理解
• 升職加薪, 學(xué)到前端進(jìn)階思維

技術(shù)架構(gòu)和實(shí)現(xiàn)方案

為了降低大家的使用和部署成本, 我們采用了如下技術(shù)實(shí)現(xiàn):

• 服務(wù)層: 「koa2 + nodejs + jsonSchema」(當(dāng)然其中還使用了很多nodejs中間件)
• 前臺(tái)頁面: 「pug」(結(jié)合nodejs實(shí)現(xiàn)前后端同構(gòu), 且天然的ssr)
• 后臺(tái)管理: 「umi3.0 + react + antd + axios + typescript」(當(dāng)然還用了很多前端插件, 比如富文本, md編輯器)
• 系統(tǒng)/服務(wù)器相關(guān): 「linux / pm2 / nginx」

基本架構(gòu)模式如下圖所示:

系統(tǒng)頁面架構(gòu)圖: