美文网首页
vue框架dev环境代理和mock数据

vue框架dev环境代理和mock数据

作者: 小马将过河 | 来源:发表于2022-02-21 23:43 被阅读0次

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

    背景分析(吐槽)

    最近工作只负责一个项目的纯前端,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框架dev环境代理和mock数据

          本文链接:https://www.haomeiwen.com/subject/xwrwlrtx.html