文档章节

利用node.js来mock假数据

彭良维--莫欺博客
 彭良维--莫欺博客
发布于 2016/10/13 11:46
字数 507
阅读 54
收藏 0

利用node.js来mock假数据

1:首先要先安装node.js.这个就不说了。可以参考我的这篇文章(ode.js利用gulp 启动webServer服务)

2:先说一下思路

1:我们在js中发送ajax请求。

2:启动node.js的webserver服务。进行拦截本地服务下的网络数据请求

3:使用if或者是switch从所有拦截到的地址中找到自己发送请的那个地址,然后拦截下这和请求。其他的请求使用next()方法放过

4: 拦截到我们想要的请求后,将我们mock的假数据的json文件返回给我们js里面的ajax

5:成功就展示出我们请求的数据

3:步骤

1:安装node.js

2: 局部安装gulp和gulp-webserver

3: js发送ajax请求(这里使用的是jQ的发送请求的方法)

4:新建一个gulpfile.js

5:在gulpfile.js中处理拦截逻辑。拦截到后将mock假数据返回

6:在js中解析返回的数据

代码:

js代码:

$.ajax({
type:"get",
url:"mocktest/index.html",
datatype:'json',
success:function(data){
console.log(data)
},
error:function(){
$('.one').html('请求失败')
}
});





gulpfile.js代码

//引入gulp
var gulp = require('gulp');
//引入webserver插件
var webserver = require('gulp-webserver');
//引入node.js的内置模块
var url = require('url'); //可以对url进行操作
var fs = require('fs'); //文件操作对象
//创建启动webserver的任务
gulp.task('webserver', function() {
gulp.src('./')
.pipe(webserver({
port: 8080, //端口
host: 'localhost', //域名
liveload: true,
directoryListing: {
path: './',
enable: true
},


//拦截这个本地服务下的网络请求


middleware: function(req, res, next) {
var urlObj = url.parse(req.url, true);
var path = urlObj.pathname;
console.log(path)
if(path=='/mocktest/index.html'){
//拦截$http发送出来的请求
//封装响应返回
//设置响应头
res.setHeader('Content-Type', 'application/json');
//读取文件作为响应的内容
fs.readFile('storyList_3.json', 'utf-8', function(err, data) {
res.end(data);
})

return;
}
next();
}



}));
})

注意:

1:每次改了gulpfile.js代码后都需要重启一次服务才会生效

已上传了demo。已经将gulp删除了。gulp删除后可通过npm install安装回来

 

百度网盘

http://pan.baidu.com/s/1boLHBzT

© 著作权归作者所有

彭良维--莫欺博客
粉丝 2
博文 10
码字总数 4806
作品 0
北京
前端工程师
私信 提问
我的 Mock Server - Meow Mock

业余时间基于 Node.js 搭建了 Mock Server 一枚,自娱自乐的产物。功能较简易,非常非常非常小白级,但可满足绝大多需求。 Meow Mock 源码 价值 便于自测:创建虚拟对象代替具备不确定性或不...

呆恋小喵_sunmy
2018/07/16
0
0
实现前后端分离的心得

原文出处:陈陈jg 实现前后端分离的心得 对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开...

陈陈jg
2017/07/02
0
0
如何用jest mock chained function?

我使用jest 测试我的 node.js代码,我需要通过mongoose连接到mongodb. 但我不知道该如何mock chained function. 我需要mock的函数(Vessels is a module): 我尝试去mock的方式,但是失败了:...

ladyson87
07/09
13
0
KingWTD/mockcat

Mockcat 开发工具集 项目简介 Mockcat是一款前端与后台分离开发的简易的接口Mock数据工具。提供了mock数据的模块化管理,接口数据的定义(支持带注释的JSON数据,自带JSON数据编辑器),以及...

KingWTD
2018/08/22
0
0
使用 Node.js 写一个代码生成器

背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码。之后也用过 CodeSmith , T4。目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面...

若邪
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部