express + mock 让前后台并行开发

lansheng228 发布于2019-08-26 11:59 / 3007人阅读

摘要：下面来介绍一种让前后台并行开发。服务在端口上已启用我们需要在同级目录添加以下文件中的内容如下访问时查询成功张三访问时我们现在在浏览器中访问我们初步模拟数据基本就完成了。

在我们平时项目刚启动时，由于后台也是刚开始开发，我们前端往往在开发过程中没有数据和接口请求的，都要造一些假数据进去或者使用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热更新
nodemon 可以按照需求自己配置
接下来继续完善，在开发中我们不可能只有一个接口，所以我们在优化下。

app.js

"use strict";

const express = require("express");
const cors = require("cors");
const path = require("path");
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);

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 或者多带带一个命令窗口运行

好了介绍到此。

GPU云服务器云服务器后台开发游戏后台开发 mock Mock100

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107976.html

QuickMock：基于Express的快速mock平台

摘要：并将请求通过特定的，开发环境指定到对应的本地文件。联调或者生产环境发布前，再修改特定的。联调发布前，也同样需要将关键代码进行处理，将请求真正发送到后端服务器中，而不是被拦截到。项目列表项目面板，展示已存在的所有项目。前言感兴趣的话，可以star关注支持下，项目地址。在日常的开发中，前端mock后端api数据，是实现前后端并行开发非常重要的一步。有了数据，才能更加真实反馈实际操作流...

mdluo 2019-08-20 17:41 评论0 收藏0
基于webpack的前后端分离开发环境实战

摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...

soasme 2019-08-22 11:03 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

yy13818512006 2019-08-21 16:59 评论0 收藏0