近期終于把之前留下的坑填上了（說(shuō)了好久的要網(wǎng)站重寫(xiě)，總算是寫(xiě)完了），不過(guò)最后的在線(xiàn)添加文章，功能雖然做了，后臺(tái)沒(méi)把接口加上，實(shí)在是沒(méi)精力去折騰了，公司又有事要忙，現(xiàn)在把從0開(kāi)始到完成的一個(gè)思路來(lái)寫(xiě)一下（不一定對(duì)，可以給需要的童鞋做個(gè)參考）。

　　開(kāi)始寫(xiě)筆記之前，可以先看一下這個(gè)【ver 1.0】，這個(gè)是1.0版本的（【源碼】），后續(xù)的什么【ver 2.0】（只有源碼，沒(méi)有線(xiàn)上版本，上線(xiàn)兩周后被黑了，密碼被湊出來(lái)，東西全部清空）、【ver 3.0】，都是在【ver 1.0】的基礎(chǔ)之上進(jìn)行改造的，所以，為了方便說(shuō)明，可以先看一下【ver 1.0】，進(jìn)行對(duì)比說(shuō)明。

　　【ver 3.0】就是最新的用react重寫(xiě)的源碼，至于線(xiàn)上版本，還未放上去，后續(xù)有空了租了服務(wù)器配置好了再把鏈接放上。

?

【后臺(tái)部分】

　　這部分主要就是express的，其實(shí)有點(diǎn)糾結(jié)要不要把這個(gè)放上來(lái)，因?yàn)橹饕窍胝f(shuō)react，把后臺(tái)部分的放上來(lái)好像有點(diǎn)不太好，不過(guò)為了全棧，還是放上來(lái)吧。

　　源碼什么的就不說(shuō)了（說(shuō)了還有可能被笑話(huà)，可能文件目錄組織有點(diǎn)不倫不類(lèi)吧。。。）。

　　上一下文件目錄，還有關(guān)鍵的幾個(gè)文件說(shuō)明還是說(shuō)一下吧。

　　PS:后臺(tái)部分的文件目錄組織，參考了MVC（？不知道我的MVC是否用的對(duì)，然后接口部分參考了RESTFUL），總之，有點(diǎn)四不像的。。。

　?、倌夸浗Y(jié)構(gòu)

?　　圖中箭頭指向的就是幾個(gè)主要的后臺(tái)部分的文件（現(xiàn)在想想，我應(yīng)該吧react部分的那些文件全都放在static里面的，和后臺(tái)部分的文件放在同一目錄，有點(diǎn)不太合適）

?

　?、趕erver部分

　　主要就是用了express這個(gè)框架，然后監(jiān)聽(tīng)前端的get請(qǐng)求（我的個(gè)人理解，就是地址欄里面的url，然后放在router里面去處理），對(duì)于獲取數(shù)據(jù)，統(tǒng)一用post方法，然后放在controller里面去處理（我個(gè)人比較喜歡用“分發(fā)”這個(gè)詞，然后對(duì)應(yīng)各種請(qǐng)求，在controller里面進(jìn)行分發(fā)，具體的處理方法，也就是sql語(yǔ)句獲取數(shù)據(jù)，放在models里面）。

　　具體的，router和 controller以及models，參考后面的內(nèi)容。

?

　?、踨outer部分（不知道這樣命名是否合適）

?　　說(shuō)是router，其實(shí)就是定義了一個(gè)列表，哪些鏈接可以訪(fǎng)問(wèn)，哪些鏈接不可訪(fǎng)問(wèn)（send回文件404.html），因?yàn)槭荢PA（單頁(yè)web應(yīng)用，所以就只有一個(gè)頁(yè)面了，前端也做了路由）

?

　?、躮odels部分（不知道這樣命名是否合適）

?　　主要就是從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)（好像現(xiàn)在只有獲取），還有一個(gè)sqlOption的配置文件

　　其中的一個(gè)model文件，主要是里面的sql語(yǔ)句，注意關(guān)鍵詞之間的空格。

?

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

　　說(shuō)是controller，其實(shí)就是一個(gè)列表（和router類(lèi)似），根據(jù)前端請(qǐng)求的postName，然后調(diào)相應(yīng)的model方法（獲取數(shù)據(jù)），具體可以看截圖。

?

　?、?strong>關(guān)于sql配置

　　sql的setting屬性，可以詳見(jiàn)models部分。

?

　　第一部分暫時(shí)先扯這么多吧，把有點(diǎn)不（亂）太（七）相（八）關(guān)（糟）的后臺(tái)扯一下，然后，主要還是沒(méi)時(shí)間扯了，今天這個(gè)扯完已經(jīng)快十一點(diǎn)了，下一篇開(kāi)始正式聊react部分。

轉(zhuǎn)載于:https://www.cnblogs.com/MonkingStand/p/6636306.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的React demo：express、react-redux、react-router、react-roter-redux、redux-thunk（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。