首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发网页制作Javascript → 基于express+mockjs实现的模拟后台数据发送实例代码分享

基于express+mockjs实现的模拟后台数据发送实例代码分享

来源:维维整理 发布时间:2018-1-7 14:24:20 人气:

下面维维小编给大家带来的是基于express+mockjs实现的模拟后台数据发送实例技巧,本文主要为大家介绍了express+mockjs实现模拟后台数据发送功能,有兴趣的朋友可研究一下,希望对大家能有帮助。

前言:

大多情况下,前端会与后端同时进行开发,即在我们开发完页面时,很有可能还无法马上进入到联调阶段,此时,为了能够保证接口的有效性以及代码的功能完整,可能需要先模拟数据。

模拟数据方法:

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

优点:无需服务器

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

2.通过ajax请求json文件

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

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

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

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

缺点:自己需要写一个后台

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

1.准备node环境、npm/cnpm

2.安装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

相关下载
栏目导航
本类热门阅览