摘要：基本邏輯如下圖所示對(duì)此做了一個(gè)點(diǎn)贊的，邏輯不復(fù)雜，但達(dá)到了作為中間層實(shí)現(xiàn)前后端分離的目的。

Github：https://github.com/pengxiaohua/praise-by-koa
簡(jiǎn)書：http://www.jianshu.com/p/c3215333655a

之前做一個(gè)Python+django+jQuery項(xiàng)目時(shí)候，經(jīng)常碰到很尷尬的問題，前后端想分離，卻始終分不開，或者說是分的不徹底，前端代碼的開發(fā)總是要依賴Python的環(huán)境，環(huán)境崩潰了或者缺個(gè)插件，項(xiàng)目起不來，前端看不到頁面效果，沒法開發(fā)。
如果硬生生的把前端代碼從整個(gè)項(xiàng)目中拉出來，多帶帶開發(fā)，那前后端開發(fā)完，還是需要合并代碼聯(lián)調(diào)，還是得合在一起解決問題，開發(fā)效率很低。
前后端儼然成了牛郎織女一般，斷了連，連了斷，強(qiáng)行拆開，也想偷偷幽會(huì)，捉急呀。

1、開發(fā)效率高

前端開發(fā)人員不用苦苦地配置各種后端環(huán)境，安裝各種莫名的插件，擺脫對(duì)后端開發(fā)環(huán)境的依賴，一門心思寫前端代碼就好，后端開發(fā)人員也不用時(shí)不時(shí)的跑去幫著前端配環(huán)境。

2、職責(zé)清晰，找bug方便

以前有了bug，前端推后端，后端推前端，不知道該誰去該，前后端分離，是誰的問題就該誰去處理，處理問題方便很多，后期代碼重構(gòu)方便，做到了高可維護(hù)性。

前端：負(fù)責(zé)View和Controller層路由的分發(fā)

后端：只負(fù)責(zé)Model層，業(yè)務(wù)和數(shù)據(jù)處理等

最近一段時(shí)間學(xué)習(xí)了Node.js和koa框架后，總的來說Node.js優(yōu)點(diǎn)還是挺多的：

都是js，前端熟悉的語言，學(xué)習(xí)成本低

事件驅(qū)動(dòng)，非阻塞I/O

適合IO密集型業(yè)務(wù)

現(xiàn)在決定嘗試一下用Node.js作為中間層，PHP寫后端簡(jiǎn)單的接口，Node.js封裝PHP接口，前端axois請(qǐng)求封裝后的接口，將需要的數(shù)據(jù)返回到對(duì)應(yīng)的view層頁面，既解決了跨域問題（Node.js作為服務(wù)端，服務(wù)端沒有跨域一說），同時(shí)又不需要配后端環(huán)境，只需要一個(gè)PHP接口?；具壿嬋缦聢D所示：

對(duì)此做了一個(gè)點(diǎn)贊+1的Demo，邏輯不復(fù)雜，但達(dá)到了Node.js作為中間層實(shí)現(xiàn)前后端分離的目的。

Github：https://github.com/pengxiaohua/praise-by-koa

1、截圖：

2、功能介紹

用PHP+MySQL完成點(diǎn)贊接口，實(shí)現(xiàn)用戶點(diǎn)擊一次更新數(shù)據(jù)庫點(diǎn)贊總數(shù)+1

用koa2+ES6封裝PHP點(diǎn)贊接口，并建立路由。

將praise項(xiàng)目遷移進(jìn)入koa2，通過index/index路由進(jìn)行訪問

將用戶點(diǎn)擊事件通過axios連接到koa2點(diǎn)贊接口

對(duì)用戶連續(xù)點(diǎn)擊事件進(jìn)行稀釋(或叫節(jié)流)

基本測(cè)試：完成點(diǎn)贊接口的自動(dòng)化測(cè)試(mocha)、點(diǎn)贊+1功能的自動(dòng)化測(cè)試(karma)、真實(shí)頁面的點(diǎn)擊自動(dòng)化測(cè)試(selenium-webdriver)

