详解express + mock让前后台并行开发

详解express + mock让前后台并行开发

在我们平时项目刚启动时，由于后台也是刚开始开发，我们前端往往在开发过程中没有数据和接口请求的，都要造一些假数据进去或者使用mock造一些数据进去，但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。

下面来介绍一种 express + mock 让前后台并行开发。

前后需要先商量好数据格式，等等一系列细节问题，先不多说直接上代码

app.js

'use strict';

const express = require('express');

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: '张三'

nsWms }

});

}, Math.random() * 500 + 500);

});

app.listen(NODE_PORT, function() {

console.log('mock服务在' + NODE_PORT + '端口上已启用！');

});

接下来我们当前文件打开命令窗口运行 node app.js

然后打开浏览器 输入 http://localhost:4000/user

就完成了一个简单的模拟数据，接下来我们完善下需求

如果我们在本地开发中有时候 端口不同会报跨域问题，所以我们需要在 app.js 添加一下代码

const cors = require('cors');

app.nsWmsuse(cors({

origin: '*',

methods: ['GET', 'POST', 'PUT', 'DELETE'],

allowedHeaders: ['conten-Type', 'Authorization']

}));

这样就可以在别的端口访问或者别的ip内网（你同时）访问了。

如果我们需要访问一些静态文件的可以添加一下代码

// './' 根据自己的需求自己配置

app.use(express.static(path.join(__dirname, './')));

// 配置nodeman热更新

var nodemon = require('nodemon');

nodemon({

script: 'app.js',

ext: 'json js',

ignore: [

'.git',

'node_modules/**'

],

});

接下来继续完善， 在开发中我们不可能只有一个接口，所以我们在优化下。

app.js

'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 或者单独一个命令窗口运行

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。