實戰react技術棧+express前後端部落格專案（1）-- 整體專案結構搭建

Neal_yang發表於2017-09-29
ReactExpress後端

專案地址：github.com/Nealyang/Re…

本想等專案做完再連載一波系列部落格，隨著開發的進行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享當然是好的，
如果能做到集思廣益，那豈不是更美。我們的口號是：堅決不會爛尾

本部落格為連載程式碼部落格同步更新部落格，隨著專案往後開發可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！

專案目錄

專案目錄大致如下：

.
├── README.md                   //專案說明檔案
├── app                         //前端原始碼資料夾
│   ├── components              //前端元件資料夾
│   ├── configureStore.js       //配置store檔案
│   ├── containers              //前端容器元件資料夾
│   ├── fetch                   //封裝get/post請求資料夾
│   ├── index.js                //APP輸出檔案
│   ├── lib                     //存放第三方引入檔案資料夾
│   ├── reducers                //reducer資料夾，包含actions、actionTypes
│   └── sagas                   //saga資料夾,非同步action處理
├── config                      
│   └── config.js               //總應用配置檔案
├── db                          //存放資料庫的資料夾
├── modules                     //存放mongoose model資料夾
│   └── user.js                 //存放user model檔案
├── package.json
├── postcss.config.js           //postcss配置檔案
├── record                      //存放一些記錄檔案的資料夾
├── schemas                     //mongoose schema資料夾
│   └── users.js
├── server                      // server端原始碼資料夾
│   ├── api                     //server端 api介面資料夾
│   ├── index.js                //server啟動檔案
│   ├── server.js               //server檔案
│   └── util.js                 //server端工具類檔案
├── static                      //靜態資源託管資料夾
│   └── favicon.ico
├── webpack.dev.js              //開發環境下webpack配置檔案
└── webpack.prod.js             //生產環境下webpack配置檔案複製程式碼

簡單說下app裡面react的專案結構。對於component，container這裡不必多說了。saga用於對所有非同步action的處理。
reducers裡面存放了container對應所有的reducer、action、actionTypes。

比如：

const initialState = {};

export const actionTypes = {
    HOME_LOAD:'HOME_LOAD',
};


export function reducer(state=initialState,action) {
    switch (action.type){
        default:
            return state;
    }
}

export const action = {
  getArticleList:function () {
      return actionTypes.HOME_LOAD
  }
};複製程式碼

對於這種寫法，可以參照我上一篇大眾點評demo關於react專案結構的說明.

state設計

曾經看過一篇文章，如何合理的設計state,看完以後的確受益匪淺。但是。。。。我擦，有必要這樣子嘛~

所以，腦地瓜笨笨的我，這個demo，我還是打算粗略的設計下就好。

大致設計如下，然後目前(2017/09/28)已經完成部分 state 結構如下

這裡兄弟們不要急，後面部落格會寫到如何構建的。

從這個state狀態樹中，我們也能夠知道下一篇，我們要說的，前端react技術棧的等等配置。

專案實現步驟系列部落格

  • 實戰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）-- 前端對於發文部分的完善（增刪改查等）
  • 實戰react技術棧+express前後端部落格專案（14）-- 內容詳情頁以及閱讀數的展示
  • 實戰react技術棧+express前後端部落格專案（15）-- 部落格新增評論功能以及對應後端實現
  • 實戰react技術棧+express前後端部落格專案（16）-- pm2 的使用說明
  • 實戰react技術棧+express前後端部落格專案（17）-- 收工

交流

倘若有哪裡說的不是很明白，或者有什麼需要與我交流，歡迎各位提issue。或者加群聯絡我~

掃碼關注我的個人微信公眾號，直接回復，必有回應。分享更多原創文章。點選交流學習加我微信、qq群。一起學習，一起進步

歡迎兄弟們加入：

Node.js技術交流群：209530601

React技術棧：398240621

前端技術雜談：604953717 (新建)

相關文章