专栏首页云前端韬光敛彩:用 nginx + express 无痛实现前端项目本地 mock

韬光敛彩:用 nginx + express 无痛实现前端项目本地 mock

自从用单页应用(SPA)风靡以降,对于 web 前端项目来说 -- 无论是目前绝大多数的基于 webpack 的项目,还是既有的 grunt/gulp 项目来说,其基本开发流程大都如下:

  1. npm start 等启动开发时环境,自动监控源文件改变并对浏览器热更新
  2. 依赖后端接口返回的数据渲染页面逻辑,或将结构化的数据提交给后端接口
  3. 完成阶段性或全部开发,以各种方式实现部署

这其中,最能体现“前后端分离”特征的就是第 2 步,即比之于传统上直接传输 HTML,代以轻量的局部 JSON 通信。

然而从另一个角度来看,在开发过程中,前端对后端的依赖某种程度上是更紧密更重了的。很多时候当后端接口服务出错,或尚未开发完成时,前端开发者立即就会面临无米下炊的窘境。

“切图仔” 永远在骚动,“CRUD boy” 却有恃无恐 ?️

没错,本文要谈论的就是 mock 数据的问题。

几种常见的自建 mock 数据的方法如下:

  1. 由企业/组织自建一个专门的 mock 站点,开发者可以自动维护模拟接口并控制返回值
  2. 利用 web 上公开的 mock 网站
  3. 安装 mockjs 等第三方依赖包,在代码中按其约定编写假数据
  4. 直接在业务源码中硬编码自定义的假数据

以上方法一定程度上能暂时满足开发需求,但都需要在项目中硬编码,有些还要反复注释或删除,甚至还有可能泄露业务数据。因此除非是企业/团队的开发规范要求,否则都说不上是最方便的方法。

用 express 楔入本地 mock

在之前的一些项目中,我实践过这样的一种方案:

这种方案 A 用起来还不错,利用本地额外启动的一个 express 服务(可在 npm scripts 中和 dev 整合成一条命令),“拦截”住某些的异步请求,同时也能放过本地未实现的请求,实现针对性的 mock 开发,同时又不用重写所有接口,在自主控制和“正式”接口间取得平衡和灵活度。

但这样一来对项目的改动还是稍嫌麻烦,是对原有结构一种附着性的改造,若是利用相应的脚手架从头搭建的新项目还好,对改造既有项目、临时经手的各式项目来说,每次这样配置一番仍有些烧脑和麻烦;另一个小问题是,对于比较特殊复杂的请求,其转发步骤也难以保证完全的健壮性。

用 nginx 转发本地 mock

由此发展出的方案 B 是对方案 A 的改进,也是本文主要谈论的方法。其思路更简单直接,那就是借助 nginx,实现一种完全无侵入性的 mock 套壳开发:

该方案主要配置方法如下。

nginx.conf

确保本机安装了 nginx 后,在 nginx.conf 中配置相关本地请求路径的 location:

#user  nobody;
events {
    worker_connections  1024;
}

http {
    resolver 8.8.8.8;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout  65;
    server {
        listen       8081;
        # hosts 中做相应的设置 127.0.0.1 localhost.foo.com
        server_name  localhost.foo.com;
        charset      UTF-8;

        location / {
            proxy_pass http://localhost.foo.com:8080;
        }

  # 要代理的路由
        location /foo-api/bar {
            proxy_set_header Host $host;
            # express 服务地址
            proxy_pass http://localhost:8090;
        }
  
        # ... 若干相似的代理配置
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

mock.server.js

用 express 编写本地 mock 服务:

const express = require('express')
const bodyParser = require('body-parser')
const walk = require('klaw-sync')
const ON_DEATH = require('death')
const { execSync } = require('child_process')

process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = 0 // eslint-disable-line

const app = express()
app.use(
  bodyParser.urlencoded({
    extended: false
  })
)
app.use(bodyParser.json())
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', argsMap.mockorigin || '*')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, hci-secret-key, x-api-key'
  )
  res.header('Access-Control-Allow-Methods', 'POST, OPTIONS, GET')
  res.header('Access-Control-Allow-Credentials', true)
  next()
})

// 遍历 xxx.api.js 文件
walk(__dirname)
  .filter(p => /\.api\.js$/.test(p.path))
  .map(p => p.path)
  .forEach(part => require(part)(app))

