详解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 FormatNumber函数实现方法
Dec 30 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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的类树(支持无限分类)
2006/10/09 PHP
一个php作的文本留言本的例子(六)
2006/10/09 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Js的MessageBox
2006/12/03 Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
小学庆六一活动方案
2014/02/28 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
公司门卫岗位职责
2015/04/13 职场文书
信仰观后感
2015/06/03 职场文书