dataease二次开发记录3 插入网页控件代理设置

dataease插入网页控件只能将网页地址写死（不输入http://时会自动补充）。

这个限制造成比较大的麻烦，如果通过网络地址访问此仪表板或大屏，那么该网页则无法显示，因为写死了主机地址为localhost。
因此想办法研究了前端代码core_frontend。
我的调试步骤是这样的（我也不知道调试流程，自己摸索的，如果有人能讲解一下二次开发一个系统的流程就好了）

1. 在浏览器中检查网页控件这个元素，发现被包裹在<div ... component-type = "DeFrame" ...></div>中，得到关键词DeFrame。
2. 在core_frontend全局搜索DeFrame。src/custom-component/de-frame/ComponentFrame.vue 阴差阳错顺藤摸瓜，看到了同文件夹下的src/custom-component/de-frame/FrameLinks.vue
3. 在FrameLinks.vue中看前端代码，看到了 <el-input :effect="themes" v-model="state.linkInfoTemp.src" @blur="onBlur" />。搜索知道了@blur这个函数是失去焦点的意思。那所以就是通过onBlur函数去访问定义的网络地址。

const onBlur = () => {
 state.linkInfoTemp.src = checkAddHttp(state.linkInfoTemp.src)
 curComponent.value.frameLinks.src = state.linkInfoTemp.src
 snapshotStore.recordSnapshotCache()
 useEmitt().emitter.emit('frameLinksChange-' + curComponent.value.id)
}

4. 在onBlur函数中发现了checkAddHttp函数，前端自动补充http头部就是通过这个函数。

export function checkAddHttp(url) {
  if (!url) {
    return url
  } else if (/^(http(s)?:\/\/)/.test(url.toLowerCase())) {
    return url
  } else {
    return 'http://' + url
  }
}

5. 发现这些东西后修改代码就简单了。要想实现动态代理那就是修改@blur调用的函数。我自定义了一个函数getUrlToVisit，不再补充http头部，使用location.host动态代理host。

const getUrlToVisit = url => {
  if (!url) {
    return url
  } else if (/^(http(s)?:\/\/)/.test(url.toLowerCase())) {
    return url
  } else {
    return `http://${location.host}` + url
  }
}

修改@blur调用的函数
<el-input :effect="themes" v-model="state.linkInfoTemp.src" @blur="getUrlToVisit(element.frameLinks.src)" />

这样，就能在前端只需输入接口。例如要访问我的自定义webgl
就只需要在前端配置地址时输入external/mywebgl/index，就可以实现动态代理。