前后端分离之构建 Mock Server 工程（一）：概述
前言
随着现在已经变得越来越复杂了，虽然包括我们计蒜客在内的很多公司在团队上分为了前端和后端团队，但是项目中的前端和后端耦合性较高，很容易会出现牵一发而动全身，以及前后端不能同步开发的问题。
我们遇到了一些什么问题？
前端无法调试后端未完成的 API：如果后端同学还没有完成 API 开发，那么前端同学就不能对这个 API 进行开发。之前我们都是在代码里直接通过给变量赋假数据，又或者是在后端 Controller 里直接 return JSON 的方式来进行调试的。这样的方式很容易会出现的情况就是，每次提交 commit 都要把它删除掉，有时忘了没有删除掉，那么提交历史就会变得很脏。
没有自动化测试：前端对接口的调用没有做自动化的测试。
前端需要依赖后端开发环境：前端需要后端环境来在本地测试，像我们使用的方案就是 Vagrant + 虚拟机的来开发。这样的方式其实很笨重，不但每次启动虚拟机都得等一段时间，而且会占用一定的 CPU 和内存资源，拖慢机器。然而，前端需要的只是数据。
如何去解决这些问题？ ——前后端分离
为什么我们要前后端分离？
虽然 Facebook 提出了以功能划分而不是以前后端划分的全栈式协作模式，但全栈工程师数量之少、培训成本之高，导致了这种模式并不适合于所有的公司，尤其是我们这种创业公司。
于是很自然地，大部分的互联网公司都分成了前端团队和后端团队。在软件设计中，我们有一个思想就是 Separation of Concerns (Soc)，也就是 关注点分离 的思想。既然我们采用了前后端由不同团队开发的模式，那么我们应该有分治的思想，也就是说，我们要尽可能更多地关注自己从事的领域。
如何做前后端分离？
方案一：采用 SPA 架构
业界很多公司会采用 SPA（Single Page Application，单页应用）的架构，这种架构是天然的前后端分离的。所有的数据都是后端通过 JSON 的形式来传递到前端，前端本身也有自己的 MV* 框架，从物理上实现了前后端分离。
而这样做的的缺点也是明显的，它的学习成本和开发成本比起传统的页面要高很多，而且对 SEO 不友好。再加上历史遗留的原因，很多项目从一开始便没有采用这种架构，所以这种方案不适合我们。
方案二：淘宝 UED 的大前端方案
这是淘宝 UED 提出的「大前端」方案，之前没看过的同学可以看一下：
前后端分离的思考与实践（一）
前后端分离的思考与实践（二）
前后端分离的思考与实践（三）
前后端分离的思考与实践（四）
前后端分离的思考与实践（五）
前后端分离的思考与实践（六）
这种方案的思想是非常先进的，在前端 HTML/CSS/JS 和后端 Java 之间，架设了一层 NodeJS，把 View 层和 Controller 层都交由前端团队去开发，后端团队只负责 Modal 层。然而，这种方案对项目的改动将非常大，改造成本非常高，结合我们团队目前状况，这个方案也不适合我们。
方案三：构建 Mock Server
Mock Server 的概念非常简单，就是在开发环境构建一个模拟的服务器，然后构建假数据（Mock Data），再利用构建的假数据来进行开发。
它的好处非常多：
- 灵活性高：它小到可以只拦截一个 HTTP 请求，对某一个 API 进行调试；大到前端可以完全使用 Mock Server 进行开发，在本地完全不需要跑后端服务器。所以它可以以非常平滑柔和的方式融入到前端项目的开发当中。
- 构建简单：我们甚至只需要通过 Fiddler 或者 Charles 等抓包拦截软件，就可以完成一个 Mock Server 的构建。
- 能自动生成 API：由于数据和接口都是确定的，所以我们可以利用它来创建 API 文档，便于前后端开发。
- 能为自动化测试铺路：同样是由于数据和接口都是确定的，所以我们还可以利用它来做单元测试。
定案
综合几个方案，从改造成本（包括技术难度和时间）、改造平滑度、获得的回报方面来考虑，最后决定使用 方案三，也就是 构建 Mock Server。
如何对我们的项目进行改造？
接下来，我会根据我们 Mock Server 工程推动的进度，对每一阶段都会进行详细描述。通过这一步一步循序渐进的改造，我们最终可以实现低成本、高回报的前后端分离工程。
Whoa all kinds of excellent advice.
666
hhhhhhhh
后来呢？
期待后续介绍
期待后续, 谢谢分享
很赞同博主的思想，我也尝试开发了个chrome插件https://github.com/fancyboynet/crx-redirect，用于拦截http请求，方便windows跟ios下通用，不过我有个问题，模板引擎那不还是需要搭服务端环境吗，而且不同团队不同后端都是用不同模板，博主是如何解决这个问题的？
想要模拟模板引擎就需要用本地的 mock server 了。
不同团队不同后端都是用不同模板
如果要模拟模板一起则需要 mock server + render server
比如我在 mock server 配置
fms.view({ // 页面请求方式 type: 'get', // url url: '/render/', // 模板 template: "render.php", // 数据 data: { title: '标题', content: '内容xoxoxoxo', list: [ "a", "b", "c" ] } })然后在render server 提供渲染接口
当用户访问 /render/ 时， mock server 将模板和数据传递给 render server , render server 调用模板一起渲染函数，返回渲染结果给 mock server .mock server 再将内容返回浏览器。
render server 可以是 JAVA PHP NODE ，模板引擎可以是任何模板引擎。
如果感兴趣可以加 FMS 的群： 379019353 我可以根据你的业务场景，定制一个 mock server 解决方案给你。
期待后续介绍
期待