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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
使用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
Smarty安装配置方法
2008/04/10 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
使用jspdf生成pdf报表
2015/07/03 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python get获取页面cookie代码实例
2018/09/12 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
语文教学感言
2014/02/06 职场文书
小学生作文评语
2014/04/18 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
Java集成swagger文档组件
2021/06/28 Java/Android
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript