技术栈
我们将使用Node.js和Express.js作为我们的后端框架,以及Node.js的文件系统(fs)模块来操作文件和文件夹。此外,我们将使用Node.js的require
和delete require.cache
来加载和更新模拟数据。
项目结构
首先,让我们定义一个简单的项目结构:
- your-project/
- mock/
- api/
- users.json
- other/
- products.json
- server.js
在mock
文件夹中,我们可以为不同的API接口创建不同的子文件夹,并在每个子文件夹中放置相应的JSON文件,以模拟不同的数据。然后,我们将在server.js
文件中创建我们的配置化的模拟服务器。
代码示例
javascript
const path = require('path');
const fs = require('fs');
const express = require('express');
function watchMockFiles(mockDirectory, mockData) {
function watchDirectory(directory) {
fs.watch(directory, (eventType, filename) => {
if (filename.endsWith('.json')) {
const mockPath = path.join(directory, filename);
const mockKey = path.relative(mockDirectory, mockPath)
.replace('.json', '')
.replace(/\\/g, '/');
delete require.cache[require.resolve(mockPath)];
const jsonData = require(mockPath);
mockData[mockKey] = jsonData;
console.log(`Updated mock data for ${mockKey}`);
}
});
fs.readdirSync(directory).forEach((file) => {
const fullPath = path.join(directory, file);
const stats = fs.statSync(fullPath);
if (stats.isDirectory()) {
watchDirectory(fullPath);
}
});
}
watchDirectory(mockDirectory);
}
function readMockFiles(mockDirectory) {
const mockData = {};
function traverse(directory) {
const files = fs.readdirSync(directory);
files.forEach((file) => {
const fullPath = path.join(directory, file);
const stats = fs.statSync(fullPath);
if (stats.isDirectory()) {
traverse(fullPath);
} else if (file.endsWith('.json')) {
const mockKey = path
.relative(mockDirectory, fullPath)
.replace('.json', '')
.replace(/\\/g, '/');
const jsonData = require(fullPath);
mockData[mockKey] = jsonData;
}
});
}
traverse(mockDirectory);
return mockData;
}
function configureMockDevServer({
mockDirectory = path.resolve(__dirname, 'mock'),
defaultResponseTime = 2000,
}) {
const mockData = readMockFiles(mockDirectory);
watchMockFiles(mockDirectory, mockData);
const app = express();
app.use('/api', (req, res) => {
const url = req.originalUrl;
const mockKey = url.replace('/api/', '');
if (mockData[mockKey]) {
const { responseTime = defaultResponseTime, statusCode = 200 } = mockData[mockKey];
setTimeout(() => {
res.status(statusCode).json(mockData[mockKey].data);
}, responseTime);
} else {
res.status(404).json({ error: 'Mock data not found' });
}
});
const port = 3000;
app.listen(port, () => {
console.log(`Mock server is running on port ${port}`);
});
}
configureMockDevServer();
在上面的示例中,我们创建了一个配置化的模拟服务器。它递归遍历mock
文件夹和子文件夹,监视JSON文件的更改,支持不同的响应时间和HTTP响应码,并通过Express.js提供API接口。
使用示例
要使用这个配置化的模拟服务器,只需运行server.js
文件。它将在端口3000上启动服务器,可以通过访问http://localhost:3000/api/{mockKey}
来模拟API请求,其中{mockKey}
是JSON文件的相对路径。
例如,要获取users.json
文件的数据,可以访问http://localhost:3000/api/users
。你还可以为每个API接口配置不同的响应时间和HTTP响应码,以满足你的需求。
结语
创建一个配置化的模拟服务器是一个有用的工具,可以帮助前
端开发人员模拟不同的API请求,并为每个接口配置不同的响应时间和HTTP响应码。这个方案可以提高开发和测试效率,同时提供更多的控制和灵活性。