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


Posted in Javascript onJune 06, 2018

在我们平时项目刚启动时,由于后台也是刚开始开发,我们前端往往在开发过程中没有数据和接口请求的,都要造一些假数据进去或者使用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

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

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

如果我们在本地开发中有时候 端口不同会报跨域问题,所以我们需要在 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

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

./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;

我们现在在浏览器中访问

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

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

我们初步模拟数据基本就完成了。

接下需要在项目中用了

先区分环境

// 判断是否是本地开发
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 );
 });

假设我们在本地访问

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

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

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

跨域问题也OK。

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

好了介绍到此。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生javascript实现隔行换色
Jan 04 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
vue element项目引入icon图标的方法
Jun 06 #Javascript
vue脚手架搭建过程图解
Jun 06 #Javascript
vue左右侧联动滚动的实现代码
Jun 06 #Javascript
Express本地测试HTTPS的示例代码
Jun 06 #Javascript
微信小程序仿美团城市选择
Jun 06 #Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
详解封装基础的angular4的request请求方法
Jun 05 #Javascript
You might like
php cookie使用方法学习笔记分享
2013/11/07 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python操作xml文件示例
2014/04/07 Python
跟老齐学Python之复习if语句
2014/10/02 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
会计实习自我鉴定
2013/12/04 职场文书
高职教师岗位职责
2013/12/24 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
教师党员个人总结
2015/02/10 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书