秦子实

摘要：在企业内网环境中，前端应用与后端服务之间的联合调试过程一直存在着过程烦琐、效率较低等问题。因此，在企业内网的开发环境中，需要一种能够对前端应用进行独立开发、测试、调试的方法。该方法应当具备良好的可拓展性，能够监听并选择性拦截前端请求，并能够返回自定义的响应。该文将绕过传统的搭建mock server的方式，通过直接将Mock.js集成在前端应用中处理请求并返回响应，给出一种能够独立调试前端应用的方法及过程实践。

关键词：企业内网；前端应用；mockjs；Ajax

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）17-0054-03

1 概述

随着React、Vue、Angular等前端框架的成熟，越来越多的B/S项目选择使用此类基于前端框架作为前端应用的核心，然而此类框架也带来一个问题——复杂的包依赖关系。由于企业业务的多样化，基于前端框架的应用研发通常涉及如模型状态管理、异步请求管理、前端组件管理、数据可视化绘制等功能，这些功能通常以npm包的形式通过Node包管理系统分发。在企业内网环境下，这种带有依赖关系的树形结构的安装调试较为烦琐，因此，应当在互联网上完成整套前端代码的开发与测试，再将测试完成的前端应用一次性打包部署在企业内网环境中。

该文介绍了将Mock.js直接集成在前端发环境中的方法，通过Mock.js模拟隔离内网环境中的后端服务器，为前端应用模拟自定义响应数据。

2 Mock.js技术简介

Mock.js是一款在前端应用研发中拦截Ajax请求并返回自定义随机数据响应的工具，可以用来模拟后端服务器的响应。Mock.js与传统的前端应用研发时搭建mock server的方式有很大不同，传统的mock server具有以下特点：

优点：通常会采用一个简化的后端服务器，通过接收http请求，处理数据，最终返回响应数据，因此能够更加真实的模拟后端环境；

缺点：搭建后端服务器代价较大，对开发环境有较高要求，在企业内网的隔离开发环境中难以实现，在遇到接口变更时需要重新编写后端代码；

在企业内网的隔离环境中，mock server并不能有效地模拟真实环境的响应数据，这直接降低了前端独立开发的效率，并且进一步提升了前、后端联合调试的烦琐程度。

而Mock.js通常直接集成在前端应用中，拦截Ajax的请求，并通过预定义的模板生成随机的响应数据，整个“请求发送-数据处理-响应接收”的过程均在浏览器端完成。由于Mock.js与前端均采用JavaScript，并且支持部署时一键切换为真实API的特性，这种非入侵式的轻量级后端服务器数据模拟技术能够极大的提高前端应用开发效率。

3 项目结构

该文以基于React框架的Ant Design项目为例组织代码，使用mock.js拦截并模拟响应数据[1]：

3.1 Ant Design项目结构

在Ant Design项目中，一个由用户触发的前端交互到服务端处理的完整流程为：

3.2 Mock.js环境准备

在前端项目中使用Mock.js，首先需要使用npm在Node中安装并保存：

接着在项目中引入Mock.js并测试当前环境中的浏览器支持：

4 Mock.js的项目应用

在Ant Design项目中使用Mock.js模拟后端服务器数据响应有两种常用方法：直接编写mock函数、将mock函数组织为mock文件：

4.1 编写mock函数

项目根目录下的.roadhogrc.mock.js文件是项目mock服务的总入口，对于较小的项目，可以直接在此文件中编写mock函数：

这种方法简单易行，可以在一个文件中将项目中的所有mock函数管都理起来。但对于大型项目而言，将过多的mock函数放在同一个文件中并不符合软件工程的规范。

4.2 编写mock文件

在大型前端项目中，通常涉及到多个场景、不同的业务模型、复杂的接口调用，在这种项目中，通常将.roadhogrc.mock.js作为入口函数，统一管理mock文件。而mock文件通常以业务模型为单位组织mock函数，所有mock文件均放在mock目录下。

作为入口的.roadhogrc.mock.js中不再需要编写mock函数，只需要在'./src/mock'文件夹中编写所有包含mock函数的JavaScript文件。一般的，mock文件以模塊为单位组织，每个模块对应的mock文件与模块同名，便于管理。如users模块的mock文件为'./src/mock/users.js'。在mock文件中，可以编写逻辑较为复杂的mock函数，以用户模块为例，一个包括用户用户登录、用户注销、用户信息修改功能的mock文件可以编写为：

6 结束语

该文介绍了在企业内网的隔离环境中，基于Mock.js库的前端应用独立调试方法及实践。该方法不需要额外的后端mock server配合，只需在前端项目中引入mockjs库，便可以在浏览器中完成所有mock server的响应模拟。基于Mock.js的前端独立调试方法极大地提高了企业内网环境中前端应用的开发迭代效率，是一种易于实践的开发调试技巧。