详解express + mock让前后台并行开发
在我们平时项目刚启动时,由于后台也是刚开始开发,我们前端往往在开发过程中没有数据和接口请求的,都要造一些假数据进去或者使用mock造一些数据进去,但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。 下面来介绍一种 express + mock 让前后台并行开发。前后需要先商量好数据格式,等等一系列细节问题,先不多说直接上代码 app.js const express = require('express');
const app = express(); // port app.listen(NODE_PORT,function() { 接下来我们当前文件打开命令窗口运行 node app.js 然后打开浏览器 输入 http://localhost:4000/user 就完成了一个简单的模拟数据,接下来我们完善下需求 如果我们在本地开发中有时候 端口不同会报跨域问题,所以我们需要在 这样就可以在别的端口访问或者别的ip内网(你同时)访问了。 如果我们需要访问一些静态文件的可以添加一下代码 // 配置nodeman热更新 接下来继续完善, 在开发中我们不可能只有一个接口,所以我们在优化下。 app.js 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({ // port app.use('/user',userRoutes); nodemon({ app.listen(NODE_PORT,function() { 我们需要在同级目录添加以下文件
let random = Math.random() * 500 + 500;
// 访问 /user/ 时 apiRoutes.get('/',res) { setTimeout(() => { res.json({ status: 1,data: { name: '张三' } }); },random); }); // 访问 /user/1111 时 apiRoutes.get('/idList',msg: 'OK',data: Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) }); },random); }); module.exports = apiRoutes; 我们现在在浏览器中访问 我们初步模拟数据基本就完成了。 接下需要在项目中用了 先区分环境 fetch(
${host}/user/ ).then(response => { return response.json(); }) .then(data => { console.log(data ); }); 假设我们在本地访问 数据都能拿到了, 在试一下 别的域名访问 跨域问题也OK。 我们在设置下 好了介绍到此。希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |