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
### DataEase 二次开发指南 DataEase 是一款开源的数据可视化平台,支持多种数据源接入和丰富的图表展示功能。对于希望扩展其核心功能的开发者来说,掌握二次开发的方法至关重要。 #### 获取官方文档和支持材料 为了更好地理解如何进行二次开发,建议先熟悉官方提供的API文档和其他支持材料[^1]。这些资源通常包含了详细的接口说明、参数定义以及调用示例等内容,能够帮助开发者快速上手并解决常见问题。 #### 设置开发环境 在开始之前,确保已经安装了必要的依赖项,并配置好本地开发环境。这可能涉及到下载特定版本的Java SDK, Node.js以及其他相关工具链。此外,还需要克隆最新的DataEase仓库至本地以便于后续操作[^2]。 #### 探索现有插件机制 DataEase 支持通过编写自定义插件来实现个性化需求。研究现有的插件结构及其工作原理可以为创建新的组件提供宝贵的经验借鉴。例如,查看`plugins`目录下的各个子文件夹可以帮助了解不同类型的插件是如何被组织起来并与主程序交互工作的[^3]。 #### 实践案例分析 实际动手尝试构建一个小规模的应用场景有助于加深对整个流程的理解。可以从简单的修改界面样式入手,逐步过渡到更复杂的业务逻辑处理。比如增加一个新的仪表板视图或者集成第三方服务API等都是不错的练习方向[^4]。 ```javascript // 插入一段JavaScript代码作为例子 const fetchData = async () => { try { let response = await fetch(&#39;https://api.example.com/data&#39;); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); console.log(data); } catch (error) { console.error(&#39;Failed to get data:&#39;, error.message); } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值