vue项目dev环境代理和mock数据

vue
大前端
发布日期:   2022-02-22
文章字数:   975
阅读时长:   4 分
阅读次数:  

nodejs版本管理工具在windows环境上安装和使用
简书地址

困难不可怕，可怕的是小白爱思考，还会记笔记。
前端小菜鸡再补个基础课。

背景分析(吐槽)

最近工作只负责一个项目的纯前端，vue框架实现一个PC的大数据平台。
之所以提到代理，mock数据这些，是被几个现状逼得。

  1. 服务端不止一个，而且还是其他团队公司开发，即使有前提讨论的API文档，依然一不能保证接口不改（次数>3）。
  2. 连接的服务不稳当，时不时断开，500，公司没网，突然接口加了权限校验，原因诸多，结果只一个，不能用。
  3. 我们在客户内部开发，离开那个环境就没有数据了。

1. 代理

代理能解决两个事情。

  1. 众所周知的，如果接口跨域，可以使用本地代理，避免前端和服务端接口不同源的问题。比如用http://localhost:300访问http://localhost:8080的服务。
  2. 没有服务的时候自己搞个服务提供数据

代理的例子:
配置一：根目录 .env.development文件

# just a flag
ENV = 'development'

BASE_URL='/'

# base api
VUE_APP_BASE_API= '/api'
VUE_APP_BASE_URL= 'http://192.168.0.223:7000'

VUE_APP_BASE_WX_API= '/wx_api'
VUE_APP_BASE_WX_URL= 'http://192.168.0.99:8082'

VUE_APP_BASE_MN_API= '/mn_api'
VUE_APP_BASE_MN_URL= 'http://192.168.0.113:3003/api/bigdata'

VUE_APP_BIGDATA_API= '/bigdata_api'
VUE_APP_BIGDATA_URL= 'http://192.168.0.252:9991/freqmonitor'

可以看到前端调用了多个不通服务的端口。
配置二：根目录vue.config.js在module.exports内设置devServer来处理代理。
这个地方的配置方案就比较多了，我们使用比较推荐的，那就是请求遇见/api才做代理，但真实的请求中没有/api，所以在pathRewrite中把 /api 去掉, 这样既有了标识, 又能在请求接口中把 /api 去掉。

devServer: {
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            },
            [process.env.VUE_APP_BASE_WX_API]: {
                target: process.env.VUE_APP_BASE_WX_URL,
                changeOrigin: true,
                logLevel: 'debug',
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_WX_API]: ''
                }
            },
            [process.env.VUE_APP_BASE_MN_API]: {
                target: process.env.VUE_APP_BASE_MN_URL,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_MN_API]: ''
                }
            },
            [process.env.VUE_APP_BIGDATA_API]: {
                target: process.env.VUE_APP_BIGDATA_URL,
                changeOrigin: true,
                logLevel: 'debug',
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BIGDATA_API]: ''
                }
            },
        }
    },
    configureWebpack: {
        name: name,
        resolve: {
            alias: {
                '@': resolve('src'),
                '%': resolve('static')
            }
        }
    }

配置三：请求配置baseUrl是空

axios.defaults.baseURL = '';

一个请求的例子

import axios from '@/axios'

export function signalAnalyzeSignalConstitute(data) {
    return axios({
        url: 'bigdata_api' + '/analysis/realSignalType',
        method: 'post',
        data
    })
}

请求在dev环境中被代理分析：
原始请求url：http://localhost:3000/bigdata_api/analysis/realSignalType
遇到bigdata_api被替换成：http://192.168.0.252:9991/freqmonitor/analysis/realSignalType

代理调试

如果接口有错误，需要定位是什么问题，可以打开调试，具体就是在config配置proxy时指定`logLevel: ‘debug’，这样控制台将会出现如下日志

HPM] Rewriting path from "/bigdata_api/analysis/realSignalType" to "/analysis/realSignalType"
[HPM] POST /bigdata_api/analysis/realSignalType ~> http://192.168.0.252:9991/freqmonitor

log对应上面的解释。

mock数据

有了代理，自己随便起个server，返回json数据就ok了。以下方式一个赛一个的简单粗暴。

  1. 搞个mock server啥的，不复杂，不过这个还是有点花时间，继续。
  2. lein new一个空项目，router里直接返回个固定json，so easy。
  3. 我们使用Yapi 接口协议工具支持2的方式了。
    高级Mock

添加期望

$ curl https://apiman.3vyd.com/mock/388/taskDetail |jq
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   382  100   382    0     0   2365      0 --:--:-- --:--:-- --:--:--  2417
{
  "code": "200",
  "message": "成功",
  "data": {
    "taskId": "20220211085847336u4d",
    "taskName": "信号监听任务",
    "taskNo": "20220211085847336u4d",
    "startTime": "2022-02-11 08:58:47.336000",
    "taskType": "4",
    "children": [
      {
        "deviceName": "412监测站设备",
        "deviceId": "STA0001JMX",
        "deviceNo": "STA0001JMX",
        "stationName": "412设备站",
        "longitude": 120,
        "latitude": 35,
        "taskNo": "20220211085847369545"
      }
    ]
  }
}
  1. 自己本地直接使用json，连请求都不用了，离线画页面
    找个地址放个json文件，比如static/data/ssxhData.json
    里面直接放json，上面curl的结果。
    vue文件里引入
    import jsondata from '../../../static/data/ssxhData.json'
    methods里一般发起请求获取数据，改成本地json
    //   获取调制构成
//   this.analyzeSignalConstruct = await getAnalyzeSignalConstruct(query)
this.analyzeResultModulationConstitute = jsondata.signalAnalyzeModulationConstitute
    之后有接口了再变成接口调用即可。
vue
赏
评论
  目录