1.由来（故事纯属虚构，如有雷同纯属巧合）传说在很久很久以前，我们有野心的人有一个创业的想法，于是我们开始实现了自己的创业梦想，但是人手不够，所以自己把所有的角色都包了起来：角色：PM,DBA,RD,FED,Designer,...技能：Linux,MySQL,JAVA,JavaScript,HTML,CSS,...工具：phpmyadmin,photoshop,powerpoint,...我们用expressapplicationgenerator来模拟传统开发（因为我早就忘了java是怎么写的，这里只是为了方便演示）$npminstallexpress-generator-g#安装express-generator$expressprogressive#初始化项目$cdprogressive#进入目录$npminstall#安装依赖$npmstart#启动项目，我们愉快的打开了localhost:3000看到了我们的页面：然后，我看研究代码：我发现我的模板引擎使用了jade，它是通过nodejs服务器动态渲染的：//app.jsapp.set('viewengine','jade');然后当我访问localhost:3000时，开始界面渲染：//routers/index.jsrouter.get('/',function(req,res,next){//假设我在这里查询sql以获取值的标题，然后把标题的值插入到模板引擎中...res.render('index',{title:'Express'});});然后研究了一下jade的语法，为后续的开发做准备：//index.jadeextendslayoutblockcontenth1=titlep欢迎来到#{title}紧接着，我们就开始了后续的开发……几个月后，我们写了sql、jade、node……担任过PM、DBA、RD……终于完成了一个项目。然后就高高兴兴的拿到了投资人的投资，有钱了，项目迭代总不能什么都自己搞吧？能不能找几个人一起开发，于是招了前端，后端，PM。后面的开发愉快的打开了我的代码：...WTF谁把手套放进锅里煮了...2.为了更好的划分，我们开始重构。发现问题后，为了更好的脱离前后端的关系，我们想把数据层的接口分离出来，以ajax的形式进行交互，让服务端只负责渲染逻辑，不负责数据填充。页面的数据部分以ajaxjson的形式进行交互，所以我们的结构可能是这样的：所以现在我的页面请求逻辑是这样的：//routers/index.jsrouter.get('/',function(req,res,next){res.render('index');});router.get('/getTitle',function(req,res,next){res.json({code:0,msg:'success',数据：'快递'}）}）;在页面新建index.js：ajaxGet('/getTitle',function(err,res){$('#title').text('welcometo'+res.data);});重构index.jadeextendslayoutblockcontenth1=titlep#titleappendscriptsscript(src='/javascripts/jquery.min.js')script(src='/javascripts/index.js')完成前后端-端数据交互层问题。but：前后端的界限是按照浏览器和服务器来划分的。那么我们经常会发现一些问题：那么作为前端开发者，在实际开发场景中会遇到以下问题：languagesweMayneedtomcat,Apache.....），影响开发效率和联调：前后端共用一个服务器环境，需要及时同步代码，导致效率低下。同时，前后端的侧重点不同。前端更专注于浏览器适配、效果展示和用户体验，而服务端更关心数据的安全性和可靠性……界面：界面定义一般使用word文档，前端看不懂开发接口字段，影响开发效率接口变更需要重写文档重新发送，影响开发效率文档分散，影响接口维护。如果有影响开发效率的东西，说明现有的模型还是有问题的。显然，解题思路需要我们重新思考“前端和后端”的定义。3、前后端分离的实践为了提高开发效率，我们的前端MV*时代已经开始：前后端数据通过JSON交互，互不关联，并且界面是分开的。MODEL层-JAVASCRIPTOBJECT，VIEW层-JAVASCRIPTTEMPLATE。业界也充满了新的解决方案比如：Backbone、EmberJS、KnockoutJS、AngularJS、React、Vue...于是我们开始了新的旅程：MVVM单页开发：我们抽取了服务层，最终形成了目录结构可能是这样的：我们的服务器提供了一个与前端交互的接口：//routers/users.jsletexpress=require('express');letrouter=express.Router();letusersCtrl=require('../controllers/usersCtrl')router.post('/login',usersCtrl.login)router.post('/sign',usersCtrl.sign)router.get('/getUserInfo',usersCtrl.getUserInfo)module.exports=router此时前端使用vue-cli生成脚手架，可以通过安装axios获取返回数据进行ajax数据请求。前端和后端彼此不相关。但是：新的要求来了。我们需要定义前端和后端数据接口。这个时候，前端是不是需要等到服务端接口开发好之后才能开发呢？那前后端分离呢？这时候前端可能会使用mock的形式进行数据模拟，需要前后端共同定义接口规范，于是我们愉快的在本地写了很多mock文件。有一天界面突然变成了一个字段，没有及时通知前端。完了。。。还是团队成员之间协同开发，需要同步mock数据，需要不断提交git。。。随着项目的发展复杂度增加，如何管理mock数据？这时候我们就需要一个mock服务器，最好能同步服务器接口的mock。当然网上已经有成熟的方案，比如easy-mock。它可以很好地支持Swagger，这是一个重量级的特性。通过Swagger创建项目的所有Mock接口只需要1秒。至此，我们已经完成了一个基本的前后端分离方案。后面会继续介绍中层nodejs应用，前端自动发布和脚手架相关问题。如果您对本文有不同的看法，欢迎大家一起讨论。简介：作者：monkeyWang本文部分图片和段落参考文章：前后端分离实战。淘宝前后端分离实践本文源码详见：服务端代码。前端代码。基于vue和easy-mock的脚手架我的主页：我的博客主页之后有时间再介绍。接下来介绍中层nodejs应用和前端自动化发布和脚手架相关问题....
