- 博客(94)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 使用 new EventSource 实现前端实时通信
EventSource 是浏览器提供的一种实现服务器推送（Server-Sent Events，简称 SSE）功能的 API。它是基于 HTTP 协议的单向通信机制，可以通过服务器将实时数据推送到客户端，而不需要客户端不断发起请求。EventSource 是通过 new EventSource(url) 创建的，参数 url 是服务器端提供的推送数据的接口。在服务器端，我们需要将数据按 text/event-stream 的格式发送给客户端，通常使用一种流式的方式将数据传输给浏览器。
2025-04-08 15:18:09
698
原创 vue3.x 使用jsplumb进行多列拖拽连线
最近很多小伙伴问到使用jsplumb进行多列拖拽连线怎么实现？安装 npm install --save jsplumb引入</script>使用<template><h3>jsplumb使用 ( 多列 )</h3></div></div></div></div>//jsplumb使用// 缓存实例化的jsplumb对象]);{ name: '数据2-1', nodeId: 'data2-1' },{ name: '数据2-2', nodeId: 'data2-2' },
2024-03-19 09:55:44
1532
原创 Vue3 循环生成的动态组件component定义并传值
元素，并通过 is 特性绑定一个组件的名称或组件对象。通过在父组件中改变 is 特性的值，可以动态切换渲染的组件。在 Vue 中使用动态组件，可以使用。例子2： v-for循环动态组件渲染。例子1： 单组件渲染。
2023-12-20 10:57:42
3489
1
原创 Vue3 + ts+ elementUi 实现后台数据渲染到下拉框选项中，滑动加载更多数据效果
功能需求：下拉框中分页加载后端接口返回的人员数据，实现滑动加载更多数据效果，并且可以手动搜索定位数据，此项目使用Vue3 + ts+ elementUi 实现。
2023-11-10 10:18:00
2387
原创 vue3 + axios 中断取消接口请求
弹窗中接口请求返回图片，用于前端展示，接口还没返回数据，此时关闭弹窗，需要中断接口请求tab标签页根据后端返回数据，依次渲染，频繁切换标签，需要中断接口请求for循环中请求接口，遇到跳出循环情况，也需要中断接口请求跳转路由，离开页面时，可能也需要中断接口请求下面就是根据以上问题，找到的解决方案。
2023-10-20 10:04:23
4265
5
原创 前端本地存储方案-localForage-vue3中使用
localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储（IndexedDB 或 WebSQL）和简单的类 localStorage 的 API ，localForage 能改善 Web 应用的离线体验。在不支持 IndexedDB 或 WebSQL 的浏览器中，localForage 使用 localStorage
2023-10-10 15:39:32
5193
1
原创 vue3飞书扫码登录网页
为了实现网页接入飞书授权登录工作，将飞书登录的二维码嵌入到网页中。当用户扫码成功后会返回 tmp_code，即可用来完成后续的授权登录流程。
2023-10-08 09:21:22
3240
5
原创 gitlab 拉取pull代码报错：update_ref failed for ref ‘ORIG_HEAD‘: cannot lock ref ‘ORIG_HEAD‘
在使用gitlab拉取代码时候，提示如下报错信息：update_ref failed for ref 'ORIG_HEAD': cannot lock ref 'ORIG_HEAD': unable to resolve reference 'ORIG_HEAD': reference broken
2023-09-15 09:13:19
1198
原创 gitlab克隆报错 remote: The project you were looking for could not be found or you don‘t have permission
执行命令：git clone https://gitlab.com/xxx/xxx.git报错信息：remote: The project you were looking for could not be found or you don’t have permissionfatal: repository ‘https://gitlab.com/xxx/xxx.git/’ not found或者是http地址不能克隆，ssh地址可以克隆
2023-08-23 17:30:31
1291
原创 vue3 Hooks 封装loading使用
之前不理解Hooks和自定义封装的utils函数有什么区别，它们都是函数，逐步理解到utils函数没有vue里面的响应式api，而自定义Hooks可以使用响应式api，比如：ref、reactive、onMounted等等。loading大家都不陌生，在项目请求接口时需要显示loading加载提示用户正在请求中的操作，在加载完成隐藏loading，显示返回的数据。使用Hooks是为了让项目整体的开发代码质量更加高，开发功能更加便捷，效率更高。个人理解：Hooks 就是 钩子 的意思，在特定时机执行的函数。
2023-08-10 09:43:23
1164
原创 vue+elementui upload上传文件夹
功能需求：利用vue3+elementui里的upload组件，实现上传图片文件夹，需要限制图片格式为png,jpg等，且不需要深层遍历子文件夹，只上传第一层级的文件夹内容即可。比如下面图片举例： 只上传1.png, 2.png 不用深入上传“子文件夹”中的图片。实现思路： 利用webkitdirectory属性，实现上传文件夹功能
2023-05-08 16:49:47
2332
1
原创 vue 动态引入和移除第三方js 和 css文件
vue 动态引入和移除第三方js 和 css文件页面中经常会引入第三方库的情况，有些组件有vue版本，直接安装依赖引入就可以，但是有一些组件不支持vue，就需要单独在页面中引入js和css，如果直接全局在index.html中引入会造成资源浪费，下面是使用Vue3语言讲解如何局部引入和移除的代码示例：
2023-04-13 17:42:26
2757
原创 vue3.x + elementui-plus实现v-for动态循环生成ref后进行表单验证
vue3.x + elementui-plus实现v-for动态循环生成ref后进行表单验证本例子是根据vue3.x 和elementui的 多form表单进行表单验证，验证通过后再进行提交操作
2023-03-30 09:59:37
2270
原创 Windows下安装启动nginx.exe报错
问题1： 在安装使用nginx服务器时遇到最大的问题是windows下命令行输入start nginx后，或者双击nginx.exe，一闪而过，启动不了，怀疑是以下几个方面的问题，请做参考。问题2： 无法将“NGINX”项识别为 CMDLET、函数、脚本文件或可运行程序的名称......”
2023-02-17 15:03:37
4616
原创 Windows安装Nginx
Windows安装Nginx，Nginx是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。安装步骤：版本说明，下载地址，win+r 打开控制台启动，常用配置nginx，修改代理接口地址，访问项目，常用命令，安装启动报错问题解决方法
2023-02-17 14:36:42
1163
原创 vite+vue3 proxy配置代理服务器解决本地运行跨域问题
vite+vue3+axios proxy配置代理服务器解决本地运行跨域问题配置后，重新启动运行项目，就可以正常访问接口了需要注意的是：在打包后，部署后tomcat下，还是会跨域，所以想要彻底解决问题，还是需要后端接口代码加上跨域的相关配置
2023-02-16 11:18:03
9349
3
原创 vue3+ts import引入第三方js文件报错解决方法
执行 import XXX from ‘XXX.js’ 报错，The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准，不能按需导入。在所需的.vue文件里单独引入，最后在head标签里生成js和css，离开页面时移除。在index.html里利用script全局引入。
2023-02-06 15:26:46
9831
2
原创 前端JS实现启动本地.exe客户端程序
先要写入注册表，先注册URL PROTOCOL, 在windows 下就是注册表，保存内容为 reg文件（myprotocol.reg），然后执行，就加入注册表,注册了这个名字为myprotocol 的协议.使用文本新建.txt 写入以下内容，然后修改后缀名为.reg ，双击执行。使用url protocol 的方式来实现，亲测可行。
2023-01-18 09:16:30
2786
原创 vue3自定义指令，防止按钮多次点击执行操作
vue3自定义指令，防止按钮多次点击执行操作自定义节流操作在src下新建directive文件夹，新建index.ts文件
2022-11-15 17:30:43
1634
原创 vue3.x 子组件调用父组件方法并获取方法的返回值
vue3.x 父子组件通信是经常会遇到的父组件给子组件传参可以通过 props 来实现，父组件调用子组件方法和获取子组件数据 通过 xxxRef.value.子组件方法() 和 xxxRef.value.子组件数据 实现子组件调用父组件方法使用 emit 来实现祖孙组件传值和调用方法使用 provide / Inject 来实现今天介绍的是vue3.x子组件调用父组件方法并获取方法的返回值如何实现，正常首先会想到是方法里面勇return返回值，就能获取到，但是实际是行不通的，要使用callback
2022-11-08 16:55:12
5487
2
原创 VUE3祖孙组件传值调用方法
VUE3祖孙组件传值调用方法父子组件传参可以通过 *props* 和 *emit* 来实现，但是当组件的层次结构比较深时，*props* 和 *emit* 就太繁琐了。vue为了解决这个提出了 *provide / Inject*
2022-10-21 16:27:16
3860
原创 Windows下Apache2.4配置SSL（HTTPS）
Windows下Apache2.4配置SSL（HTTPS），配置openssl指令，配置环境变量，apache2.4配置SSL证书
2022-08-25 12:05:35
2347
原创 图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题
html中有图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题，也就是图片重影， 另外使用scale缩放图片时可能产生放大后图片模糊情况，文章也给出了解决方案
2022-08-22 09:55:32
1197
原创 vue3 axios统一添加响应拦截器
vue3 axios统一添加响应拦截器，针对接口返回值判断，如果返回未登录信息，直接跳转到登录页。在main.ts 或 main.js里加入代码。
2022-08-12 13:34:47
1662
原创 vue3 axios统一添加headers和单独接口添加headers
vue3 axios统一添加headers 和单独某一个接口添加headers的语法是不一样的，其中接口添加headers需要区分请求方式是GET还是POST,下面依次介绍3种情况
2022-07-21 16:56:11
19235
原创 vue+jsplumb 实现根据数据渲染出连线绘图
vue+jsplumb 实现根据数据渲染出连线绘图vue+jsplumb 实现连线绘图vue3.x 使用jsplumb进行拖拽连线jsplumb 点击节点或者连线高亮显示
2022-07-20 10:11:36
2255
4
原创 Vue3 实现图片滚轮缩放拖拽组件
采用Vue3的语法讲述如何实现在一定区域内用鼠标滚轮缩放图片以及在该区域内拖拽图片，在下面的应用里还会使用到父子组件传值，调用方法，以及compute计算，自定义指令等
2022-07-15 16:45:10
1684
原创 js将具有关系型的数组转成树形结构
以下的例子的利用from和to形成父子关系，当然也可以利用parentId等其他的父子关系，将将具有关系型的数组转成树形结构。reduce函数： 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。concat函数：用于合并两个或多个数组。
2022-04-29 16:27:49
633
原创 vue3 使用自定义指令，全局注册，局部注册
vue3 使用自定义指令，全局注册，局部注册，必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。局部注册自定义指令，实现输入框自动获取焦点;全局注册自定义指令，实现防止按钮连续重复点击事件（防抖）
2022-03-31 15:48:28
4328
原创 vue3 使用computed计算属性
vue3 使用computed计算属性demo1: 简单使用computed<template> <div :style="{'width': width}" style=" height: 100px;background: #0a0"></div></template><script lang="ts" setup> import {ref, reactive, computed} from 'vue' const
2022-03-31 15:07:58
1886
原创 VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放
VUE3 实现前台图片标注功能包括：鼠标左键拖动添加矩形框标记区域，鼠标点击已绘制的矩形； 选中矩形，并绘制不同选中效果； 鼠标在已绘制的矩形中按住左键拖动，选中并移动矩形；选中矩形后鼠标在选中矩形四个角按住拖动，可缩放矩形；选中矩形后点击键盘删除按键，可删除矩形；获取矩形框位置坐标大小；图片缩放功能、鼠标滚轮缩放
2022-03-23 15:42:39
7633
12
原创 vue3实现鼠标左键拖拽画矩形框框选功能
vue3 + eleemetuiPlus 实现鼠标左键拖拽画矩形框 框选列表功能，仿照桌面框选功能效果如图： vue3鼠标框选 代码：<template> <div class="box-img" @mousedown="handleMouseDown"> <div class="mask" v-show="positionLi
2022-03-22 13:35:23
6509
10
原创 Vue3 iframe引用本地文件以及根据内容调整iframe高度
Vue3 iframe引用本地文件以及根据内容调整iframe高度首先在public文件夹下新建文件夹static,将需要引入的html页面放入进去template写引入iframe <iframe src="static/word/index.html" id="testFrame" name="myiframe" frameborder="0" width="100%" scrolling="no" style="min-height: 500px;" ></iframe
2022-03-14 16:06:02
4967
原创 vue3.x 使用jsplumb进行拖拽连线
如果想在vue2里面使用jsplumb 可以查看 文章，下面讲解如何在vue3.x 里面使用jsplumb进行拖拽连线
2022-02-23 10:56:04
5666
easyui-treegrid-其他格式组件拖放
2020-04-24
easyui从一个treegrid树形网格往另一个树形网格拖放数据
2020-04-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人