2016年3月于烏鎮(zhèn)

零勒叠、用koa2實現(xiàn)前后端分離的點贊＋1的功能（歡迎clone和star）

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

一隘击、前后端不分離存在什么問題

之前做一個Python+django+jQuery項目時候，經(jīng)常碰到很尷尬的問題凉泄，前后端想分離，卻始終分不開蚯根，或者說是分的不徹底后众，前端代碼的開發(fā)總是要依賴Python的環(huán)境，環(huán)境崩潰了或者缺個插件颅拦，項目起不來蒂誉，前端看不到頁面效果，沒法開發(fā)距帅。
如果硬生生的把前端代碼從整個項目中拉出來右锨，單獨開發(fā)，那前后端開發(fā)完碌秸，還是需要合并代碼聯(lián)調(diào)绍移，還是得合在一起解決問題，開發(fā)效率很低讥电。
前后端儼然成了牛郎織女一般蹂窖，斷了連，連了斷恩敌，強行拆開瞬测，也想偷偷幽會，捉急呀纠炮。

前后端如漆似膠.jpg

二月趟、為什么要前后端分離

1、開發(fā)效率高

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

2、職責清晰看疗，找bug方便

以前有了bug沙峻，前端推后端，后端推前端两芳，不知道該誰去該摔寨，前后端分離，是誰的問題就該誰去處理怖辆，處理問題方便很多是复，后期代碼重構(gòu)方便删顶，做到了高可維護性。

三淑廊、怎么實現(xiàn)前后端分離

• 前端：負責View和Controller層路由的分發(fā)
• 后端：只負責Model層逗余，業(yè)務(wù)和數(shù)據(jù)處理等

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

• 都是js季惩，前端熟悉的語言录粱，學習成本低
• 事件驅(qū)動，非阻塞I/O
• 適合IO密集型業(yè)務(wù)

現(xiàn)在決定嘗試一下用Node.js作為中間層画拾，PHP寫后端簡單的接口啥繁，Node.js封裝PHP接口，前端axois請求封裝后的接口青抛，將需要的數(shù)據(jù)返回到對應(yīng)的view層頁面旗闽，既解決了跨域問題（Node.js作為服務(wù)端，服務(wù)端沒有跨域一說）脂凶，同時又不需要配后端環(huán)境宪睹，只需要一個PHP接口〔锨眨基本邏輯如下圖所示：

Node.js作為中間層作用

對此做了一個點贊+1的Demo，邏輯不復雜鹅很，但達到了Node.js作為中間層實現(xiàn)前后端分離的目的嘶居。

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

1、截圖：

點贊+1截圖

2促煮、功能介紹

• 用PHP+MySQL完成點贊接口邮屁，實現(xiàn)用戶點擊一次更新數(shù)據(jù)庫點贊總數(shù)+1
• 用koa2+ES6封裝PHP點贊接口，并建立路由菠齿。
• 將praise項目遷移進入koa2佑吝，通過index/index路由進行訪問
• 將用戶點擊事件通過axios連接到koa2點贊接口
• 對用戶連續(xù)點擊事件進行稀釋(或叫節(jié)流)
• 基本測試：完成點贊接口的自動化測試(mocha)、點贊+1功能的自動化測試(karma)绳匀、真實頁面的點擊自動化測試(selenium-webdriver)

3芋忿、項目代碼結(jié)構(gòu)

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

├── app.es6                        <-- node啟動頁面
├── config
│   ├── config.es6                 <-- 配置端口號戈钢、文件名
├── 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點贊接口
│       ├── index.es6              <-- 點贊+1
│       ├── thumb.es6              <-- 實例化index.es6
├── server
│   ├── db.php
│   ├── get_count.php              <-- 獲取當前點贊數(shù)原始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接口代碼文件是尔，為了方便查看放到了項目中殉了，其實是可以任意放到其他地方，或者其他服務(wù)器上的拟枚，只需要給出后端接口地址就行薪铜。
models文件夾众弓，存放的代碼是ES6和koa對后端接口的封裝
controller文件夾，存放的代碼是對路由的處理
public文件夾隔箍，存放的代碼是css和js
views文件夾谓娃，存放的代碼是模板文件和html主頁
config文件夾，存放的是配置端口號和文件名的代碼
test文件夾鞍恢，存放的是測試代碼

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、啟動

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

localhost:8080

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

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

數(shù)據(jù)庫名praise帮掉，接口3506弦悉，表名praise_count，2個字段‘id’和‘count’蟆炊，id默認值為1稽莉，count默認值為0
瀏覽器輸入：

http://localhost:8081/index/index

6、測試

① 點贊+1功能自動化測試(unit單元測試)

karma start

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

cd test
 mocha server.js

③端對端測試(UI測試)

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

node app.js

另一個窗口測試：

cd test
node e2e.js

7、最后

想down下代碼在本地試試的童鞋昧甘，可以進我的github下載良拼，別忘了star喲。
有問題歡迎隨時留言充边。

四庸推、總結(jié)：

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