这次给大家带来express + mock如何操作前后台并行开发，express + mock操作前后台并行开发的注意事项有哪些，下面就是实战案例，一起来看一下。
在我们平时项目刚启动时，由于后台也是刚开始开发，我们前端往往在开发过程中没有数据和接口请求的，都要造一些假数据进去或者使用mock造一些数据进去，但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。
下面来介绍一种 express + mock 让前后台并行开发。
前后需要先商量好数据格式，等等一系列细节问题，先不多说直接上代码
app.js
'use strict';const express = require('express');const app = express();// portlet NODE_PORT = process.env.PORT || 4000;// 监听 /userapp.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']}));// portlet 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 或者单独一个命令窗口运行
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Angular CLI怎样实现一个Angular项目
Angular CLI怎样实现一个Angular项目
以上就是express + mock如何操作前后台并行开发的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3187899.html
