首页 > 头条 > express和mockjs实现模拟后台数据发送功能实例分享

express和mockjs实现模拟后台数据发送功能实例分享

小云云
发布: 2018-01-09 09:28:15
原创
2268 人浏览过

 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据。本文主要介绍了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,引入相关模块

1

2

3

let express = require('express'); //引入express模块

let Mock = require('mockjs');  //引入mock模块

let app = express();    //实例化express

登录后复制

4.配置接口路由,设置监听端口

1

2

3

4

5

6

7

8

9

10

11

12

/**

 * 配置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数据

1

2

3

4

5

6

7

8

9

10

11

12

13

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.遍历模拟数据文件,生成对应路由

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/*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运行服务器,我们就可以直接在前端访问接口,但是如果只是单纯的生成后台,前端页面不通过后台进行访问的话,存在跨域问题,如果需要解决,可以在后台添加跨域请求

1

2

3

4

5

6

7

8

/*为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

相关推荐:

jquery ajax如何将后台数据返回给前台表格实例代码详解

分享一段jQuery Ajax请求后台数据并在前台接收的代码

用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板