express+mockjs如何实现模拟后台数据发送功能

这篇文章给大家分享的是有关express+mockjs如何实现模拟后台数据发送功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联成立于2013年，先为睢阳等服务建站，睢阳等地企业，进行企业商务咨询服务。为睢阳企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。

模拟数据方法

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();
});

感谢各位的阅读！关于“express+mockjs如何实现模拟后台数据发送功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章标题：express+mockjs如何实现模拟后台数据发送功能
分享URL：http://6mz.cn/article/ipjoei.html

网站建设知识

express+mockjs如何实现模拟后台数据发送功能

js有什么特点

其他资讯