4.3 mock服务

mock服务

• 针对的是前后端协作层面的问题
• 模拟后端数据，解决对后端接口的依赖
• 实现前后端分离和并行开发

前后端约定接口的规范

• 比如请求方法，参数，返回值
• 后端按照规范，实现接口
• 前端按照规范使用mock数据，编写前端代码

声明变量作为假数据

• 直接在业务代码中声明变量，代替接口返回的数据
• 非常方便，不需要其他任何工具
• 缺点1: 一旦后端接口完成，我们就要删除和修改很多代码，容易产生错误
• 缺点2: 无法模拟接口的请求过程和处理异常。比如前端需要接口返回的错误提示

客户端mock

• 在客户端拦截请求，返回mockjs创建的假数据
• 可以模拟请求过程和异常处理
• 客户端mock的代码集中写在了一个js文件，方便维护和删除
• 缺点：虽然mock的代码在一个单独的文件里面，但是还是在业务代码里面。上线之前必须删除，还有存在一定产品质量隐患。

mock server

• 假数据和客户端mock，都涉及业务代码的修改
• 从前端工程化角度，辅助工具应该减少业务人员的精力
• 在开发阶段，mock server提供与真实接口规范和逻辑一样的本地接口
• 开发完成后，在构建阶段将mock的地址修改成真实的服务器接口地址
• 优点：节省开发人员精力，不用修改业务代码
• mock server能够普及，nodejs居功至伟

异步数据接口

• mock server最普遍的使用场景是模拟异步数据接口
• 有两种模式：
  本地模式：使用本地的数据作为请求响应
  代理模式：将异步接口代理到线上的其他接口地址

local 本地模式

• 是mock server最普遍的实现模式
• 使用本地api代替真实api地址
• 使用本地数据作为返回数据
• 搭建流程
  1 通过路由创建一个可访问的本地域名api代替真实api，比如/login代替http://auth.app.com/login
  2 在路由响应函数内对请求进行校验，比如是否是jsonp请求，然后返回本地数据
  3 前端工程师在业务代码中将真实api修改为本地api

proxy 代理模式

• 传统的http代理服务器，是客户端和web server之间的中间站，通常是为了节省IP开销，利用缓存
• mock server的代理模式，没有那么复杂的功能和需求。主要目的是，解决某些接口不支持跨域请求的限制

DefinePlugin和环境变量

• 测试和生产环境之前，要将地址修改为真实api。手动修改，工作量大容易出错。
• 测试和生产之前，要构建，可以通过工具，自动修改地址
• 执行环境：根据目标环境，修改为对应的地址。执行环境的区分，是前端工程化体系最重要的规范之一。
• DefinePlugin是webpack 的一个插件，定义全局变量
  

SSR

• 目前，大部分都是前后端分离，html渲染工作交给了客户端
• 依赖SEO的还是使用SSR
• mock server支持的SSR两种场景
  1 页面初始输出的静态内容比较多，使用html模版语言便于模版化开发和维护
  2 依靠服务器端动态数据渲染初始页面