Vue+Go.js实现拖拽流程图
前言 最近开发遇到一个需求，需要实现一个流程图编辑器，使用vue+go.js实现。是依赖画布canvas相关技术实现的。需要花费大量时间去熟悉go.js相关技术，研究几天发现vue+go.js实现起来非常简单，而且vue的组件化思想也非常适合流程图编辑器的开发。 官方案例 vue+go.js实现流程图编辑器，可以参考官方的案例：https://gojs.net.cn/samples/flowchart.html 实现步骤 画布初始化 1234<!-- 左边流程图 --> <div class="palette-box" id="myPaletteDiv"></div> <!-- 流程图制作区域 --> <div class="chart-box" id="myDiagramDiv"></div> 初始化流程面板 12345678910111213//初始化流程图面板that.myDiagram = $( go.Diagram ...
怪咖3D机器人可视化
怪咖3D机器人可视化 前言 最近，我在学习Three.js，做了一个3D机器人可视化的项目，想到之前做过Echarts的可视化项目，于是想着把这两个项目结合起来，做一个更加炫酷的可视化项目。 介绍 怪咖3D机器人可视化，基于Vue3 + Echarts + three.js + Tailwind CSS 实现，主要功能有： 3D模型展示 轨迹跟踪 机器人控制 反馈数据统计 期望工作地址统计 工作经验统计 热门词云图 云端风险监控 演示 演示地址：https://www.wbdqc.top 效果图：
npm 淘宝镜像
最近安装依赖包的时候，出现报错 1npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason: certificate has expired 原因： 查阅后发现，淘宝 npm 镜像的证书到期了，导致 npm 安装依赖包失败。 早在 2021 年，淘宝就发文称，npm 淘宝镜像已经从 http://registry.npm.taobao.org 切换到了 http://registry.npmmirror.com。旧域名也将于 2022 年 5 月 31 日停止服务（直到 HTTPS 证书到期才真正不能用了） 2024年1 月 22 日，淘宝原镜像域名（http://registry.npm.taobao.org）的 HTTPS 证书正式到期，导致旧的 npm 淘宝镜像在使用时出错了。 解决方案 清空 npm 缓存： 1npm cache clean --force 查看当前 npm 源： 1npm config get registry ...
Javascript中Object类的静态方法
Javascript中Object类的静态方法总结 Object类中有一些静态方法，这些方法可以直接通过类名来调用，而不需要实例化对象。 Object.assign(target,...sources)：将多个源对象复制到目标对象，并返回目标对象。 Object.create(proto, propertiesObject)：创建一个新对象，并设置其原型对象和属性。 Object.defineProperties(obj, props)：定义一个对象obj的属性，并返回obj。 Object.defineProperty(obj, prop, descriptor)：定义一个对象obj的属性，并返回obj。 Object.entries(obj)：返回一个数组，包含对象obj的所有可枚举的自身属性的键值对。 Object.freeze(obj)：冻结对象。 Object.fromEntries(iterable)：创建一个新对象，并将可迭代对象iterable中的键值对添加到新对象中。 Object.getOwnPropertyDescriptor(o ...
Git SSH Key生成
Git SSH Key生成 SSH Key是一种加密的公钥私钥对，用于身份验证。 使用Git通过SSH拉取远程仓库时，出现以下内容： 12345678$ git clone git@******.com:********.gitCloning into 'gk_vblog'...git@******.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists. 这是因为Git需要SSH Key来验证身份，而你没有配置SSH Key。 首先，检查是否已有SSH Key。 12345ls -al ~/.ssh// or cd ~/.sshls 如果存在id_rsa.pub文件，则说明已有SSH Key。 如果没有SSH Key，则生成SSH Key。 1234567891011121314151617181920 ...
微信小程序内嵌H5页面中点击按钮如何跳转到其他小程序
业务需求 微信小程序中内内嵌的H5界面，需要通过点击按钮来实现跳转到其他小程序。想通过web-view来实现直接跳转，结果失败了（难道就实现不了了吗？）。 查阅了微信官方的文档，也没有给出具体解决方法，只有小程序跳转其他小程序的相关api，于是突发奇想，能否让嵌入的H5界面跳转到当前小程序页面，然后不就是小程序跳转小程序了吗，感觉可行，就尝试了一波。 解决方案 小程序中内嵌的H5页面通过点击之后需要跳转至目标小程序，首先需要跳转到内嵌的小程序界面，然后使用微信apiwx.navigateToMiniProgram()’实现跳转目标小程序，达到用户可以从内嵌的H5页面中跳转到目标小程序的目的。 实现方法 1.在H5页面中处理好需要传递的参数 12// pages/wx/wx 当前小程序页面let url = `/pages/wx/wx?appid=${appid}&path=${encodeURIComponent(path)}` 2.调用wx.miniProgram.navigateTo()方法跳转至当前嵌入的小程序界面，携带跳转小程序所 ...
使用volta来实现node版本切换
使用volta来实现node版本切换 上一篇文章（文章地址）提到高版本node启动老项目需要借助SET NODE_OPTIONS=--openssl-legacy-provider &&命令（有时候可能需要卸载node，再安装）。 今天我找到一个更实用的方法，那就是Volta，它可以根据项目要求来指定所需的node版本。 安装及使用方法 官网地址：volta官网地址 找到Windows安装版本，下载完成后进行安装，一直next即可 全局安装不同版本的node 打开任意目录下 cmd运行 1234//20volta install node@20//16volta install node@16 安装好node版本之后可根据项目要求自行切换node版本了 12volta pin node@16.20.2//查看 node -v 在要运行的根目录下运行volta pin node@16.20.2,会在项目的package.json中添加,然后就可以使用命令启动项目了。 123"volta": { "n ...
uniapp微信小程序中嵌入H5页面，调试信息查看
需求 最近开发时遇到这么一个需求，使用uniapp开发H5界面，并通过webview嵌入小程序中使用。 出现的问题 在调试过程中发现嵌入的H5界面打印信息不显示，在浏览器中打印正常显示。当时就很纳闷，以为是编译器出问题（最近重新安装过编译器），查阅资料后发现，编译器有针对webview的调试功能。于是出篇文章记录一下。 解决办法 在微信开发者工具模拟器的右下角有个调试图标（像爬虫）。 运行项目后点击图标，会出现一个DevTools的窗口。 点击 Console,就能查看嵌入的H5界面的打印信息了。
uniapp H5页面判断所在环境：微信小程序、微信浏览器、外部浏览器
uniapp H5 页面判断所在环境：微信小程序、微信浏览器、外部浏览器 开发过程中难免会遇到需要判断单前页面所处的运行环境,那么我们应该如何来实现呢？ 需求是这样的：uniapp 开发的 H5 界面需要嵌入微信小程序，安卓 app 中，其中有部分功能是在 app 中显示，小程序中不显示。经过一番摸索之后，我也找到解决办法，再此备忘一下。 解决方法 借助微信提供的sd k 获取浏览器信息 判断方法 12345678910111213141516171819202122232425安装sdk:npm install weixin-js-sdk引入sdk:let wxSdk = require('weixin-js-sdk');判断方法：function getENVIR () { let wxSdk = require('weixin-js-sdk'); let text = '' let ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMess ...
js防抖、节流
JavaScript实现防抖、节流 在开发过程中往往会遇到这类需求，某些界面或按钮在弱网情况下点击没有反应，用户就会疯狂的点击，后台就源源不断的向服务器发送请求，用户体验贼差。 为了解决在这一问题，就会想到能不能在一定时间内无论用户点击多少次，只触发一次请求。 这时就会考虑到节流和防抖，那么什么是节流和防抖呢，怎么来实现? 防抖：单位时间内，频繁触发事件，只执行最后一次 思路：利用定时器，每次触发先清除定时器 1234567891011121314151617function debounce(fn, wait) { var timer = null; return function () { var context = this; args = [...arguments]; // 如果此时存在定时器的话，则取消之前定时器重新计时 if (timer) { clearTimeout(timer); timer = null; } // 设置定时器，使事件间隔指定时间后执行； ...