react全家桶+express實戰我的博客系列教程

開源地址

github.com/Nealyang/Re…

說明

放到開頭，這裏重點說明下，不少哥們會發郵件或者羣裏艾特，可是好多郵件回覆不了不知道什麼狀況，羣裏有時候不怎麼關注就錯過了，你們若是有啥問題咱就直接提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 git@github.com:Nealyang/React-Express-Blog-Demo.git

npm i

npm start
複製代碼

學習交流

歡迎關注我的微信公衆號: Nealyang 全棧前端，獲取第一手文章推送和免費全棧電子書分享福利