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 相关文章推荐
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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
PHP daddslashes 使用方法介绍
2012/10/26 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
图片之间的切换
2006/06/26 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Python目录和文件处理总结详解
2019/09/02 Python
python批量处理txt文件的实例代码
2020/01/13 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
学徒工职责
2014/03/06 职场文书
人大调研汇报材料
2014/08/14 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
安全生产月宣传标语
2014/10/06 职场文书
师德师风学习材料
2014/12/19 职场文书
同学毕业留言寄语
2015/02/27 职场文书
教师工作态度自我评价
2015/03/05 职场文书
基于Python实现股票收益率分析
2022/04/02 Python