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得到font-size属性值实现代码
Sep 30 Javascript
js单词形式的运算符
May 06 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
jquery实现手风琴效果
Nov 20 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php的扩展写法总结
2019/05/14 PHP
JS 继承实例分析
2008/11/04 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Django重设Admin密码过程解析
2020/02/10 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
利用python汇总统计多张Excel
2020/09/22 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
财务人员个人求职信范文
2013/12/04 职场文书
万年牢教学反思
2014/02/15 职场文书
农村婚礼主持词
2014/03/13 职场文书
踏青活动策划方案
2014/08/19 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js