- 博客(38)
- 收藏
- 关注
RSS订阅
原创 Web工作流（流程图）设计器的方案研究及功能实现之bpmn-js简易教程
前言本文以2020年10月为时间节点，功能早就做了，但文章一直没有写研究过程根据项目需求，需要实现一个工作流/流程图设计器，并且可配置流转、活动节点、流程的各项属性，也是研究了多个方案自研方案使用svg方案（使用 svg.js库）来实现流程图的绘制，图形的拖拽、旋转、缩放、属性面板基本都实现了，但是无法解决连接线绘制的功能，后面尝试使用d3和jsplumb库来解决连接线的绘制，效果不是很好，研发时间给的不够、人手也不够，最后就放弃了svg.js+d3.jssvg.js+jsplumb.js
2022-05-17 16:13:25
17305
9
原创 记一次web中对svg图形拖动和缩放卡顿的性能优化(基于svg.js) - viewbox vs transform
前言在web中对svg图形的操作，我使用svg.js库挺久的了，对svg图形的拖动缩放我一直用的衍生插件svg.panzoom.jssvg.panzoom库对svg拖拽缩放的实现是对viewBox的设置来进行缩放的，至于使用viewBox来缩放、拖拽的原理，建议各位百度了解一下，不细说了（以后有空可以讲解一下）最近使用这个库拖拽svg发现了一个比较严重的性能问题（其实之前一个项目就发现了，不过当时没有这么卡顿且需求是只用同时预览一张图即可），对性能没有太大要求，便没有多管，现在这个项目是多tab页
2022-03-11 17:46:09
8285
14
原创 在Web中使用jsmpeg.js低时延播放RTSP视频流（海康、大华）方案 - vue-jsmpeg-player
前言web播放实时视频流的几种方案对比，详见此处jsmpeg项目地址：gitee、githubMIT开源协议此方案架构大致如下：jsmpeg比较重要的两个技术点：webgl、wasm，只需大致了解即可，若不对这两个模块进行二次开发，则无需深究1 安装与介绍1.1 安装npm 安装(这样无法二次开发)npm install jsmpeg -s二次开发方法（本文章介绍） 把jsmpeg.min.js拖入项目目录下，建议将此js文件
2021-11-05 12:06:54
44872
65
原创 在Web网页播放网络摄像机（海康、大华等）RTSP视频流方案汇总
0 前言前端采用vue框架测试仅在Windows10下测试EasyPlayer.js的使用教程请看这里1 自行开发方案1.1 Rtmp方案方案描述：ffmpeg 将rtsp视频流转为rtmp视频流，通过nginx代理，web接入rtmp协议播放，需要flash支持后端：ffmpeg + nginx + nginx-rtmp-moduleffmpeg命令[仅供参考！！！]：ffmpeg -buffer_size 4096000 -rtsp_transport tcp -i rts
2021-09-15 13:55:08
31135
9
原创 Vue中使用leaflet地图框架学习记录
前言项目开始使用的是高德地图组件，不过为了兼容离线地图，那高德地图就用不了了，老大叫我去学习leaflet，只能硬着头皮上了。关于高德地图的一些学习记录，点这里
2020-07-29 14:25:30
9539
25
原创 远程唤醒电脑WOL（Wake On LAN - 局域网唤醒）
还有一种办法就是到windows的网卡设备中，设置固定IP，不过还是建议用上一个方法，毕竟这个办法不一定所有终端设备的系统都支持。具体方案请看我贴的几篇参考文档，我没弄互联网唤醒了，嫌麻烦。到你终端设备的上级路由（有可能是直连光猫）的管理页面。参考链接(按我的教程没弄成功的可以看看)
2020-07-12 21:34:04
82790
56
原创 vue-cli4升级到vue-cli5的踩坑记录
可能是由于vue-cli5升级了css-loader导致的问题。修改vue.config.js配置文件的css配置。在样式文件中使用静态资源路径导致编译无法通过。
2023-07-31 17:47:20
882
原创 Windows10/11无法查看历史访问的解决方法
windows11在快速访问中无法看到任何的历史访问记录并且无法勾选此选项浏览器，vscode右击任务栏图标也无法看到历史记录。
2023-05-07 21:20:36
2315
1
原创 uniapp的一些踩坑记录
经排查是由于vite版本过高的问题，运行官方提供的命令npx @dcloudio/uvm后，vite版本降为3.x、esbuild+esbuild-windows-64为0.15.8，问题解决，真的是血坑。通过官方的命令创建的vue3+vite+ts项目，vscode中使用命令运行正常，在hbuildx内运行报错（因为真机运行只能用hbuildx）搜了很多文档，才知道此错误的意思是esbuild与esbuild-windows-64版本对不上(此时vite版本为4.0.2)
2023-02-14 09:18:45
1296
原创 在vue中实现在线代码编辑器(lua) - ace/codemirror/monaco-editor
支持lua语法高亮简易的语法提示(根据当前代码中的关键字)可以按需导入功能与模块不支持lua代码校验不支持lua代码格式化lua语法提示不满足需求没有全量导入功能，当导入大量模块和功能时，需要写很多import，不方便管理...支持lua语法高亮支持lua代码校验支持lua代码块折叠基础语法提示，提供部分代码片段可以按需导入功能与模块不支持lua代码格式化引入的模块，打包后会在根目录下产生很多js文件推荐使用@appguru/luafmt，或者基于。
2022-10-18 10:52:39
17770
9
原创 html中为css、js、配置文件等静态资源加上时间戳，防止浏览器缓存
使用document.write可以阻塞当前的加载，直到write中的标签加载成功，可防止配置文件未被加载但已经进入主页面了。nginx使用 add_header Cache-Control no-store;但实际上mdn已经不建议使用document.write方法了，会导致一些性能问题。但这么做的话部署的时候会多一个修改nginx配置文件的步骤。
2022-10-10 14:02:15
4868
原创 安装node-sass@4.x版本的一些问题以及解决方法（python版本与vs编译器 ）
解决方法node-sass@4.x只能用python2编译，先下载python2.7，并添加到环境变量中如果已经安装了python3.x，想要共存的话，把python2.7文件夹下的Python.exe改为python2.exe还有一种方式就是直接配置npm最后运行npm i解决方法管理员方式打开cmd，运行以下命令，并等待安装完毕运行以下cmd后重新npm i
2022-06-01 11:20:58
2029
原创 JavaScript中使用JSDoc(@template)实现可变类型推断（ts泛型）
解决方案使用@template关键字/** * @template {keyof WindowEventMap} T * @param {T} name * @param {(this:Window, ev: WindowEventMap[T]) => void} value */function test(name, value) { serviceApis[name] = value}test('mousedown', (ev) => {})效果如下：
2022-05-13 12:07:06
3460
原创 vue项目中使用字体图标（iconfont）
前言element-ui中的字体图标非常好用，那么如何在项目中使用自定义字体图标呢步骤进入iconfont官网，登录/注册一个账号；搜索你想要的图标，并且加入到购物车；顶部的购物车图标会显示当前库存数量，已入库的图标会显示虚线边框；点击顶部购物车图标，在点击添加到项目；如果还没有创建过项目，可以点击“+"按钮新增；添加到项目后，进入项目详情；一般选择font class模式，图标下方显示图标的font class名称；进入项目设置，修改字
2022-05-10 11:13:27
2357
原创 mysql性能调优之配置文件优化
调优背景最近在项目并发测试过程中发现mysql几乎占满了cpu：20并发，循环调用4个接口，其中一个接口存在inner join连表查询，连表中其中有一个表数据量在20万条左右20并发运行后，mysql几乎占满了CPU，在mysql workbench中，调用sql只有0.6s左右分析后发现，由于调用的同一个接口，并且查询参数没有改变，查出来的结果也基本是一样的所以开启缓存后效果很好优化结果优化前，CPU基本上被占满优化后，几乎不占CPU配置文件[client]port=330
2022-04-24 08:53:10
1722
1
原创 npm安装报错找不到python、c++等：npm ERR! gyp
问题描述运行npm i 安装依赖包时，npm报错：npm ERR! gyp info using node-gyp08.4.1npm ERR! gyp info using node@16.14.2 I win32 |×64npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration npm ERR! gyp ERR! find
2022-04-24 08:39:21
6769
原创 CSS - :not()选择器在低版本浏览器中不生效
在使用:not选择器时，发现在低版本谷歌不生效（绿色版谷歌73.0.xxxxx），css如下.uiot-container,.uiot-container--row { display: flex; position: relative; > * { box-sizing: border-box; } &:not(.uiot-aside, .uiot-main, .uiot-header, .uiot-footer, .uiot-overlayers) {
2022-02-24 16:15:57
1305
原创 yarn报错: 文件名、目录名或卷标语法不正确
前情摘要：用 npm 装的全局 yarn自定义配置了 npm 的全局安装位置和缓存用yarn创建vite-vue项目时，运行项目报错【文件名、目录名或卷标语法不正确】原因分析：分别运行：yarn global binyarn global dir如果显示的不是同一个文件夹，那就要重新配置一下解决方法设置yarn全局文件夹：yarn config set global-folder "D\yarn\global"设置yarn缓存文件夹：yarn config set cac
2022-01-20 09:38:33
1631
原创 电脑睡眠、休眠后，电脑卡顿，CPU主频变得很低的解决方法
问题描述公司电脑休眠后再启动，偶尔会出现电脑特别卡顿的情况，查看任务管理器发现，CPU主频只有0.57Ghz左右（忘记截图了，下次有机会补上）解决方法进入电源选项界面方式一：设置-系统-电源与睡眠（需要最大化窗口才可以看见“其他电源设置”按钮）方式二：直接搜索电源首先切换到节能模式，之前再切换到高性能模式，CPU主频恢复正常...
2022-01-07 09:04:30
24255
1
原创 Microsoft Edge (92.0.902.55 ) 打印(window.print) 卡死/无响应
版本号： 92.0.902.55 ，如下图所示。看到此文章最近请勿更新Edge，我还以为我代码又出啥问题了，结果是浏览器的bug不过微软嘛，懂得都懂
2021-07-28 17:22:19
8633
5
原创 vue打包编译时报错 Error: EPERM: operation not permitted, lstat...
原因很简单，dist文件夹或者子文件夹、文件被其他应用占用了解决办法解除文件、文件夹占用，这里推荐一个应用：LockHunter这个软件很好用，极力推荐
2021-07-27 14:06:19
2757
原创 el-form报错：Invalid handler for event “input“: got undefined
在jsx中渲染el-form会报错误：Invalid handler for event “input”: got undefined代码如下： let form = (<el-form class="form-container" label-width="auto" size="mini" label-position="top" model={this.elProps} {tab.groups.
2021-07-26 15:08:55
3033
原创 vue中使用EasyPlayer.js教程
0 前言github: EasyPlayer.js一定要是legacy分支哦，master分支是EasyWasmPlayer.js，有些功能不支持的1 教程首先npm安装EasyPlayer、copy-webpack-pluginps：copy-webpack-plugin版本不能大于6.0，否则会出很多很多问题 npm install @easydarwin/easyplayer --save npm install copy-webpack-plugin@5.1.2 --save
2021-05-27 11:53:22
15965
28
原创 vue-router中多个路由引用同一异步组件的解决方案
得益于vue-router对异步组件的支持，我们在异步import的then回调中修改组件的name，这样每个组件实例就有唯一的缓存键值，正常被缓存、销毁，并且路由名称也不会冲突了。当你想使用路由name跳转到其中一个路由时，由于三个路由重名了，可能会导致不是预期的结果。路由重名vue-router会报警告。效果和方案1一样，只是路由不用重名了。
2021-05-26 11:27:46
4850
22
原创 vscode插件vetur代码提示失效的解决方法
[Error - 下午5:43:01] Request textDocument/completion failed. Message: Request textDocument/completion failed with message: Cannot read property 'length' of undefined Code: -32603
2021-05-26 10:44:15
5371
原创 vscode使用prettier格式化代码不起作用、配置不生效的解决方法
问题描述在某一次更新prettier插件后，发现格式化不起作用了，在vscode用户配置中怎么设置都没有效果解决方法由于prettier插件优先使用项目根目录下的editorconfig配置文件，所以在vscode中怎么配置有没有用，如下图进入插件配置界面取消Use Editor Config的复选框，这样就不会优先使用editorconfig配置文件了你可以在项目根目录创建一个.prettierrc.js配置文件，prettier会自动检测到，也可以手动配置也可以使用vscode
2021-04-02 09:58:45
65773
17
原创 element-ui对el-table组件进行二次封装，并进行功能扩展
扩展功能：1. 实现使用Ctrl/Shift+鼠标左键不连续/连续多选，并支持批量勾选（具体看handleRowClick）Ctrl+鼠标左键（不连续选择）：使用变量缓存当前选中行集合，el-table绑定row-class-name函数，判断目标行是否被选中，选中则添加自定义类名监听row-click事件，事件触发时判断Ctrl键是否按下，若按下，则将此行添加到选中行集合Shift+鼠标左键（连续选择）：思路同上，过判断的keyCode不一样row-click事件中需要分别计算当前行和点击
2021-03-11 10:57:01
1855
原创 使用xlsx.js导出为excel，并实现自适应列宽
使用的js库：xlsx.js思路：计算每一列所有单元格的文本长度(包括列头)，取最大值作为列宽代码：getCellWidth为核心方法，用于计算单元格宽度的如果包含中文，则宽度为：文本长度2.1，否则为：文本长度1.1，这个是我多次测试得到的数值可以在此方法增加其他规则function getCellWidth(value) { // 判断是否为null或undefined if (value == null) { return 10 } else if (/.*[\u4e
2021-03-11 09:33:18
15214
13
原创 Windows10 安装.net framework 3.5时报错：0x80240438
错误原因： 由于windows系统加了域而导致的解决办法:打开注册表：win+r 输入regedit，确定；找到路径HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\WindowsUpdate\AU，其中UseWUServer默认值为1，改成0；参考连接：WIN10环境安装.NET Framework 3.5 报错0x80240438 的解决办法win10 解决.net framework 3.5 (安装报错 0x8024
2021-02-19 16:32:45
6854
原创 element-ui中隐藏组件el-scrollbar的使用
一、使用虽然官网没有介绍该组件，但是网上有许多小伙伴扒了源码并提供了使用方法<el-scrollbar class="" view-class="" wrap-class="" tag=""></el-scrollbar>属性props: { native: Boolean, // 是否使用本原生滚动条，设为true则不会启用element-ui自定义的滚动条 w
2020-08-26 10:19:06
7685
1
原创 css修改浏览器原生滚动条样式
浏览器的自带滚动条确实很难看，虽然可以重载css样式，但由于各个浏览器并不互相兼容，那么就要写多个样式并且不能保证外观统一（火狐貌似无法修改滚动条样式的），如下// IE浏览器* { //三角箭头的颜色 scrollbar-arrow-color: #c0c4cc; //滚动条滑块按钮的颜色*/ scrollbar-face-color: #a2a2a3; //滚动条整体颜色*/ scrollbar-highlight-color: #a2a2a3; //滚动条阴影*/
2020-08-26 08:49:52
682
原创 css之input的placeholder样式在各浏览器中保持一致
在使用element-ui时，发现Chrome浏览器与Firefox浏览器对input的placeholder渲染颜色不一致，如下图谷歌火狐火狐中透明度明显更高我的解决方法$placeholderColor: #c0c4cc;// input的placeholder样式input { &::-webkit-input-placeholder { // WebKit, Blink, Edge color: $placeholderColor !important;
2020-06-16 15:18:37
380
原创 Vue项目部署到Tomcat踩坑记录
java和tomcat安装步骤就不说了，贴两个链接，讲的灰常详细Java环境安装Tomcat安装我这里用的是VsCode，直接就:npm run build:prod这样就是build的成功了接下来到你项目根目录的dist文件夹在Tomcat的webapps文件夹里新建一个文件夹，名字随意，我这里是uiot，但是这个名字后面会用到，要注意复制完了，运...
2020-03-23 14:38:51
1800
原创 Vue中使用高德地图的学习记录
废话不多说，直接开始参考: https://blog.csdn.net/qq_39512863/article/details/90483781
2020-03-06 17:30:14
3371
4
转载 C# 一些文件/文件夹操作
Markdown编辑器教程Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，...
2018-12-29 19:32:13
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人