React demo：express、react-redux、react-router、react-roter-redux、redux-thunk（一）

　　近期終於把以前留下的坑填上了（說了很久的要網站重寫，總算是寫完了），不過最後的在線添加文章，功能雖然作了，後臺沒把接口加上，實在是沒精力去折騰了，公司又有事要忙，如今把從0開始到完成的一個思路來寫一下（不必定對，能夠給須要的童鞋作個參考）。

　　開始寫筆記以前，能夠先看一下這個【ver 1.0】，這個是1.0版本的（【源碼】），後續的什麼【ver 2.0】（只有源碼，沒有線上版本，上線兩週後被黑了，密碼被湊出來，東西所有清空）、【ver 3.0】，都是在【ver 1.0】的基礎之上進行改造的，因此，爲了方便說明，能夠先看一下【ver 1.0】，進行對比說明。

　　【ver 3.0】就是最新的用react重寫的源碼，至於線上版本，還未放上去，後續有空了租了服務器配置好了再把連接放上。

 

【後臺部分】

　　這部分主要就是express的，其實有點糾結要不要把這個放上來，由於主要是想說react，把後臺部分的放上來好像有點不太好，不過爲了全棧，仍是放上來吧。

　　源碼什麼的就不說了（說了還有可能被笑話，可能文件目錄組織有點不三不四吧。。。）。

　　上一下文件目錄，還有關鍵的幾個文件說明仍是說一下吧。

　　PS:後臺部分的文件目錄組織，參考了MVC（？不知道個人MVC是否用的對，而後接口部分參考了RESTFUL），總之，有點四不像的。。。

　　①目錄結構

 　　圖中箭頭指向的就是幾個主要的後臺部分的文件（如今想一想，我應該吧react部分的那些文件全都放在static裏面的，和後臺部分的文件放在同一目錄，有點不太合適）

 

　　②server部分

　　主要就是用了express這個框架，而後監聽前端的get請求（個人我的理解，就是地址欄裏面的url，而後放在router裏面去處理），對於獲取數據，統一用post方法，而後放在controller裏面去處理（我我的比較喜歡用「分發」這個詞，而後對應各類請求，在controller裏面進行分發，具體的處理方法，也就是sql語句獲取數據，放在models裏面）。

　　具體的，router和 controller以及models，參考後面的內容。

 

　　③router部分（不知道這樣命名是否合適）

 　　說是router，其實就是定義了一個列表，哪些連接能夠訪問，哪些連接不可訪問（send迴文件404.html），由於是SPA（單頁web應用，因此就只有一個頁面了，前端也作了路由）

 

　　④models部分（不知道這樣命名是否合適）

 　　主要就是從數據庫獲取數據（好像如今只有獲取），還有一個sqlOption的配置文件

　　其中的一個model文件，主要是裏面的sql語句，注意關鍵詞之間的空格。

 

　　⑤controller部分（不知道這樣命名是否合適）

　　說是controller，其實就是一個列表（和router相似），根據前端請求的postName，而後調相應的model方法（獲取數據），具體能夠看截圖。

 

　　⑥關於sql配置

　　sql的setting屬性，能夠詳見models部分。

 

　　第一部分暫時先扯這麼多吧，把有點不（亂）太（七）相（八）關（糟）的後臺扯一下，而後，主要仍是沒時間扯了，今天這個扯完已經快十一點了，下一篇開始正式聊react部分。