Node.js做爲中間層實現簡單的先後端分離

零、用koa2實現先後端分離的點贊＋1的功能（歡迎clone和star）

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

1、先後端不分離存在什麼問題

以前作一個Python+django+jQuery項目時候，常常碰到很尷尬的問題，先後端想分離，卻始終分不開，或者說是分的不完全，前端代碼的開發老是要依賴Python的環境，環境崩潰了或者缺個插件，項目起不來，前端看不到頁面效果，無法開發。
若是硬生生的把前端代碼從整個項目中拉出來，單獨開發，那先後端開發完，仍是須要合併代碼聯調，仍是得合在一塊兒解決問題，開發效率很低。
先後端儼然成了牛郎織女通常，斷了連，連了斷，強行拆開，也想偷偷幽會，捉急呀。

2、爲何要先後端分離

一、開發效率高

前端開發人員不用苦苦地配置各類後端環境，安裝各類莫名的插件，擺脫對後端開發環境的依賴，一門心思寫前端代碼就好，後端開發人員也不用時不時的跑去幫着前端配環境。

二、職責清晰，找bug方便

之前有了bug，前端推後端，後端推前端，不知道該誰去該，先後端分離，是誰的問題就該誰去處理，處理問題方便不少，後期代碼重構方便，作到了高可維護性。

3、怎麼實現先後端分離

• 前端：負責View和Controller層路由的分發
• 後端：只負責Model層，業務和數據處理等

最近一段時間學習了Node.js和koa框架後，總的來講Node.js優勢仍是挺多的：

• 都是js，前端熟悉的語言，學習成本低
• 事件驅動，非阻塞I/O
• 適合IO密集型業務

如今決定嘗試一下用Node.js做爲中間層，PHP寫後端簡單的接口，Node.js封裝PHP接口，前端axois請求封裝後的接口，將須要的數據返回到對應的view層頁面，既解決了跨域問題（Node.js做爲服務端，服務端沒有跨域一說），同時又不須要配後端環境，只須要一個PHP接口。基本邏輯以下圖所示：

對此作了一個點贊+1的Demo，邏輯不復雜，但達到了Node.js做爲中間層實現先後端分離的目的。

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

一、截圖：

二、功能介紹

• 用PHP+MySQL完成點贊接口，實現用戶點擊一次更新數據庫點贊總數+1
• 用koa2+ES6封裝PHP點贊接口，並創建路由。
• 將praise項目遷移進入koa2，經過index/index路由進行訪問
• 將用戶點擊事件經過axios鏈接到koa2點贊接口
• 對用戶連續點擊事件進行稀釋(或叫節流)
• 基本測試：完成點贊接口的自動化測試(mocha)、點贊+1功能的自動化測試(karma)、真實頁面的點擊自動化測試(selenium-webdriver)

三、項目代碼結構

爲了適配更多瀏覽器，代碼中和.es6後綴的文件同名的.js文件是babel轉碼後的es5文件，這裏省掉了對應的.js文件

├── app.es6                        <-- node啓動頁面
├── config
│   ├── config.es6                 <-- 配置端口號、文件名
├── controller
│   ├── indexController.es6        <-- 建立路由
│   ├── initController.es6         <-- 分發路由
├── karma.conf.js                  <-- karma配置文件
├── models
│   ├── model.es6                  <-- 後端php接口的封裝
├── public
│   ├── css
│   │   └── main.css               <-- css文件
│   └── js
│       ├── connect-api.es6        <-- axois鏈接koa點贊接口
│       ├── index.es6              <-- 點贊+1
│       ├── thumb.es6              <-- 實例化index.es6
├── server
│   ├── db.php
│   ├── get_count.php              <-- 獲取當前點贊數原始php接口
│   └── post_count.php             <-- 點贊+1原始php接口
├── test
│   ├── e2e.js                     <-- 端對端自動化測試
│   ├── geckodriver                <-- 端對端自動化測試Firefox啓動程序
│   ├── index.spec.js              <-- 點贊+1功能自動化測試
│   ├── server.es6                 <-- 點贊+1接口測試
└── views
    ├── index.html                 <-- 主頁面
    └── layout.html                <-- 模板

server文件夾，存放的是php接口代碼文件，爲了方便查看放到了項目中，實際上是能夠任意放到其餘地方，或者其餘服務器上的，只須要給出後端接口地址就行。
models文件夾，存放的代碼是ES6和koa對後端接口的封裝
controller文件夾，存放的代碼是對路由的處理
public文件夾，存放的代碼是css和js
views文件夾，存放的代碼是模板文件和html主頁
config文件夾，存放的是配置端口號和文件名的代碼
test文件夾，存放的是測試代碼

四、安裝

① clone the repo

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

② Install dependencies

$ npm install

五、啓動

此項目在XAMPP環境下運行的php接口和數據庫,開啓Apache服務器

localhost:8080

MySQL數據庫建立：

('localhost','root','','praise',3506)

數據庫名praise，接口3506，表名praise_count，2個字段‘id’和‘count’，id默認值爲1，count默認值爲0
瀏覽器輸入：

http://localhost:8081/index/index

六、測試

① 點贊+1功能自動化測試

karma start

② 點贊+1接口自動化測試

cd test
 mocha server.js

③端對端測試

使用的是 selenium-webdriver，安裝瀏覽器啓動程序這裏選擇的是Firefox啓動程序geckodriver macos v0.18.0版本,下載解壓後和測試文件e2e.js放在一個目錄下，開始測試
開啓2個終端窗口
一個開啓服務：

node app.js

另外一個窗口測試：

cd test
node e2e.js

七、最後

想down下代碼在本地試試的童鞋，能夠進個人github下載，別忘了star喲。
有問題歡迎隨時留言。

4、總結：

Node.js做爲中間層實現先後端分離後：

前端	前端	後端
瀏覽器	服務器	服務器
HTML+CSS+JavaScript	Node.js	PHP(或其餘後端語言)
跑在瀏覽器上的JS	跑在服務器上的JS	服務層
CSS、JS加載運行	轉發數據，串接服務	提供數據接口
DOM操做	路由設計，控制邏輯	維持數據穩定
公用模板、路由	渲染頁面，體驗優化	封裝業務邏輯