非常便捷的本地Mock

栏目: JavaScript · 发布时间: 6年前

内容简介:好处有很多,一句话概括,有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响。第一步:本地构建一个web服务,配置server.js:命令行执行node serser.js ,浏览器打开localhost:3737/index.html,页面就可以访问了。

好处有很多,一句话概括,有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响。

非常便捷的本地Mock

三、实现Mock

本地目录结构

非常便捷的本地Mock

我们是如何在没有真实接口的情况下进行开发的呢?

第一步:本地构建一个web服务,配置server.js:

// 这里使用了express, 执行npm i express 或者 cnpm i express安装依赖
var express = require('express');
var app = express();

// 指定html
app.get('/index.html', function(req, res) {
  res.sendFile(__dirname + req.path);
});

// 监听端口
app.listen('3737', function () {
  console.log('localhost:3737/index.html');
});
复制代码

命令行执行node serser.js ,浏览器打开localhost:3737/index.html,页面就可以访问了。

第二步:配置Mock数据

修改server.js

var express = require('express');
var app = express();

// 指定html
app.get('/index.html', function(req, res) {
  res.sendFile(__dirname + req.path);
});

// 配置Mock数据
var fs = require('fs');
app.post('/home', function(req, res) {
  res.setHeader('Content-Type', 'application/json; charset=utf-8');
  fs.readFile('./mock/home.json', function(err, data) {
    if (err) throw err;

    res.json(JSON.parse(data));
  });
});

// 监听端口
app.listen('3737', function () {
  console.log('localhost:3737/index.html');
});
复制代码

命令行重新执行node serser.js ,我们发现页面可以访问'/home'这个接口了;

第三步:优化

一个项目中不可能只有一个接口,为了方便配置,在mock文件下加入了mock.js去做统一配置

/**
 * @note   setOnline 线上接口 配置
 * @param  name  本地接口名
 *         type  接口类型
 *         url   线上接口地址
 */
var fs = require('fs');
var setOnline = [
  {
    name: 'home',
    type: 'post',
    url: '/home'
  }
  // 第二个接口... 第三个接口
];

// 输出配置项
exports.setOnline = setOnline;

// 遍历输出json数据
for (var i = 0, len = setOnline.length; i < len; i++) {
  (function() {
    var name = setOnline[i].name;

    exports[name] = function(req, res) {
      res.setHeader('Content-Type', 'application/json; charset=utf-8');
      fs.readFile('./mock/' + name + '.json', function(err, data) {
        if (err) throw err;

        res.json(JSON.parse(data));
      });
    };
  })(i);
}
复制代码

修改server.js

var express = require('express');
var app = express();

app.get('/index.html', function(req, res) {
  res.sendFile(__dirname + req.path);
});

// Mock数据
var mock = require('./mock/mock.js');
var setOnline = mock.setOnline;

setOnline.forEach(function(m) {
  app[m.type](m.url, mock[m.name]);
});

app.listen('3737', function () {
  console.log('localhost:3737/index.html');
});

复制代码

重启web服务,大功告成


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C陷阱与缺陷

C陷阱与缺陷

Andrew Koenig / 高巍 / 人民邮电出版社 / 2003-12-1 / 30.00

作者以自己1985年在Bell实验室时发表的一篇论文为基础,结合自己的工作经验扩展成为这本对C程序员具有珍贵价值的经典著作。写作本书的出发点不是要批判C语言,而是要帮助C程序员绕过编程过程中的陷阱和障碍。作者以自己1985年在Bell实验室时发表的一篇论文为基础,结合自己的工作经验扩展成为这本对C程序员具有珍贵价值的经典著作。写作本书的出发点不是要批判C语言,而是要帮助C程序员绕过编程过程一起来看看 《C陷阱与缺陷》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具