- 博客(38)
- 收藏
- 关注
RSS订阅
原创 低代码数据可视化开源项目源码阅读总结（二）
在阅读开源代码的画布代码和组内配置代码时，发现一个问题，当配置成组组件的透明度的时候，组内组件的操作框也变得透明，这里的实现是有问题的。笔者阅读其画布中的组件代码，发现因为组内组件（包含其操作框）因为嵌套在成组组件内部，所以设置成组组件透明度的时候，组内组件的操作框必然会受到影响。我们理想的情况是操作框不受任何组件，组内配置的透明度的影响。这样，即便成组组件组内配置为完全透明的时候，我们仍可看到成组组件内部的组件的操作框，并且进行组件操作。
2023-12-18 13:17:07
629
原创 前端阻止浏览器自动填充密码和用户名的方法
这里还需要注意的是，文本输入框和密码框是在页面存在的，但是用了绝对定位，top和left为极大值，绝对定位使得其脱离文档流，不影响页面样式，top和left为极大值，使得，不论这两个输入框是相对于谁定位的，我们屏幕宽度分辨率，一般也就2000px左右的宽度，设置为9999px的极大值，我们是在网页上看不到这两个输入框的。经笔者实践，通过隐藏的文本输入框和密码框去阻止浏览器的自动填充的这个方法，是兼容性最好的方法。这样浏览器就只会自动填充这两个输入框，文本输入框填充用户名，密码输入框填充密码。
2024-09-13 09:01:54
237
原创 关于前端分辨率兼容和显示器缩放兼容的处理
如下两图所示，在不同分辨率下，页面的宽度和分辨率的宽度是一致的。所以其实我们在1920的宽度分辨率下，把窗口缩小宽度到1600，是可以模拟1600分辨率的情况的。那么我们把我们的窗口宽度调整为1920/1.25% = 1536px的宽度，即可模拟测试人员的电脑显示状况，方便我们复现问题。所以当测试人员给我们提分辨率兼容的问题单的时候，一般都是我们开发的页面，在更小的分辨率尺寸中显示异常。那么其实我们可以通过缩小我们的浏览器窗口，达到模拟测试人员机器的电脑分辨率的情况。但是有时候，测试人员的电脑会进行放大。
2024-09-07 12:36:25
688
原创 修改密码模块中对轮询接口响应用户失效问题的处理
但是这个主项目还引入了其他子项目，其他子项目也有轮询接口，如果每增加一个子项目，我们都像这个主项目的框架一样，去根据本地存储key判断是否轮询，来避免因为修改密码后用户token失效提前跳转登录页面，那么拓展性就很差。而主项目框架，对302进行手动重定向，保证了超时的时候会重新登录，又结合了本地存储的key,保证了修改密码后，不去请求轮询接口，不让轮询接口302重定向影响到修改密码成功后前端逻辑的执行。我们可以在修改密码成功后，在本地存储一个key，当有这个key存储的时候，不去请求轮询接口。
2024-09-07 10:53:20
492
原创 svn使用教程学习
（todo 是本地没有提交的和远程的发生了冲突吗，本地的还没有提交是吗？就是使用beyondCompare软件，比较两个分支代码，查看两个分支代码差异，然后进行选取合并，最后将合并的结果提交到远程。这里的流程是，把test.text添加到忽略列表，然后提交的时候，果然就没有doc/test.txt文件了。博主每次都选择他们的解决冲突，如果是选择自己的解决冲突，应该要在解决完冲突后，进行提交才算吧?暂存的时候，如果选择的是之前的暂存版本，那么会生成新的版本，就是同一个暂存名字，有两个版本。
2024-08-24 23:06:12
338
原创 vue学习笔记
没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。问题之：这样绑定的v-bind的，可以是动态的值吗？所以表现和真值是一样的。问题之，如下，什么叫做直接写在html文件里的模板？
2024-08-01 18:25:36
454
原创 React-Three-Fiber.js 用于 Three.js 的 React 渲染器
React-Three-Fiber 通过将 Three.js 的 API 封装为 React 组件的形式，使得在 React 中使用 Three.js 变得更加方便和可维护。React-Three-Fiber 还引入了一种叫做 “Three.js Fiber” 的机制，用于基于 React 的渲染和更新优化。它使用了 React 的虚拟 DOM 引擎，提供了高效的渲染和更新机制，使得在 Three.js 场景中进行动态变化和交互性能更好。
2024-07-29 12:13:39
186
原创 react-intl国际化{}大括号转义
根据源码formatMessage实现，可知，如果要在国际化中使用大括号本身，那么我们用引号包裹大括号即可。
2024-07-15 19:15:36
167
原创 前端文件下载的方式
方案：a标签可以携带cookie,所以可以有另一种解决方法，在下载文件前，发送一个请求获取一个临时token通过cookie进行携带，a标签下载是流式下载，会把服务器的文件像流水一样存储到本地磁盘，所以下载直接能看到下载，不会将文件缓存到浏览器。**如果文件小还行，文件大了就会出现点击了下载，但是没有反应，过了几分钟后才出现了下载，这种等待时间就是将服务器端的那个文件转成了blob（res.blob()花的时间特别长），才进行a标签的流式下载（这里页面才开始出现有下载的交互体现）
2024-07-11 19:52:20
448
原创 解析gitlab中graph图（持续更新）
问题单202210260971-antd组件badge组件因升级丢失样式 这个提交为什么只合入了iotprivate的v3.7.0,而没有合入iotprivate的v3.6.0,根据graph显示，这个问题改在b02分支，后b02分支合入了二期的merge分支，二期分支沿用merge分支，二期分支在v3.6.0前就合入了iotprivate分支，但是为什么在v3.7.0才看到这个问题的提交，是我的理解错误了吗？二期分支明明是有这个commit的合入的。
2024-04-22 20:26:51
329
原创 前端数据可视化d3技术简介
本文参考自mooc教程。（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。D3强调web标准为您提供了现代浏览器的完整功能，而没有将自己的专有框架与强大的可视化组件和数据驱动的DOM操作方法相结合。D3是一个专门用于2d场景数据可视化的库。WHY社区中已经有很多处理数据可视化的js库。我们为什么要学习D3？高度打包的库（如echarts、highcharts）可以在PC和移动设备上很好地运行，并且与当前大多数浏览器兼容。
2024-03-27 20:00:41
1719
原创 低代码数据可视化开源项目go-view阅读总结
右侧的配置栏组件，组件库里的每个组件都单独写一份vue的模板文件。对于多个组件共有的配置，会进行公共组件的抽离，如对于柱状图和折线图组件，这两个图表组件有许多共有的配置，对共有的配置，抽离为global-setting组件进行组件复用。那么在用户进行配置的修改后，如何去改动组件的配置数据呢？这里就用到了vue里的双向数据绑定v-model的指令，去进行数据的同步。
2024-03-27 09:48:26
2630
1
原创 数据可视化系列-echarts基本概念讲解
本文参考自mooc数据可视化教程。ECharts 基本概念ECharts 基本概念: 系列系列（series）是指：一组数值映射成对应的图案例：多系列混合::: details<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.m
2023-12-17 22:44:18
1294
原创 低代码数据可视化开源项目源码阅读总结
该项目是一款数据可视化应用搭建工具，是仿照的阿里云datav项目，使用vue技术栈进行实现的。因为本人工作中需要开发的可视化拖拽项目也是仿照的阿里云datav项目，但是阿里云项目并未开源，故想要通过阅读该项目的项目实现思路，以应用到后续工作中的可视化拖拽项目的开发中。画布中除了柱状图，通用标题等组件库中的组件，也有类型是组的组件，当我们选中一个或多个组件进行成组操作的时候，会创建一个类型为组的组件，将选中的组件作为children包裹起来。那么，在画布中，组组件和组件库组件的位置是如何定位的？
2023-09-12 07:50:29
635
原创 百度地图数据可视化
百度地图入门百度开发者账号申请官方教程控制台API基本用法::: details<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> &l
2023-06-24 21:39:49
378
1
原创 数据可视化-canvas
/ 获取 DOM 对象constgetContext'2d';// 获取 Canvas 对象'red';// 填充为红色fillRect005050;// 绘制矩形beginPath;// 开始绘制路径1;// 线条宽度'blue';// 线条填充色moveTo100100;// 起点坐标lineTo25075;// 中间点坐标lineTo300100;// 终点坐标stroke;// 绘制线段beginPath;2;
2023-04-12 19:55:26
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人