一种前端数据模拟方法、装置、设备及介质制造方法及图纸

本申请公开了一种前端数据模拟方法、装置、设备及介质，应用于前端数据模拟技术领域，包括：将前端代码转换为抽象语法树；其中，所述前端代码中包括预先基于接口函数的返回值并以注释形式创建的数据模板；基于所述抽象语法树中的数据模板构建模拟数据生成函数，并将所述模拟数据生成函数转换为抽象语法树节点以得到数据生成函数树节点，将所述抽象语法树中接口函数树节点替换为所述数据生成函数树节点；将节点替换后的抽象语法树转换为源码形式以得到目标前端代码；执行所述目标前端代码，在调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。这样，能够提升开发效率，并避免对前端代码侵入。并避免对前端代码侵入。并避免对前端代码侵入。

【技术实现步骤摘要】
一种前端数据模拟方法、装置、设备及介质


[0001]本申请涉及前端数据模拟
，特别涉及一种前端数据模拟方法、装置、设备及介质。

技术介绍

[0002]在Web开发阶段，前端和后端开发人员会同时进行开发，前端绘制页面的速度一般是快于后台开发人员写接口的速度，此时前端Mock数据会提高开发效率。Mock顾名思义是一种模拟。通常利用相同的接口来模拟出一个对象以代替真实对象，这样能有效隔离外部依赖，便于测试。对于前端开发，Mock作为重要一环，能带来很多好处，比如：前后端并行开发、模拟各种响应值，便于测试、可及早发现一些极端响应值下的页面布局问题等。
[0003]目前，一种方案是搭建mock server（模拟服务器）或接口平台，比如yapi，或者使用第三方的API（即Application Programming Interface，应用程序编程接口）管理平台，通常也会带mock功能。前后端协作过程中，后端将接口写入接口平台，前端在接口平台编辑mock（测试）数据，并配置dev server（开发服务器）的proxy代理到接口平台。在前端开发过程中，不同功能对应的接口代理地址是不相同的，每次切换代理接口地址都需要进行重启开发服务器，重启开发服务器快则30秒，慢则几分钟非常影响开发效率。另一种方案是在项目里面根据接口返回的数据进行模拟编写json，请求的时候请求到本地的json文件进行数据处理，这种做法造成了前端代码的侵入性。

技术实现思路

