前言

前幾個月學完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。

本專案僅個人開發練習，不作為任何商業用途