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 );
 });

假设我们在本地访问

数据都能拿到了，在试一下别的域名访问

跨域问题也OK。

我们在设置下 package.json 在你本地开发的命令后台添加 && node xx/aap.js 或者单独一个命令窗口运行

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部频道

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