非常便捷的本地Mock
栏目: JavaScript · 发布时间: 6年前
内容简介:好处有很多,一句话概括,有了Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响。第一步:本地构建一个web服务,配置server.js:命令行执行node serser.js ,浏览器打开localhost:3737/index.html,页面就可以访问了。
好处有很多,一句话概括,有了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服务,大功告成
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。