如何快速创建mock

通过简单的图示来讲解

1.png

  • 选择个人空间，点击右侧 添加项目

2.png

  • 输入项目名称、选择个人空间以及相应字段，选择私有或公开，点击 创建项目

3.png

  • 创建项目完毕后，开始 添加接口

4.png

  • 选择分类、输入接口名称、要模拟的路径，提交

5.png

  • 选择 编辑 选项卡

6.png

  • 找到下面的 Response 输入模拟的json，可以是mockjs方式，输入后 保存

7.png

  • 切换到 预览 可以查看到Mock地址，这个地址就是最终我们需要访问的地址

8.png

  • 浏览器访问后就可以看到我们编写的模拟JSON数据

9.png

proxy设置与mock平台的集成使用

设置ucf配置文件中的proxy，通过url设置对方服务器，以及本地router到对方router。

  1. // 代理的配置
  2. proxy: [
  3.   {
  4.     // true 开启当前配置，false 关闭当前配置
  5.     enable: true,
  6.     headers: {
  7.       // 与下方url一致即可
  8.       "Referer": "https://mock.yonyoucloud.com"
  9.     },
  10.     // 代理的路由到对方路由
  11.     router: [
  12.       '/mock'
  13.     ],
  14.     url: 'https://mock.yonyoucloud.com'
  15.   }
  16. ]

通过设置url为https://mock.yonyoucloud.com，然后要访问的本地路由代理到对方的路由mock，实际上访问就是：

只有当访问到/mock/**/路径下的才会代理到对方服务器

本地访问 远端访问
http://127.0.0.1:3000/mock/326/getMasterList https://mock.yonyoucloud.com/mock/326/getMasterList

自定义设置 proxy

如内置配置无法满足需求，需要单独设置原生配置 http-proxy-middleware
除了 enable 和 router 属性，其它属性配置在 opts 中

示例：

  1. proxy: [
  2.   {
  3.     enable: true,
  4.     router: [
  5.       '/mock'
  6.     ],
  8.     opts:{
  9.       onProxyRes:(proxyRes, req, res)=>{
  10.         console.log('onProxyRes')
  11.       },
  12.       headers: {
  13.         "Referer": "https://mock.yonyoucloud.com",
  14.       },
  15.       target: "https://mock.yonyoucloud.com
  16.     }
  17.   },
  18. ],