基於React+Mobx類知乎文章方面的單頁應用

前言

前幾個月學完React官方文檔教程後準備寫一個博客項目來實踐學習成果，寫完時總以爲博客項目太簡單又爛大街，決定把原來的博客項目改造升級成類知乎文章方面功能的項目。

項目詳細架構和源碼地址：github.com/manyuewuxin…

實現功能

• [x] 登陸註冊
• [x] 建立文章
• [x] 關注標籤
• [x] 文章過濾
• [x] 文章排序
• [x] 文章搜索
• [x] 用戶設置
• [x] 用戶消息
• [x] 用戶動態
• [x] 關注用戶
• [x] 收藏文章
• [x] 評論文章
• [x] 我的主頁
• [x] 後臺管理系統等

部分效果預覽

我的主頁、用戶設置和標籤展現UI設計是模仿掘金社區UI的

後臺管理系統

項目說明

項目比較雜，只挑重點的說。

前端項目

1. 登陸接口有兩種，一種是用react-router路由驅動，好比/login跳轉至登陸頁，另外一種是在Mobx全局建立一個可觀察的login對象，若是是沒有登陸狀態在首頁點贊、收藏、回覆評論等向後端請求會返回一個403狀態碼觸發可觀察login對象彈出登陸模態框。

2. 用戶的消息系統實現思路其實很簡單，當向一個用戶回覆文章、回覆評論、關注時獲取這個被回覆的用戶user_id向後端mongodb的關聯message集合插入一個消息文檔，被回覆的用戶在首次登陸狀態或跳轉路由就會刷新消息請求，沒有使用任何高大上的消息隊列庫，緩存數據庫redis等。用戶的動態設計思路大體和用戶消息同樣，只不過不須要像用戶消息插入被回覆用戶的關聯message集合，而是進入這個用戶我的主頁時向關聯dynamic集合獲取動態數據。

3. 建立文章富文本編輯器使用了國人開發的wangeditor輕量級富文本編輯器，只要不是要求企業級別的標準，這個富文本編輯器基本能夠知足平常編寫文章。

4. 首頁的文章排序沒有使用任何算法，純粹只使用了mongodb的索引排序，根據點擊閱讀量和喜歡次數多鍵索引排序，若是是登陸狀態那麼就使用關注標籤+點擊量+建立日期排序。

5. 前端項目的狀態管理是使用Mobx和局部state混合管理，由於有些組件的狀態是一個區域閉環，每次從新打開須要初始化某個狀態，因此不所有寫入到Mobx。

6. 整個axios請求配置和統一處理請求錯誤寫在request中間件模塊，省去了一個請求寫一個錯誤處理。

後端項目

1. 後端router模塊不是經常使用那種多個一二級路由組成一個路由模塊寫法，而是利用fs模塊在編譯運行階段掃描controller目錄控制器模塊所有導入express-router加載路由，實現路由自動化加載，詳細實現思路能夠看知乎方正這個Nodejs：擺脫黑工坊發展出一款基礎企業級框架文章。

2. mongodb驅動庫是原生nodejs驅動庫，不是mongoose，由於剛寫後端時並不知道有這個超集框架，加上原生驅動庫也有models API，且大部分實現邏輯都是CRUD，索性直接用原生驅動庫。

3. mongodb的用戶數據建模都是標準化數據模型一對多，使用$lookup操做符關聯查詢，這樣設計集合方便查詢和分離文檔儲存空間，如上用戶消息關聯集合所示。

後臺管理系統項目

後臺管理系統使用了螞蟻金服的antd UI組件和chartjs圖表庫，目先後臺管理系統是一個半成品，只實現了審覈文章，圖表，註冊，標籤管理組件，其餘路由組件待擴展更改。

後話

這個項目是我第一次寫全棧開發，可能由於經驗不足有些實現思路不是好的解決思路，若是有怎麼建議能夠在評論回覆或issue。

本項目僅我的開發練習，不做爲任何商業用途