非常便捷的本地Mock
一、什么是Mock
Mock在软件开发领域,我们将其理解成 “模拟数据”、“虚假数据”。
二、Mock的好处
好处有很多,一句话概括,有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响。
三、实现Mock
本地目录结构
我们是如何在没有真实接口的情况下进行开发的呢?
第一步: 本地构建一个web服务
本地安装nodejs,配置package.json:
{"name": "mock","scripts": {"dev": "node server.js"},"dependencies": {},"devDependencies": {"express": "^4.14.1"}
}
复制代码
配置server.js:
// 这里使用了express, 执行npm i express 或者 cnpm i express安装依赖
var express = require('express');
var app = express();// 指定html
app.get('/index.html', function(req, res) {res.sendFile(__dirname + req.path);
});// 监听端口
app.listen('3737', function () {console.log('localhost:3737/index.html');
});
复制代码
命令行执行node serser.js ,浏览器打开localhost:3737/index.html,页面就可以访问了。
第二步: 配置Mock数据
修改server.js
var express = require('express');
var app = express();// 指定html
app.get('/index.html', function(req, res) {res.sendFile(__dirname + req.path);
});// 配置Mock数据
var fs = require('fs');
app.post('/home', function(req, res) {res.setHeader('Content-Type', 'application/json; charset=utf-8');fs.readFile('./mock/home.json', function(err, data) {if (err) throw err;res.json(JSON.parse(data));});
});// 监听端口
app.listen('3737', function () {console.log('localhost:3737/index.html');
});
复制代码
命令行重新执行node serser.js ,我们发现页面可以访问'/home'这个接口了;
第三步:优化
一个项目中不可能只有一个接口,为了方便配置,在mock文件下加入了mock.js去做统一配置
/*** @note setOnline 线上接口 配置* @param name 本地接口名* type 接口类型* url 线上接口地址*/
var fs = require('fs');
var setOnline = [{name: 'home',type: 'post',url: '/home'}// 第二个接口... 第三个接口
];// 输出配置项
exports.setOnline = setOnline;// 遍历输出json数据
for (var i = 0, len = setOnline.length; i < len; i++) {(function() {var name = setOnline[i].name;exports[name] = function(req, res) {res.setHeader('Content-Type', 'application/json; charset=utf-8');fs.readFile('./mock/' + name + '.json', function(err, data) {if (err) throw err;res.json(JSON.parse(data));});};})(i);
}
复制代码
修改server.js
var express = require('express');
var app = express();app.get('/index.html', function(req, res) {res.sendFile(__dirname + req.path);
});// Mock数据
var mock = require('./mock/mock.js');
var setOnline = mock.setOnline;setOnline.forEach(function(m) {app[m.type](m.url, mock[m.name]);
});app.listen('3737', function () {console.log('localhost:3737/index.html');
});复制代码
重启web服务,大功告成
四、总结
实现Mock数据的方式还有很多种,比如mockjs、easymock、rap2等等。
本地Mock的特点不依赖mockjs、easymock等,实现起来方便快捷。
转载于:https://juejin.im/post/5bdbe92f6fb9a049bb7bc18f
非常便捷的本地Mock相关推荐
- SAP UI5 应用开发教程之六十三 - 基于 OData V4 的本地 Mock Server 实现的深入介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...
- 循序渐进BootstrapVue,开发公司门户网站(5)--- 使用实际数据接口代替本地Mock数据
在我们开发一些门户网站功能的时候,有时候我们需要快速的创建数据模型来进行数据展示,因为数据结构可能处于不断的修正变化之中,因此服务端的接口我们可以暂时不开发,当我们基本完成数据结构和界面展示的时候,就 ...
- pythonflaskmock数据_Python3+Flask实现本地Mock数据
1. 前言 在日常的开发过程中,前端的APP或者H5页面的开发往往需要依赖接口的数据,为了满足前后端并行开发的需求,很多公司都提供了Mock数据的平台,服务端同学将定义好的接口文档维护到Mock数据平 ...
- 派盘——安全、高效、便捷的本地云存储
在生活中,当一般的存储空间和访问速度已无法满足需求时,NAS或者个人云.私有云等成为了不少用户的选择.这些服务能够让用户对自己的数据有更好的掌控权. π-Disk派盘® – 数字第二大脑服务平台 派盘 ...
- SAP UI5 应用开发教程之六十三 - 基于 OData V4 的本地 Mock Server 实现的深入介绍
学习本步骤之前,请确保你已经复习了步骤 26 和 步骤 62 的知识: SAP UI5 应用开发教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解 SAP UI5 应用开发教程之六 ...
- 如何以 mock server 的方式本地启动 SAP UI5 应用,使它不连接服务器端 OData 服务
我们在做 SAP UI5 开发时,在视图逻辑没有开发完毕时,往往不希望连接服务器端的 OData 服务进行联调,而仅仅连接本地端的测试数据. 本文介绍如果启动本地 mock server,将 SAP ...
- aws ecs 理解元数据和mock本地测试环境
资料 Under the Hood: Task Networking for Amazon ECS amazon-ecs-local-container-endpoints A Guide to Lo ...
- 了解抖音本地生活服务商:连接你与便捷生活的桥梁
抖音本地生活服务商是抖音平台为用户提供的一项服务,旨在连接用户与本地商家,为用户提供更便捷的本地生活服务.下面是四川不若与众对抖音本地生活服务商的介绍. 1. 提供多样化的服务:抖音本地生活服务商为用 ...
最新文章
- android intent例程,Android开发(四)| 探究活动(详解Intent+大量实例)
- AIR for IOS开发问题小结
- xml python2.6_如何使用前缀选项解析python 2.6中的参数为-f file.xml
- Fixed: MacOS Mojave(10.14) 解决终端用Crontab报权限问题(不管是Root还是普通用户)及Linux基础(shell)...
- 格式化json_在Spring Boot中格式化JSON日期
- python中如何定义一个数组_Python数组定义方法
- Greenplum使用简明手册
- 程序员面试金典 - 面试题 02.03. 删除中间节点
- redux相关学习资源
- linux如何安装阵列卡驱动程序,Linux安装阵列卡驱动及档.doc
- 共226款Html5小游戏源码分享
- java贪吃蛇食物_JAVA贪吃蛇课程怎么处理食物的随机性
- linux sqlplus 历史命令,SQLPLUS下历史命令查找
- 一文了解CISP,太全了
- JAVA POI EXCEL导出工具方法 支持冻结列行和设置不可编辑整行整列
- 【Unity项目实战】手把手教学:飞翔的小鸟(4)文本添加
- 计算机word的关闭怎么办,为什么我的计算机word文档打开和关闭缓慢
- 决策树模型 朴素贝叶斯模型_有关决策树模型的概述
- C++实现 数字游戏之拼出最大数
- Oracle执行UPDATE语句的步骤
热门文章
- Windows 活动目录(AD)服务器系统升级到2012之升级完成后工作(八)
- java8 parallelStream性能测试
- here with you
- 安装Hadoop及Spark(Ubuntu 16.04)
- Cisco 2900 series添加VWIC2-1MFT-G703板卡
- 从 github 执行 git clone 一个大的项目时提示 error: RPC failed
- Linux C Socket编程发送结构体、文件详解及实例
- android Ant批打包学习(零)--基础知识
- nagios学习笔记(二)
- jackson json 转换Bean, Bean 里没有对应的值 jackson Unrecognized field