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操做	路由设计，控制逻辑	维持数据稳定
公用模板、路由	渲染页面，体验优化	封装业务逻辑