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 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP数组操作类实例
2015/07/11 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python实现粒子群算法
2020/10/15 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
历史学专业毕业生求职信
2013/09/27 职场文书
团队精神的演讲稿
2014/05/14 职场文书
服务承诺书怎么写
2014/05/24 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
雨花台导游词
2015/02/06 职场文书
会计专业求职信范文
2015/03/19 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis