脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → express mock前后台并行

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

 更新时间：2018年06月06日 10:03:47   作者：kanshouji911  
这篇文章主要介绍了详解express + mock让前后台并行开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

我们现在在浏览器中访问

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

接下需要在项目中用了

先区分环境

// 判断是否是本地开发
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 或者单独一个命令窗口运行

好了介绍到此。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 使用Node.js实现一个多人游戏服务器引擎

    使用Node.js实现一个多人游戏服务器引擎

    这篇文章主要给大家介绍了关于如何使用Node.js实现一个多人游戏服务器引擎的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Node.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Node使用koa2实现一个简单JWT鉴权的方法

    Node使用koa2实现一个简单JWT鉴权的方法

    这篇文章主要介绍了Node使用koa2实现一个简单JWT鉴权的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 三分钟教你用Node做一个微信哄女友神器（面向小白）

    三分钟教你用Node做一个微信哄女友神器（面向小白）

    这篇文章主要介绍了三步教你用Node做一个微信哄女友神器（面向小白）,用node和wechaty微信网页接口开发的一款小工具,可以定时给女朋友发每天的天气情况,天气提醒,每日一句,通过配置机器人api后还可以实现微信机器人自动陪女朋友聊天,需要的朋友可以参考下
    2019-06-06
  • 解析NodeJS异步I/O的实现

    解析NodeJS异步I/O的实现

    本篇文章主要介绍了解析NodeJS异步I/O的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • node实现将json转为excel

    node实现将json转为excel

    平时我们写代码处理的数据格式一般都是json格式的数据,但有时候我们也需要将数据转为excel格式进行保存或分享,所以下面我们就来学习一下如何通过node实现json转excel吧
    2024-11-11
  • node.js实现复制文本到剪切板的功能

    node.js实现复制文本到剪切板的功能

    这篇文章主要给大家介绍了node.js实现复制文本到剪切板的功能，文中介绍的非常详细，并给出示例代码，相信对大家具有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。
    2017-01-01
  • node.js实现的装饰者模式示例

    node.js实现的装饰者模式示例

    这篇文章主要介绍了node.js实现的装饰者模式,简单说明了装饰者模式的原理、功能并结合实例形式给出了node.js装饰者模式的实现方法,需要的朋友可以参考下
    2017-09-09
  • nodejs读取本地mp3和mp4等媒体文件并播放的案例

    nodejs读取本地mp3和mp4等媒体文件并播放的案例

    fs模块是nodejs官方提供用来操作文件的模块,下面这篇文章主要给大家介绍了关于nodejs读取本地mp3和mp4等媒体文件并播放的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • nodejs实现黑名单中间件设计

    nodejs实现黑名单中间件设计

    最近写的项目中涉及到防止灌水的功能，于是设计了黑名单中间件，跟大家分享一下，同时也希望大家有好的建议能够拍砖.
    2014-06-06
  • 详解使用Visual Studio Code对Node.js进行断点调试

    详解使用Visual Studio Code对Node.js进行断点调试

    这篇文章主要介绍了详解使用Visual Studio Code对Node.js进行断点调试,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论