毫不夸张的讲,联调接口太痛苦了,尤其是碰上不靠谱的后端。
由于依赖关系,前端显得十分被动,连接不到服务器、状态过期、服务器挂了、没有数据啦、调用就报错啦。
前端被迫承担了测试接口的工作,这个过程就是个灰色区域,应该被好好的追踪和监管,团队的效率才能大幅度上升。
虽然,很多脚手架也提供了mock服务,但总感觉不是很方便,不如node的集成容易,"前端需要的是特定的数据,在精不在多",配合上nginx
的请求转发,配置两个端口,一个mock环境,一个真实的环境。
mockApi.js
(function getApis() {
return {
'/api/hero/list': '../json/heroList.json',
'/api/hero/\\d+': {
supportRegexp: true,
get: {
success: true,
data: {
name:"klo"
}
}
}
'/api/hero': {
get: {
success: true,
code: '200',
message: '',
data: [],
},
post: {
success: true,
code: '200',
message: '',
data: {
name:
},
},
},
'/api/hero/history': {
success: true,
code: '200',
message: '',
data: {
time:"",
content:""
},
}
})();
通常情况下我们不需要关心请求方法和参数的
- 可以读取json文件
- 对于一个url多用的,可以通过方法名区分
- 支持正则匹配,类似
/api/hero/1
、/api/hero/2
,为了避免无辜url被迫陷入正则匹配中,通过supportRegexp:true
进行强调
后续有需要,还可以通过函数的方式来支持逻辑
mockServic.js
const config = {
port: 9192,
};
function start() {
var http_os = require('http');
var file_os = require('fs');
//动态的获取本机IP地址
var os = require('os');
let network = os.networkInterfaces();
for (let key in network) {
let env = network[key];
for (var i = 0; i < env.length; i++) {
if (env[i].family == 'IPv4' && env[i].address != '127.0.0.1') {
IPv4 = env[i].address;
}
}
}
var server = http_os.createServer(function (request, response) {
try {
let heades = {
'Content-Type': 'application/json',
};
if (request.headers.origin) {
//发生跨域 使用nginx代理时没有 request.headers.origin
heades = {
...heades,
'Access-Control-Allow-Methods':
'DELETE,PUT,POST,GET,OPTIONS',
'Access-Control-Allow-Origin': request.headers.origin,
'Access-Control-Allow-Headers': 'content-type',
'Access-Control-Allow-Credentials': true,
};
}
const apis = eval(
file_os.readFileSync('./mockApi.js', 'utf-8'),
);
let url = request.url.split('?')[0];
if (!apis[url]) {
//
for (const [key, value] of Object.entries(apis)) {
if (value.supportRegexp) {
if (new RegExp(key).test(url)) {
url = key;
break;
}
}
}
}
console.log({ [url]: apis[url] });
const method = request.method.toLowerCase();
if (apis[url]) {
response.writeHead(200, heades);
if (typeof apis[url] === 'string') {
const json = file_os.readFileSync(apis[url], 'utf-8');
response.end(json);
} else {
let data = apis[url][method];
if (!data) {
data = apis[url];
}
response.end(JSON.stringify(data));
}
} else {
response.writeHead(500, heades);
response.end('404');
}
} catch (error) {
dealError(response, error);
}
});
function dealError(response, error) {
console.log(error);
response.writeHead(500, heades);
response.end(error.stack);
}
server.setTimeout(0);
server.listen(config.port, function () {
console.log(`service is running ${IPv4}:${config.port}`);
});
server.on('error', function (error) {
console.log(error);
if (error.toString().indexOf(`listen EADDRINUSE`) !== -1) {
console.log(
`${config.port}端口被占用,可能是当前应用,也可能是其他应用`,
);
}
});
}
start();
支持跨域,输出ip和端口
简单的nginx配置,不会影响热更新哦
server {
set $localhost http://127.0.0.1:9000;
listen 8002;
server_name web.seven.net;
#WebServer
location /api {
proxy_pass http://192.168.1.100:9192;
}
location / {
proxy_pass $localhost;
}
}
网友评论