express+mock如何操作前后台并行开发

来源：动视网责编：小采时间：2020-11-27 19:40:12

express+mock如何操作前后台并行开发

express+mock如何操作前后台并行开发:这次给大家带来express + mock如何操作前后台并行开发，express + mock操作前后台并行开发的注意事项有哪些，下面就是实战案例，一起来看一下。在我们平时项目刚启动时，由于后台也是刚开始开发，我们前端往往在开发过程中没有数据和接口请求的，都要造一些假

推荐度：

点击下载本文 文档为doc格式

导读express+mock如何操作前后台并行开发:这次给大家带来express + mock如何操作前后台并行开发，express + mock操作前后台并行开发的注意事项有哪些，下面就是实战案例，一起来看一下。在我们平时项目刚启动时，由于后台也是刚开始开发，我们前端往往在开发过程中没有数据和接口请求的，都要造一些假

'use strict';
const express = require('express');
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: '*',
 methods: ['GET', 'POST', 'PUT', 'DELETE'],
 allowedHeaders: ['conten-Type', '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',
 ext: 'json js',
 ignore: [
 '.git',
 'node_modules/**'
 ],
});
app.listen(NODE_PORT, function() {
 console.log('mock服务在' + NODE_PORT + '端口上已启用！');
});

我们需要在同级目录添加以下文件
./user/index.js , /user/area.js, /name-list/index.js

./user/index.js 中的内容如下

'use strict';
const express = require('express');
const Mock = require('mockjs');
const apiRoutes = express.Router();
let random = Math.random() * 500 + 500;
// 访问 /user/ 时
apiRoutes.get('/', function(req, res) {
 setTimeout(() => {
 res.json({
 status: 1,
 msg: '查询成功',
 data: {
 name: '张三'
 }
 });
 }, random);
});
// 访问 /user/1111 时
apiRoutes.get('/idList', function(req, res) {
 setTimeout(() => {
 res.json({
 status: 1,
 msg: 'OK',
 data: Mock.mock({
 'list|1-10': [{
 'id|+1': 1
 }]
 })
 });
 }, random);
});
module.exports = apiRoutes;

我们现在在浏览器中访问

我们初步模拟数据基本就完成了。

接下需要在项目中用了

先区分环境

// 判断是否是本地开发
const isDev = process.env.NODE_ENV ==='development';
// 设置 host 本地走mock 生产环境走相对路径 /user/
const host = isDev ? 'http://localhost:4000' : ''
fetch(`${host}/user/`)
 .then(response => {
 return response.json();
 })
 .then(data => {
 console.log(data );
 });

假设我们在本地访问