react全家桶+express實戰技術部落格系列教程

• 2019 年 10 月 10 日
• 筆記

開源地址

https://github.com/Nealyang/React-Express-Blog-Demo

說明

放到開頭，這裡重點說明下，很多哥們會發郵件或者群里艾特，但是好多郵件回復不了不知道什麼情況，群里有時候不怎麼關注就錯過了，大家如果有啥問題咱就直接提issue吧，後面朋友遇到相同問題大家也可以參考

功能描述

前端部分

• 文章列表展示
• 文章分類
• 登錄管理
• 許可權管理
• 文章詳情頁展示
• 管理員文章管理
• 管理員標籤管理
• 發文（支援MarkDown語法）

後端部分

• mongoose資料庫操作
• 路由管理
• 身份驗證
• 基本的增刪改查
• ...

技術棧

• react
• react-redux
• react-router
• redux-saga
• babel
• webpack
• Express
• Mongodb
• Mongoose

TODO

• 文章評論

項目運行效果（這個GIF不是連續播放的，我好煩）

• 查看文章詳情

• 非管理員登錄

• 管理員登錄

• 發表文章

• 修改文章

• 標籤管理

項目介紹

當然這是一個全棧的開源demo，在此之前寫過一個模仿大眾點評的Demo,有兄弟反應說應該加點注釋。 因為實在不想回頭再麻煩，就想在這個demo中再加。

這個demo就是一個簡單的增刪改查的部落格demo。前端用react技術棧、後端是express+mongoose。

項目實現步驟系列部落格

• 實戰react技術棧+express前後端部落格項目（0）-- 預熱一波
• 實戰react技術棧+express前後端部落格項目（1）-- 整體項目結構搭建、state狀態樹設計
• 實戰react技術棧+express前後端部落格項目（2）-- 前端react-xxx、路由配置
• 實戰react技術棧+express前後端部落格項目（3）-- 後端路由、代理以及靜態資源託管等其他配置說明
• 實戰react技術棧+express前後端部落格項目（4）-- 部落格首頁程式碼編寫以及redux-saga組織
• 實戰react技術棧+express前後端部落格項目（5）-- 前後端實現登錄功能
• 實戰react技術棧+express前後端部落格項目（6）-- 使用session實現免登陸+管理後台許可權驗證
• 實戰react技術棧+express前後端部落格項目（7）-- 前端管理介面用戶查看功能+後端對應介面開發
• 實戰react技術棧+express前後端部落格項目（8）-- 前端管理介面標籤管理功能+後端對應介面開發
• 實戰react技術棧+express前後端部落格項目（9）-- 前端管理介面發表文章功能+後端對應介面
• 開發實戰react技術棧+express前後端部落格項目（10）-- 前端文章列表、路由控制以及對應後端文章管理開發
• 實戰react技術棧+express前後端部落格項目（11）-- 前端文章管理部分完善（修改、預覽功能）
• 實戰react技術棧+express前後端部落格項目（12）-- 部落格添加評論功能以及對應後端實現
• 實戰react技術棧+express前後端部落格項目（13）-- pm2的使用說明
• 實戰react技術棧+express前後端部落格項目（14）-- 收工

環境

node @7.9.0  db @3.4.0  ...  別的就直接npm install 了注意MongoDB初始化後需要初始化一個admin/admin賬戶，用於登錄後台管理

運行

git clone [email protected]:Nealyang/React-Express-Blog-Demo.gitnpm inpm start