express+mockjs实现模拟后台数据发送功能


Posted in Javascript onJanuary 07, 2018

前言:

大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据。

模拟数据方法

1.通过js变量模拟后台数据

优点:不需要服务器

缺点:需要造很多变量,同时还要将变量在我们的有效代码中使用,最后还得删除

2.通过ajax请求json文件

优点:只需要配置路径,就可以访问,进入联调阶段不用修改大量的js代码

缺点:ajax存在跨域问题,通常无法请求本地文件,即使火狐也存在不能访问不同文件目录下的json文件,通常需要通过ide或者自己手动启动服务

3.用nodejs自己写一个专门用来发送请求的服务,不包含业务逻辑

优点:前端的代码进入联调阶段只需要修改一个basePath,所有的接口名字都可以和约定好的路径保持一致,可以测试post请求,模拟网络环境

缺点:自己要写一个后台

1、2两种模拟数据的方式适合用来做demo,但是如果做得是上线项目,我们还是推荐使用自己搭建一个node后台

1.准备node环境、npm/cnpm

2.安装express、mockjs

express+mockjs实现模拟后台数据发送功能

3.创建服务端文件server.js,引入相关模块

let express = require('express'); //引入express模块
let Mock = require('mockjs');  //引入mock模块
let app = express();    //实例化express

4.配置接口路由,设置监听端口

/**
 * 配置test.action路由
 * @param {[type]} req [客户端发过来的请求所带数据]
 * @param {[type]} res [服务端的相应对象,可使用res.send返回数据,res.json返回json数据,res.down返回下载文件]
 */
app.all('/test.action', function(req, res) {
 res.send('hello world');
});
/**
 * 监听8090端口
 */
app.listen('8090');

此时我们直接访问http://localhost:8090/test.action,就可以直接在界面看到'hello world'文字

5.使用mockjs返回格式化json数据

app.all('/test.action', function(req, res) {
 /**
  * mockjs中属性名‘|'符号后面的属性为随机属性,数组对象后面的随机属性为随机数组数量,正则表达式表示随机规则,+1代表自增
  */
 res.json(Mock.mock({
  "status": 200,
  "data|1-9": [{
   "name|5-8": /[a-zA-Z]/,
   "id|+1": 1,
   "value|0-500": 20
  }]
 }));
});

此时我们再访问页面数据,我们就可以得到一份随机的json数据

6.创建模拟数据文件夹testData,创建模拟数据json文件(注意:json文件中不能使用正则,且对象属性必须为双引号字符串)

7.遍历模拟数据文件,生成对应路由

/*readdir读取目录下所有文件*/
fs.readdir('./testData', function(err, files) {
 if(err) {
  console.log(err);
 } else {
  /*成功读取文件,取得文件名,拼接生成对应action,监听对应接口并返回对应文件数据*/
  files.forEach(function(v, i) {
   app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
    fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
     if(err) {
      console.log(err);
     } else {
      res.json(Mock.mock(JSON.parse(data)));
     }
    })
   })
  })
 }
})

至此,我们的node服务器已经搭建成功,使用node server.js运行服务器,我们就可以直接在前端访问接口,但是如果只是单纯的生成后台,前端页面不通过后台进行访问的话,存在跨域问题,如果需要解决,可以在后台添加跨域请求

/*为app添加中间件处理跨域请求*/
app.use(function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 next();
});

ps:如果mock需要使用正则,请单独配置路由进行处理,express和mockjs更多指令,请查阅官网api

总结

以上是小编给大家介绍的express+mockjs实现模拟后台数据发送功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
JS 实现分页打印功能
May 16 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 #Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 #Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 #Javascript
12条写出高质量JS代码的方法
Jan 07 #Javascript
js数组方法reduce经典用法代码分享
Jan 07 #Javascript
javascript中的replace函数(带注释demo)
Jan 07 #Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 #Javascript
You might like
set_include_path在win和linux下的区别
2008/01/10 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php实现的顺序线性表示例
2019/05/04 PHP
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python基于百度云文字识别API
2018/12/13 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
农村葬礼主持词
2014/03/31 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
国王的演讲观后感
2015/06/03 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
酒店员工管理制度
2015/08/05 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python