1.什么是mock数据？
前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发；
2.mock数据的优势？
A 团队可以并行工作
有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而发现缺陷的时机也提前了，有利于整个产品质量以及进度的保证。
B 开启TDD模式，即测试驱动开发
C 隔离系统
假如我们需要调用一个post请求，为了获得某个响应，来看当前系统是否能正确处理返回的“响应”，但是这个post请求会造成数据库中数据的污染，那么就可以充分利用Mock，构造一个虚拟的post请求，我们给他指定返回就好了
D 可以用来演示
假如我们需要创建一个演示程序，并且做了简单的UI，那么在完全没有开发后端服务的情况下，也可以进行演示。说到演示了，假如你已经做好了一个系统，并且需要给客户进行演示，但是里面有些真实数据并不想让用户看到，那么同样，你可以用Mock接口把这些敏感信息接口全部替换。
E 测试覆盖度
假如有一个接口，有100个不同类型的返回，我们需要测试它在不同返回下，系统是否能够正常响应，但是有些返回在正常情况下基本不会发生，难道你要千方百计地给系统做各种手脚让他返回以便测试吗？比如，我们需要测试在当接口发生500错误的时候，app是否崩溃，别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock，这一切就都好办了，想要什么返回就模拟什么返回，妈妈再也不用担心我的测试覆盖度了
3.mock数据的几种方式？
第一种
直接在页面写死数据，后期等接口来了，再改成动态的; 哈哈哈这是最简单的，也是最笨的，所以小型的项目，不出5个页面的可以解决，或是每个页面的数据很少的可以解决，但是不推荐，后期太麻烦
第二种
在js里直接声明变量，并给变量赋值，在逻辑脚本中使用，并渲染到dom;
第三种
将模拟数据编辑成json数据或者是零碎的js脚本中，通过请求，取回数据，并进行业务逻辑处理，渲染到dom
第四种 最理想的
- 前后台在需求分解之后，一起定义好接口api，包含：请求url（项目前缀+具体的接口名称）、请求方式、请求参数、数据响应；
- 前端研发人员根据接口约定，模拟请求返回对应的数据，完成对应的交互；
- 后台人员根据接口约定，完成对应的api，并完成对应的自测；
- 待后台人员交付接口api后，前端人员直接修改接口项目前缀，切换到对应的环境，即可进入项目提测。
目录结构
最新的vue里dev-server.js被替换成了webpack-dev-conf.js
在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改
第一步，在const portfinder = require(‘portfinder’)后添加
//第一步 const express = require(‘express’) const app = express()//请求server var appDatalu = require(’…/lulutest.json’)//加载本地数据文件 //获取对应的本地数据 //拿到路由 var apiRoutes = express.Router() app.use(’/api’, apiRoutes)//通过路由请求数据 第二步：找到devServer,在里面加上before（）方法
devServer: {
clientLogLevel: ‘warning’, historyApiFallback: true, hot: true, compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? {
warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath, proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: {
poll: config.dev.poll, }, //第二步找到devServer,在里面添加 before(app) {
app.get(’/api/lulu’, (req, res) => {
res.json({
errno: 0, data: appDatalu }) }) } } 提供一个lulutest.json数据
{
"id": 2, "title": "去哪网实习计划", "skillRequirements": "你为什么穿品如的衣服", "imageAddress": null, "skills": [ "Java", "Python" ] } PS：
所有的修改配置都需要重新启动运行命令的：npm run dev才能生效（很重要，否则无法请求到数据）
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218299.html原文链接：https://javaforall.net