[0004]有鉴于此，本申请的目的在于提供一种前端数据模拟方法、装置、设备及介质，能够提升开发效率，并避免对前端代码侵入。其具体方案如下：第一方面，本申请公开了一种前端数据模拟方法，包括：将前端代码转换为抽象语法树；其中，所述前端代码中包括预先基于接口函数的返回值并以注释形式创建的数据模板；基于所述抽象语法树中的数据模板构建模拟数据生成函数，并将所述模拟数据生成函数转换为抽象语法树节点以得到数据生成函数树节点，将所述抽象语法树中接口函数树节点替换为所述数据生成函数树节点；将节点替换后的抽象语法树转换为源码形式以得到目标前端代码；执行所述目标前端代码，在调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。
[0005]可选的，所述前端代码还包括位于所述数据模板前的注释标记。
[0006]可选的，还包括：基于所述注释标记从所述抽象语法树中获取所述数据模板。
[0007]可选的，所述基于所述注释标记从所述抽象语法树中获取所述数据模板，包括：遍历所述抽象语法树，查找所述注释标记，获取所述注释标记之后的所述数据模
板。
[0008]可选的，所述获取所述注释标记之后的所述数据模板，包括：利用正则表达式获取所述注释标记之后的所述数据模板。
[0009]可选的，所述将前端代码转换为抽象语法树，包括：对前端代码进行词法分析以及语法分析，生成抽象语法树。
[0010]可选的，所述对前端代码进行词法分析以及语法分析，生成抽象语法树，包括：利用Babel编译器对前端代码进行词法分析以及语法分析，生成抽象语法树。
[0011]可选的，所述将节点替换后的抽象语法树转换为源码形式以得到目标前端代码，包括：利用Babel编译器将节点替换后的抽象语法树转换为源码形式以得到目标前端代码。
[0012]可选的，所述基于所述数据模板构建模拟数据生成函数，包括：基于所述数据模板，并利用Mock.js构建模拟数据生成函数。
[0013]可选的，所述数据模板为预先创建的Mock.js能够识别的模板。
[0014]可选的，所述执行所述目标前端代码，在调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据，包括：基于浏览器执行所述目标前端代码，在所述浏览器调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。
[0015]可选的，所述将所述抽象语法树中接口函数树节点替换为所述数据生成函数树节点，包括：查找接口函数调用声明，将所述抽象语法树中该声明的接口函数树节点替换为所述数据生成函数树节点。
[0016]第二方面，本申请公开了一种前端数据模拟装置，包括：前端代码转换模块，用于将前端代码转换为抽象语法树；其中，所述前端代码中包括预先基于接口函数的返回值并以注释形式创建的数据模板；树节点替换模块，用于基于所述抽象语法树中的数据模板构建模拟数据生成函数，并将所述模拟数据生成函数转换为抽象语法树节点以得到数据生成函数树节点，将所述抽象语法树中接口函数树节点替换为所述数据生成函数树节点；语法树转换模块，用于将节点替换后的抽象语法树转换为源码形式以得到目标前端代码；前端数据模拟模块，用于执行所述目标前端代码，在调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。
[0017]可选的，所述前端代码还包括位于所述数据模板前的注释标记。
[0018]可选的，所述装置还包括数据模板获取模块，用于基于所述注释标记从所述抽象语法树中获取所述数据模板。
[0019]可选的，数据模板获取模块，具体用于遍历所述抽象语法树，查找所述注释标记，获取所述注释标记之后的所述数据模板。
[0020]可选的，前端代码转换模块，具体用于对前端代码进行词法分析以及语法分析，生成抽象语法树。
[0021]可选的，前端代码转换模块，具体用于利用Babel编译器对前端代码进行词法分析以及语法分析，生成抽象语法树。
[0022]可选的，语法树转换模块，具体用于利用Babel编译器将节点替换后的抽象语法树转换为源码形式以得到目标前端代码。
[0023]可选的，所述数据模板为预先创建的Mock.js能够识别的模板。
[0024]可选的，前端数据模拟模块，具体用于基于浏览器执行所述目标前端代码，在所述浏览器调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。
[0025]第三方面，本申请公开了一种电子设备，包括存储器和处理器，其中：所述存储器，用于保存计算机程序；所述处理器，用于执行所述计算机程序，以实现前述的前端数据模拟方法。
[0026]第四方面，本申请公开了一种计算机可读存储介质，用于保存计算机程序，其中，所述计算机程序被处理器执行时实现前述的前端数据模拟方法。
[0027]可见，本申请先将前端代码转换为抽象语法树；其中，所述前端代码中包括预先基于接口函数的返回值并以注释形式创建的数据模板，之后基于所述抽象语法树中的数据模板构建模拟数据生成函数，并将所述模拟数据生成函数转换为抽象语法树节点以得到数据生成函数树节点，将所述抽象语法树中接口函数树节点替换为所述数据生成函数树节点，然后将节点替换后的抽象语法树转换为源码形式以得到目标前端代码，最后执行所述目标前端代码，在调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。也即，本申请实施例在进行前端开发时，先将前端代码转换为抽象语法树，之后基于根据接口函数的返回值创建的数据模板构建模拟数据生成函数，并转化为数据生成函数本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端数据模拟方法，其特征在于，包括：将前端代码转换为抽象语法树；其中，所述前端代码中包括预先基于接口函数的返回值并以注释形式创建的数据模板；基于所述抽象语法树中的数据模板构建模拟数据生成函数，并将所述模拟数据生成函数转换为抽象语法树节点以得到数据生成函数树节点，将所述抽象语法树中接口函数树节点替换为所述数据生成函数树节点；将节点替换后的抽象语法树转换为源码形式以得到目标前端代码；执行所述目标前端代码，在调用接口函数时，基于所述模拟数据生成函数生成并返回模拟数据。2.根据权利要求1所述的前端数据模拟方法，其特征在于，所述前端代码还包括位于所述数据模板前的注释标记。3.根据权利要求2所述的前端数据模拟方法，其特征在于，还包括：基于所述注释标记从所述抽象语法树中获取所述数据模板。4.根据权利要求3所述的前端数据模拟方法，其特征在于，所述基于所述注释标记从所述抽象语法树中获取所述数据模板，包括：遍历所述抽象语法树，查找所述注释标记，获取所述注释标记之后的所述数据模板。5.根据权利要求4所述的前端数据模拟方法，其特征在于，所述获取所述注释标记之后的所述数据模板，包括：利用正则表达式获取所述注释标记之后的所述数据模板。6.根据权利要求1所述的前端数据模拟方法，其特征在于，所述将前端代码转换为抽象语法树，包括：对前端代码进行词法分析以及语法分析，生成抽象语法树。7.根据权利要求6所述的前端数据模拟方法，其特征在于，所述对前端代码进行词法分析以及语法分析，生成抽象语法树，包括：利用Babel编译器对前端代码进行词法分析以及语法分析，生成抽象语法树。8.根据权利要求1所述的前端数据模拟方法，其特征在于，所述将节点替换后的抽象语法树转换为源码形式以得到目标前端代码，包括：利用Babel编译器将节点替换后的抽象语法树转换为源码形式以得到目标前端代码。9.根据权利要求1所述的前端数据模拟方法，其特征在于，所...

【专利技术属性】
技术研发人员：郭鹏，郭涛，
申请(专利权)人：济南浪潮数据技术有限公司，
类型：发明
国别省市：