在我们平时项目刚启动时，由于后台也是刚开始开发，我们前端往往在开发过程中没有数据和接口请求的，都要造一些假数据进去或者使用mock造一些数据进去，但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。
下面来介绍一种 express + mock 让前后台并行开发。
前后需要先商量好数据格式，等等一系列细节问题，先不多说直接上代码
app.js
const app = express();
// port
let NODE_PORT = process.env.PORT || 4000;
// 监听 /user
app.use('/user',function(req,res) {
// 让接口 500-1000ms 返回 好让页面有个loading
setTimeout(() => {
res.json({
status: 1,msg: '查询成功',data: {
name: '张三'
}
});
},Math.random() * 500 + 500);
});
app.listen(NODE_PORT,function() {
console.log('mock服务在' + NODE_PORT + '端口上已启用！');
});
接下来我们当前文件打开命令窗口运行 node app.js
然后打开浏览器 输入 http://localhost:4000/user
就完成了一个简单的模拟数据，接下来我们完善下需求
如果我们在本地开发中有时候 端口不同会报跨域问题，所以我们需要在 app.js 添加一下代码
这样就可以在别的端口访问或者别的ip内网（你同时）访问了。
// 配置nodeman热更新
接下来继续完善， 在开发中我们不可能只有一个接口，所以我们在优化下。
app.js
const cors = require('cors');
const path = require('path');
var nodemon = require('nodemon');
const userRoutes = require('./user');
const areaRoutes = require('./area');
const nameListRoutes = require('./name-list');
const app = express();
app.use(cors({
origin: '*','Authorization']
}));
// port
let NODE_PORT = process.env.PORT || 4000;
app.use(express.static(path.join(__dirname,'./')));
app.use('/user',userRoutes);
app.use('/area',areaRoutes);
app.use('/nameList',nameListRoutes);
nodemon({
script: 'app.js',});
app.listen(NODE_PORT,function() {
console.log('mock服务在' + NODE_PORT + '端口上已启用！');
});
我们需要在同级目录添加以下文件
./user/index.js,/user/area.js,/name-list/index.js
./user/index.js 中的内容如下
// 访问 /user/ 时
apiRoutes.get('/',res) {
setTimeout(() => {
res.json({
status: 1,data: {
name: '张三'
}
});
},random);
});
// 访问 /user/1111 时
apiRoutes.get('/idList',msg: 'OK',data: Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
});
},random);
});
module.exports = apiRoutes;
我们现在在浏览器中访问
我们初步模拟数据基本就完成了。
接下需要在项目中用了
先区分环境
${host}/user/).then(response => {
return response.json();
})
.then(data => {
console.log(data );
});
假设我们在本地访问
数据都能拿到了， 在试一下 别的域名访问
跨域问题也OK。
我们在设置下 package.json 在你本地开发的命令后台添加 && node xx/aap.js 或者单独一个命令窗口运行
好了介绍到此。希望对大家的学习有所帮助，也希望大家多多支持编程之家。
