在我们平时项目刚启动时,由于后台也是刚开始开发,我们前端往往在开发过程中没有数据和接口请求的,都要造一些假数据进去或者使用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: '张三' } }); }, 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.use(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;
我们现在在浏览器中访问
我们初步模拟数据基本就完成了。
接下需要在项目中用了
先区分环境
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“详解express + mock让前后台并行开发”评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]