const p1 = 8090
const h1 = 'localhost'
const server = app.listen(p1, h1, () => {
  console.log(`\n\n Local server running at: http://${h1}:${p1} \n\n`)
})

// 确保退出时停止所有服务
ON_DEATH((signal, err) => {
  server.close()
  try {
    execSync('nginx -s stop')
  } catch (ex) {}
  console.log(signal, 'nginx has stopped.')
})

同目录下的若干 xxx.api.js:

module.exports = function(app) {
  app.post("/foo-api/bar/query", (req, res) => {
    res.json({
      code: 1,
      msg: null,
      data: [0, 1, 3],
    });
  });
};

package.json 和启动命令

最后配置相应的 npm scripts 即可:

"startlocal": "shell-exec \"npm run start --local\" \"npm run express\"",
"express": "nodemon mock/mock.server.js",
  • nginx -c <nginx.conf绝对路径> && npm run startlocal 取代 npm start 启动开发服务
  • express 启动文件同目录下所有 <模块名>.api.js 的文件都会被自动加入 mock 服务中
  • 在浏览器中,将自动打开的页面 url 中 8080 部分改为 8081 即可

--End--

本文分享自微信公众号 - 云前端(fewelife),作者:云前端

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前后端分离--MockJS模拟API返回数据

    其实,我们都知道前后端分离已经逐渐成为业界项目开发标准方式。在Web开发前后端不分离的时代,开发人员既要开发前端,还得开发后端,而且视图和业务逻辑混合在一起,这...

    创译科技
  • 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

    大部分工程化的项目为方便维护,大多都会采用前后端分离的开发方式,而前端和后端的工作基本也是同时下发的,这时前端开发人员就会很尴尬,后端在干活的时候,领导几乎一定...

    大史不说话
  • vue项目实践-添加express-mockjs进行数据模拟

    在新项目开始的时候,后端框架还没有,前端就有能够自己操作的模拟数据的服务是可以有的

    易墨
  • 前端工程化那些事

    创建模式有两种,一种是默认配置(没有带其他辅助功能的 npm包),另一种是手动配置(可按照生产需要进行配置)

    树酱
  • 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-u...

    易墨
  • 从零到部署:用 Vue 和 Express 实现迷你全栈电商应用(最终篇)

    本篇我们将实现应用的部署,这篇教程将首先 Docker 来容器化你的应用,接着教你配置 MongoDB 的身份验证机制,给你的数据库添加一份安全守护,最后我们会...

    一只图雀
  • 为什么前后端分离了,你比从前更痛苦?

    前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

    java思维导图
  • 为什么前后端分离了,你比从前更痛苦?

    前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

    Rookie
  • 为什么前后端分离了,你比从前更痛苦?

    前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

    Java团长
  • 为什么前后端分离了,你比从前更痛苦?

    前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

    Jean
  • 在线商城项目03-启用mock服务

    对于前后端分离的开发,在后台接口还未就绪时,前端需要使用mock数据进行开发。最容易想到的办法,当然是把mock数据写在页面里,但是这会让我们的页面代码很臃肿,...

    love丁酥酥
  • 一个移动开发者的Mock数据之路 原

        在前端开发中,很大一部分工作都是将后台数据获取到后展示在前端界面上。如果接口是现成的,这个过程还相对容易一些,但是如果接口的开发和前端开发是同时进行的,...

    珲少
  • 前后端分离-搭建本地 mock 服务

    念念不忘
  • 快速生成接口文档和模拟数据,GitHub 神器!开发联调效率杠杠滴

    链接:https://mp.weixin.qq.com/s/PF1rubwk-ZpZEd1VsPujnA

    陈宇明
  • axios请求Echarts折线图

    在jQuery里面,实现一个折线图,【前端统计图】echarts实现单条折线图 https://www.jianshu.com/p/0354a4f8c563

    王小婷
  • 从部署上做到前后端分离

    记得在让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)一文中提到了 HTML5 的 History...

    Tusi
  • 实现前后端分离的心得

    对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢?

    嘿嘿嘿
  • 实现前后端分离的心得

    对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开发有什么好处呢?

    Jean
  • Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台

    最近在跟着Johnny的全栈之巅系列视频教程学习使用NodeJS+Express+Element-UI+MongoDB等开发王者荣耀,服务端server,移动端...

    ccf19881030

扫码关注云+社区

领取腾讯云代金券