零，使用koa2实现前后端分离。点赞+1功能（欢迎clone和star）Github：https://github.com/pengxiaohua/praise-by-koa简书：http://www.jianshu.com/p/c3215333655a1.问题是什么不分离前后端？，但还是分不开，或者分的不够彻底。前端代码的开发总是依赖于Python环境。如果环境崩溃或者插件缺失，项目无法启动，前端看不到页面效果，无法开发。.如果硬生生把前端代码从整个项目中拉出来单独开发，那么在前后端开发完成后，代码还是要结合起来联调，问题还是要解决结合起来解决问题，开发效率很低。前后端好像牛郎织女，脱节，脱节，强拆，想暗恋，抓紧时间。二、为什么要分离前后端1、开发效率高。端开发人员不用时不时去帮忙前端配置环境。2、职责明确，查找bug方便。过去，有错误。前端推后端，后端推前端。我不知道应该由谁来做。代码重构方便，可维护性高。3、如何实现前后端分离。优点挺多的：都是js，前端熟悉的语言，学习成本低，事件驱动，非阻塞I/O，适合IO密集型业务现在决定尝试使用Node，Node.js封装了PHP接口，前端axois请求封装后的接口，将需要的数据返回给对应的视图层页面，不仅解决了跨域问题（Node.js作为服务端，服务器没有跨域），同时不需要配置后台环境，只需要一个PHP接口。基本逻辑如下图所示：我做了一个点赞+1的demo。逻辑并不复杂，但是达到了Node.js作为中间层实现前后端分离的目的。Github：https://github.com/pengxiaohua/praise-by-koa1。截图：2.功能介绍使用PHP+MySQL完成点赞界面，让用户点击一次更新数据库中的点赞总数+1.用koa2+ES6封装PHP一样的界面，创建路由。将praise项目迁移到koa2中，通过index/index路由访问。通过axios将用户点击事件接入koa2点赞接口，稀释（或扼流）用户持续点击事件。基础测试：完成点赞界面自动化测试（mocha）、点赞+1功能自动化测试（karma）、真实页面点击自动化测试（selenium-webdriver）三、项目代码结构为了适配更多浏览器，代码与带有.es6后缀的文件同名。js文件为babel转码后的es5文件，这里省略对应的.js文件├──app.es6<--节点启动页面├──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连接到koalikeinterface│├──index.es6<--like+1│├──thumb.es6<--实例化index.es6├──server│├──db.php│├──get_count.php<--获取当前点赞数php原版界面│└──post_count.php<--点赞+1php原版界面├──test│├──e2e.js<--端到端自动化测试│├──geckodriver<--端到端自动化测试Firefox启动器│├──index.spec.js<--点赞+1功能自动化测试│├──服务器.es6<--like+1接口测试└──views├──index.html<--主页面└──layout.html<--模板服务器文件夹，存放php接口代码文件，方便查看在project，其实可以放在其他任何地方，也可以放在其他服务器上，只要给后端接口地址即可。models文件夹，存放代码为后端接口的ES6和koa封装controller文件夹，存放代码为路由处理public文件夹，存放代码为css和jsviews文件夹，存放代码为模板文件和html主页的config文件夹存放配置端口号和文件名的代码。test文件夹存放测试代码4.安装①克隆repo$gitclonehttps://github.com/pengxiaohua/news-responsive-by-react.git$cdnews-responsive-by-react②安装依赖$npminstall5.启动本项目XAMPP环境下运行的php界面和数据库，打开Apache服务器localhost:8080MySQL数据库创建：('localhost','root','','praise',3506)数据库名praise,interface3506，表名praise_count，2个字段'id'和'count'，id默认值为1，count默认值为0浏览器输入：http://localhost:8081/index/index6，测试①like+1功能自动化测试karmastart②like+1接口自动化测试cdtestmochaserver.js③端到端测试使用selenium-webdriver，安装浏览器启动程序这里选择火狐启动程序geckodrivermacosv0.18.0版本。下载解压后，将其与测试文件e2e.js放在同一目录下，开始测试。打开两个终端窗口，一个用于启动服务：nodeapp.js另一个窗口用于测试：cdtestnodee2e.js7。最后想把代码下载到本地试试。你可以从我的github下载它。别忘了加星。如果您有任何问题，请随时留言。4、总结：使用Node.js作为中间层实现前后端分离后：前端前端后端浏览器服务器服务器HTML+CSS+JavaScriptNode.jsPHP（或其他后端语言）)运行在浏览器上的JS运行在服务器上的JS服务层CSS，JS加载运行转发数据，串行服务提供数据接口DOM操作路由设计，控制逻辑维护数据稳定性公共模板，路由渲染页面，体验优化和封装业务逻辑
