前端开发
文章平均质量分 70
拿我格子衫来
《GitLab CI/CD 从入门到实战》作者,擅长GitLab CI/CD,ThingsBoard,Node-RED,Monaco Editor,数据可视化及浏览器脚本编写。熟练使用Docker,Kong,云原生相关组件。
展开
-
基于鸿蒙HarmonyOS 元服务开发一款公司运营应用(ArkTS API 9)
最近基于Harmony OS最新版本开发了一个作品,本文来详细讲解一下,如何我是如何开发这个作品的。以及如何使用OpenHarmony,基于ArkTS,API 9来开发一个属于自己的元服务。废话不多说,我的作品名称叫做公司运营,是一个根据会计公式来预测公司未来几个月的资产运营情况。主要分为三部分,第一部分:填写公司基本情况表单第二部分:通过公司计算公司未来几个月的运营情况,使用扇形图,标识公司资金组成部分。第三部分:使用元服务卡片来显示当前月份的公司资金状况。原创 2024-01-15 08:00:00 · 10263 阅读 · 0 评论 -
Arduino有关电路图解释,图片收集,以备后用
c原创 2021-01-20 13:15:07 · 3771 阅读 · 0 评论 -
datahub 中血缘图的实现分析,在react中使用airbnb的visx可视化库来画有向无环图
低级元素是说它不直接提供一个个完整的图表,而且要使用多个元素组装实现,这也意味着 要使用它,还是有一点门槛的,但人家的审美确实在线。因为这个库并不是一个专业的Graph库,所有在图的布局算法,自定义接的,自定义线,或者图的交互 都不如g6做的丰富。之前在公司也做过一些案例,也看过很多友商的产品,阿里的DataWork,领英的Datahub,做大数据的项目,必不可少的是要接触到数据血缘图,它在大数据项目中有着很重要的作用。血缘图使用的react-flow,节点,线都是使用div画的。大数据量时,可能堪忧。原创 2023-10-24 16:42:02 · 7005 阅读 · 0 评论 -
数据血缘可视化之Open-Lineage(一)
这是一个企业级的大数据血缘可视化项目,目前支持功能如下。目前版本 V1.0.2。支持解析 Hive sql 生成血缘图,性能高速稳定支持字段级血缘与表级血缘切换展示支持完整血缘与不完整血缘链路切换展示支持血缘高亮显示支持设置血缘高亮颜色支持画布水印支持画布拖拽、放大、缩小、自适应、视图居中显示支持血缘图图片下载支持小地图拖拽编辑器支持编写 Sql编辑器支持切换主题色编辑器支持语法高亮支持仅编辑区,仅预览区切换功能支持血缘图全屏和退出全屏功能。转载 2023-10-16 09:47:30 · 7743 阅读 · 0 评论 -
多个扇形元素绕圆旋转
效果图这种效果有很多方案,最后选择了一个比较简单的方案,就是一个position: relative;的 div 。包裹5个position: absolute;的div。通过旋转,调整5个div的 top 与 left,而产生弧度,并使中心点都指向圆心。黄色扇形与文字 都是在5个div内部。当最外层的圆旋转时,内部的所有元素都跟着旋转。有一个缺点是,因为是div模拟 72度的 扇形。两两之间会有重叠。如下如果要解决这个问题,就需要使用css3的 缩放transform: skewX(3原创 2023-10-13 17:03:03 · 7761 阅读 · 0 评论 -
使用js获取选中的dom元素 并改变选中(有序dom)的状态
一个效果图,一段代码, 就这样吧。// 是否在容器按下状态。原创 2023-10-16 07:00:00 · 7415 阅读 · 0 评论 -
有关Monaco LSP的集成 monaco-languageclient 项目的开启
【代码】有关Monaco LSP的集成 monaco-languageclient 项目的开启。原创 2023-09-14 07:30:00 · 6327 阅读 · 0 评论 -
华为云云耀云服务器L实例评测|有关华为云云耀云服务器L实例你可能不知道的事情
最近华为云推出了华为云云耀云服务器L实例。主打一个轻量级云服务器,即开即用,轻松运维,开启简单上云第一步。具有智能不卡顿,价优随心用,上手更简单,管理特省心。在推出的第一时间我就买了一台来耍耍,结果发现确实好用。但是有一个缺点就是,就是一旦购买后,不支持更换规格,比如你一开始买的规格,应用镜像是WordPress,购买不支持切换为Portainer应用镜像。这样做的原因是因为这个应用镜像已经初始化到系统内部了。原创 2023-09-11 17:14:43 · 5395 阅读 · 0 评论 -
华为云云耀云服务器L实例评测|使用Portainer快速部署物联网低代码平台Node-RED
Node-RED是一个开源的物联网平台,它是一个基于流程的编程工具,主要用于为物联网 (IoT)设备创建流程。连接的节点,通常是输入节点、处理节点和输出节点的组合,当它们连接在一起时,构成一个“流” (Flows)本文将介绍如何基于华为云云耀云服务L实例的Portainer来快速部署Node-RED平台。**须知:**在应用镜像启动期间,对云耀云服务器L实例进行重置密码、重启或开关机操作将导致应用镜像管理界面登陆异常。将要导入的json内容复制到编辑区域,点击导入,再点击部署。原创 2023-09-04 18:45:16 · 5651 阅读 · 1 评论 -
基于Element-ui的颜色选取器,增加最近使用的颜色。
8个预设颜色值,使用一个颜色后,将颜色放到第一个预设颜色,去重,保存到本地。原创 2023-08-22 07:00:00 · 3695 阅读 · 0 评论 -
使用VSCode的 Dev Containers 插件搭配Docker 容器进行开发环境的搭建
需要安装插件 https://marketplace.visualstudio.com/items?有些镜像是二进制文件,并没有执行文件,所有第一次启动时可以指定 前台运行。在启动时需要映射端口,比如你的项目端口是3000 在启动镜像时就加上。注意在启动镜像时 最好使用root 管理员账号启动。后台运行,则会运行一下就立即停止。原创 2023-08-16 07:30:00 · 4217 阅读 · 1 评论 -
如何将一个目录下的所有md文件导出成pdf
使用脚本 工具 进行 markdown 批量转 pdf原创 2023-07-14 12:01:13 · 3918 阅读 · 0 评论 -
探索基于VSCode的远程开发插件,进行远程指令和本地指令的运行
连接远程时,会刷新一下当前窗口,我猜测是刷新当前的工作目录,以及一些上下文,和变量,环境变量,而且在打开终端时,默认就是当前的远程工作目录,使用cd命令无法进入本地机器目录。该参数可以设置终端的名称,自定义的shell执行器的路径,执行shell的参数,工作目录,环境变量。当你使用这个插件链接到远程机器,并打开一个工作目录时,那么终端的命令是默认在当前的工作目录,需求是,当是远程工作目录时,也能够够创建一个终端,而这个终端的工作目录是本地工作目录。你可以这样创建终端,将工作目录中的子级当做终端的工作目录。原创 2023-07-11 10:13:36 · 3779 阅读 · 0 评论 -
echarts 的 一个图表容器,使用grid存放多个折线图,并配置x轴联动
数据系列的配置对象,用于描述每个数据系列的类型、名称、样式等。其中包含了两个对象,分别对应两个数据系列(此处是折线图),其中包含了两个对象,分别对应上下两个部分的网格,其中包含了两个对象,分别对应上下两个部分的横轴,其中包含了两个对象,分别对应上下两个部分的纵轴,:图例组件的配置对象,用于展示图表中各个数据系列的名称及对应的符号。:数据区域缩放组件的配置对象,用于控制数据区域的缩放状态。:提示框组件的配置对象,用于在鼠标悬停时显示提示信息。:标题组件的配置对象,用于设置图表的标题。原创 2023-06-26 07:30:00 · 3789 阅读 · 0 评论 -
「AntV」当我用AI为开发AntV图表插上想象的翅膀后
做前端图表时,最耗时的就是找配置参数,比如你在使用AntV G2时,为了更加美观,拉大数据之间的差距,需要将y轴设置一个最小值,由于每个图表的参数少说十几个,多达二十多个,一个一个找,势必会浪费很多时间,更何况有时你找的参数并不在某一具体的图表模块,而是在公共的图表组件配置模块中。这个时候我就思考,这些寻找配置参数,毫无技术性的,耗时的工作能不能交个AI来做?所以在日常的开发图表的过程中,遇到问题,我刻意地去利用AI去完成。下面看一下我在实际开发中的几个案例。原创 2023-06-21 14:34:23 · 10232 阅读 · 1 评论 -
「AntV」基于AntV G6 实现 数据血缘有序分组dag链路图排版
数据链路图是数据开发产品中的一个核心特性,也是产品核心竞争力之一。对此感兴趣的可以多花一段时间做一个专题研究,也欢迎私下找我讨论。最后希望大家都能在滴普得到成长,做出自己的杰出的作品。要相信功夫不负有心人✌。原创 2024-01-11 08:00:00 · 6234 阅读 · 2 评论 -
「AntV」@antv/g2plot 特殊 散点图 x轴为category 调整了legend 的marker
下面代码演示了如何使用 antv/g2plot 创建一个散点图,并对其进行基本的样式和布局配置。具体来说,代码中的 data 数组定义了散点图的数据系列,每个数据对象包含了分类、值和 y 轴字段三个属性。而 cateMap 对象则定义了每个分类对应的颜色和形状。在创建 Scatter 实例时,通过传入参数配置了散点图的一些基础属性:padding 控制了散点图绘制区域与画布边缘之间的间隙;xField 和 yField 分别指定了 x 轴和 y 轴所对应的字段;colorField 和 sha原创 2023-06-13 10:35:22 · 3725 阅读 · 0 评论 -
「AntV」使用 AntV G2Plot 实现一个复杂的带有四象限自定义标注的统计散点图
使用散点图分析学生成绩的稳定性,平均分,标准差,四象限。数据标注,g2plot 图表。原创 2023-05-24 17:05:37 · 4352 阅读 · 3 评论 -
Monaco Editor编辑器教程(三十):将vue文件作为一种编程语言集成到monaco editor中,实现vue组件的语法,标签高亮。
最近在使用gitlab的web ide时发现当编写一个 vue组件时,文件的后缀名为.vue。在编辑器的右上角会显示当前的编程语言时vue,并且高亮语法或标签,格式化,折叠都表现很优秀。但是其实monaco是不支持vuejs的,作为一名前端开发者,我们有时需要在monaco编辑器中编写vue组件,所以我就利用业余时间尝试 在讲vuejs集成到monaco中。确切说vuejs并不是一个编程语言,它和html很类似,但也有很多差异,这里就不展开讲了。本文主要我是如何探索,实践将vuejs集成到monaco中的。原创 2023-05-09 08:00:00 · 3992 阅读 · 2 评论 -
Monaco Editor编辑器教程(二九):在monaco中引入额外ts类型库,增强编辑器体验
在之前的文章中,我们介绍了如何在monaco中为某一个方法增加注释,可以通过CodeLens 也可以通过Marker来显示某个变量,常量,或方法的文档。但这种方法不太适合大规模的库,比如一个js库有成千上百个方法,作为一名懒惰的程序员不可能将每一个方法都添加到monaco中。那么本篇文章就来给大家介绍一种借助TypeScript的类型声明文件,来增强编辑器的体验。该方法不仅能够显示某个方法的详细文档,还能在书写时自动完成某个方法。核心方法只有一个官方文档下面来详细介绍一下。原创 2023-05-08 08:00:00 · 4002 阅读 · 0 评论 -
nodejs项目的轻量级数据持久化方案,node-json-db,直接使用json文件保存,查询数据。
借助本地文件系统来进行数据存储,降低技术成本和学习成本,快速实现业务场景。原创 2023-04-20 07:45:00 · 4079 阅读 · 0 评论 -
近期遇到的vscode 插件开发的问题,when表达式,正则匹配路径
解决vscode升级后,插件when条件语句的问题,并解释插件在不同平台下的变量值的差异。原创 2023-04-19 07:45:00 · 3667 阅读 · 0 评论 -
VS Code 插件开发概览
VS Code作为开发者的代码开发利器,越来越受开发者的喜爱。像我身边的前端,每天80%的开发工作都是在VS Code上完成的。随着人们对它的使用,不再满足简单的优雅,舒服写代码这一基本需求。有些人利用它进行摸鱼,看小说,查股票,看文章,下五子棋。当你在VS Code的插件市场输入摸鱼二个字时,会有20多个插件供你选择。本篇文章就来概述一下 VS Code的能力,并帮你快速建立插件文档的索引。原创 2023-04-17 07:00:00 · 10087 阅读 · 0 评论 -
修复开源VS Code 插件Trino Driver的三个小问题
最近产品中使用到一款SQLTools的VS Code插件。该插件可以在VS Code中实现数据库管理,而且支持非常多的数据源类型,官方的数据源类型有CockroachDB,MariaDB,MySQL,PostgreSQL,SQLite,Microsoft SQL Server/Azure ,另外还有很多社区的数据源驱动。而我们使用管理的数据源类型是Trino,图标是一个小兔子。使用到的组件是但在使用这个插件时,存在两个问题。原创 2023-04-12 07:00:00 · 3892 阅读 · 2 评论 -
复杂布局结构vue组件,树形组件集成表格组件,每个节点代表一行
本篇文章介绍一种比较复杂的排版方式,是一种树形组件集成了表格组件,树的每一个节点都具有一行配置。对比产品页面如下:看个这个页面,我们首先想到的是,一个树组件,和一个表格组件。如果要把右侧当成表格组件坐起来是比较复制的。因为涉及到树节点的折叠,对应的行也要折叠。所以最简单的办法是,模拟右侧的表格,将每一行写到树节点中。这样,折叠节点时,对应的行也相应被折叠。顶部的表头是一个单独的div实现,向右偏移。左侧的树使用element-plus的树组件来展示。每一个节点应该使用插槽来写,这样可以单独处理很多原创 2023-03-27 07:30:00 · 3835 阅读 · 0 评论 -
Monaco Editor 教程(二五):使用FindMatchs搜索结果批量增加代码注释
之前的文章中和大家介绍了如何为代码中的某个关键词,方法名,变量名增加Marker,之前的介绍的是,知道固定某个词的位置,直接增加marker即可,但如果我们不知道某个词的位置。这种情况下,我们可以通使用findMatch来查找对应的词,获取每个结果的位置后,再增加mark。下面实现一下通过查找某一个词,来批量增加marker。原创 2023-03-06 08:00:00 · 3836 阅读 · 0 评论 -
在vite vue3 前端架构中,切换环境,切换项目的架构设计方案
最近在项目中遇到了这样一个问题,在我们的系统中,有一个项目的概念,用户可以创建多个项目,每个项目中又有多个环境, 当用户点击项目名称后,会进入一个项目的内页,左侧菜单栏会有切换环境的功能。这个方案的有好处也有坏处,好处时,每个页面都可以在切换环境后 做单独的页面逻辑处理,对于公用的数据,即不依赖环境的接口数据,不需要重新加载。那么在切换一个项目的环境后,要求停留在当前的页面,并获取当前环境下的文章,用户,角色,等数据。我的同事的方案是,切换环境时,先跳转到一个空的页面,在该页面进行重定向。原创 2023-02-23 08:00:00 · 10241 阅读 · 0 评论 -
Monaco Editor教程(二一):在编辑器中实现 点击backspace 删除整个单词 删除块单词
在最近的一次前端周会上,组内一个同事分享了项目里使用monaco做的一个对比功能,在编辑器如何实现点击删除键,删除当前光标前或附近的完整的单词?具体场景是,在使用自动完成时,有一些单词是自动完成的,如果在插入这个备选项后,点击删除键,就是Backspace键,能够将这个备选项完整删除,而不是只删除一个字符。举个例子, 当我在编辑器中打出co时,待选项出现了一个console,这个是我选择它,并将它插入到编辑器中。这个时候光标时在单词e后面。原创 2023-02-06 16:05:00 · 3686 阅读 · 0 评论 -
有关Monaco的使用疑惑
学习monaoc中的一些疑惑,以及解开的疑惑。原创 2022-12-15 15:34:08 · 3675 阅读 · 0 评论 -
原生JavaScript实现日志搜索高亮的解决方案
最近在做一个日志管理的功能,其中有一个功能是这样的,在一个页面上会显示千上万条日志,需要做一个搜索的功能,并能将搜索结果一一显示在视口中,通过控制滚动条。这里使用html+原生js实现了一个简单的demo,核心步骤都是已实现。这里稍作一下记录。主要技术点是,获取装载所有日志的容器的innerHTML,然后使用js的replace搭配正则表达式,对内容进行搜索替换。搜索替换的核心代码logHtml变量 日志容器的innerHTMLreg变量 要搜索的关键词正则表达式searchNum变量 用来存放原创 2022-12-06 08:00:00 · 3706 阅读 · 1 评论 -
Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频
在monaco编辑器中,于特定位置插入自定义的dom元素。包括图片,表格,表单,视频。原创 2022-11-30 16:29:10 · 3854 阅读 · 5 评论 -
Monaco Editor教程(十九):编辑器自动完成建议项CompletionItem的配置详解
详细讲解monaco editor中的自动补全配置,所有配置参数,completionitem参数详细解释。自定义自动完成规则。提升编辑用户体验。交互能力。原创 2022-11-28 08:00:00 · 3972 阅读 · 21 评论 -
Monaco Editor教程(十八):使用api来完成某些键盘操作,格式化,查找,显示右侧菜单等。
在monaco中使用api来完成某些键盘操作,格式化,查找,显示右侧菜单等。原创 2022-11-24 08:00:00 · 3925 阅读 · 7 评论 -
使用element-ui实现树形穿梭框
使用element实现一个树形穿梭框。原创 2022-11-21 15:05:41 · 5837 阅读 · 7 评论 -
Monaco Editor教程(十七):代码信息指示器CodeLens配置详解
今天我们又学到了一种在编辑器中 添加辅助备注信息的方式。不用于之前介绍的Mark,codelens是占用编辑器虚拟行,却不是文件内容。原创 2022-11-21 08:00:00 · 3761 阅读 · 2 评论 -
Monaco Editor教程(十六):缩略图minimap的配置详解
详细解析monaco中minimap的详细配置。在大文件和表现文件结构有很好的用处。原创 2022-11-17 08:00:00 · 3843 阅读 · 0 评论 -
Monaco Editor教程(十五):createModel时使用Uri来自动匹配文件内容对应的源码模型。
前面我们已经讲解过,如果要将一个文件内容显示到monaco编辑器中,必须要创建一个model,这个model就是语言模型。它可以使用官方的编程语言规则,自动地为为我们分层,着色。我们之前是这样用的。第一个参数是要显示的文本内容,二个参数是编程语言, 如’python’,‘javascript’,‘java’,‘sql’。由于文件的扩展名是多种多样的,如在一个Git仓库中,有一个’index.vue’文件,那么我们该使用哪个语言模型来渲染那? 用javascript,还是html?再比如’index.js原创 2022-11-09 08:00:00 · 3715 阅读 · 0 评论 -
Monaco Editor教程(十四):monaco中的位置区间Range类型的详细解释
在了解了monaco中有关位置Position的定义后,大家都是知道每一个Position都指向monaco中的一个行列,这对于定位是很基础的功能,如果我们要一个编辑器中单词的位置,Position就不太好描述了,因为每个单词都会有一个起始Position与一个结束Position。那么这个时候我们就可以使用Range来描述一个编辑器中一段位置。在Range中开始行列必须小于等于结束行列。Range相关的一共有二个定义,一个是单纯描述Range属性的接口IRange和类Range。原创 2022-11-07 08:00:00 · 3694 阅读 · 0 评论 -
Monaco Editor教程(十三):在指定位置插入或替换文本
这表明我们可以在调用这个方法时可以一次完成多次操作,可以执行多次插入和替换。第二个参数computeUndoEdits 是用于是否将本次的操作添加到编辑器的操作栈中,如果为true,那么久可以实现撤销的动作。编辑器底层的搜索替换也是在指定位置替换文本。在编辑器中,开发者有时需要在指定位置添加或替换一些文本,比如在文件头部添加版权说明,在文件末尾增加一些辅助信息,applyEdits方法有二个参数,第一个是operations, 它的类型是。'// @拿我格子衫来''// @拿我格子衫来'原创 2022-11-04 08:00:00 · 3957 阅读 · 0 评论 -
Monaco Editor教程(十二):使用Marker来增加分词注释,标记,优化编辑器交互体验
在编辑器中有很多交互,其中一种交互就是当鼠标放到一个class上,显示该类的定义,该类的行数,注释,这在monaco中很常见,有时这个class并不是在当前文件定义的,而是在其他未打开的文件中定义的。如下图鼠标放到insertSpaces 上,会显示该属性的上传路径,类型定义,以及备注。上面这个是一个使用自定义Marker设置的分词备注。对于一个较大的项目来说,在使用类,方法,参数时,这些注释能够极大地帮助开发者,排查错误,准确调用方法,参数定义。这种分词注释的适用场景有很多,其中一个场景时,在原创 2022-11-04 08:00:00 · 3828 阅读 · 0 评论