3、項(xiàng)目代碼結(jié)構(gòu)

為了適配更多瀏覽器，代碼中和.es6后綴的文件同名的.js文件是babel轉(zhuǎn)碼后的es5文件，這里省掉了對(duì)應(yīng)的.js文件

├── app.es6                        <-- node啟動(dòng)頁面
├── config
│?? ├── config.es6                 <-- 配置端口號(hào)、文件名
├── controller
│?? ├── indexController.es6        <-- 創(chuàng)建路由
│?? ├── initController.es6         <-- 分發(fā)路由
├── karma.conf.js                  <-- karma配置文件
├── models
│?? ├── model.es6                  <-- 后端php接口的封裝
├── public
│?? ├── css
│?? │?? └── main.css               <-- css文件
│?? └── js
│??     ├── connect-api.es6        <-- axois連接koa點(diǎn)贊接口
│??     ├── index.es6              <-- 點(diǎn)贊+1
│??     ├── thumb.es6              <-- 實(shí)例化index.es6
├── server
│?? ├── db.php
│?? ├── get_count.php              <-- 獲取當(dāng)前點(diǎn)贊數(shù)原始php接口
│?? └── post_count.php             <-- 點(diǎn)贊+1原始php接口
├── test
│?? ├── e2e.js                     <-- 端對(duì)端自動(dòng)化測(cè)試
│?? ├── geckodriver                <-- 端對(duì)端自動(dòng)化測(cè)試Firefox啟動(dòng)程序
│?? ├── index.spec.js              <-- 點(diǎn)贊+1功能自動(dòng)化測(cè)試
│?? ├── server.es6                 <-- 點(diǎn)贊+1接口測(cè)試
└── views
    ├── index.html                 <-- 主頁面
    └── layout.html                <-- 模板

server文件夾，存放的是php接口代碼文件，為了方便查看放到了項(xiàng)目中，其實(shí)是可以任意放到其他地方，或者其他服務(wù)器上的，只需要給出后端接口地址就行。
models文件夾，存放的代碼是ES6和koa對(duì)后端接口的封裝
controller文件夾，存放的代碼是對(duì)路由的處理
public文件夾，存放的代碼是css和js
views文件夾，存放的代碼是模板文件和html主頁
config文件夾，存放的是配置端口號(hào)和文件名的代碼
test文件夾，存放的是測(cè)試代碼

4、安裝

① clone the repo

$ git clone https://github.com/pengxiaohua/news-responsive-by-react.git
$ cd news-responsive-by-react

② Install dependencies

$ npm install

5、啟動(dòng)

此項(xiàng)目在XAMPP環(huán)境下運(yùn)行的php接口和數(shù)據(jù)庫,開啟Apache服務(wù)器

localhost:8080

MySQL數(shù)據(jù)庫創(chuàng)建：

("localhost","root","","praise",3506)

數(shù)據(jù)庫名praise，接口3506，表名praise_count，2個(gè)字段‘id’和‘count’，id默認(rèn)值為1，count默認(rèn)值為0
瀏覽器輸入：

http://localhost:8081/index/index

6、測(cè)試

① 點(diǎn)贊+1功能自動(dòng)化測(cè)試

karma start

② 點(diǎn)贊+1接口自動(dòng)化測(cè)試

cd test
 mocha server.js

③端對(duì)端測(cè)試

使用的是?selenium-webdriver，安裝瀏覽器啟動(dòng)程序這里選擇的是Firefox啟動(dòng)程序geckodriver macos v0.18.0版本,下載解壓后和測(cè)試文件e2e.js放在一個(gè)目錄下，開始測(cè)試
開啟2個(gè)終端窗口
一個(gè)開啟服務(wù)：

node app.js

另一個(gè)窗口測(cè)試：

cd test
node e2e.js

7、最后

想down下代碼在本地試試的童鞋，可以進(jìn)我的github下載，別忘了star喲。
有問題歡迎隨時(shí)留言。

Node.js作為中間層實(shí)現(xiàn)前后端分離后：