- 博客(38)
- 收藏
- 关注
RSS订阅
原创 Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
2022-11-22 20:58:04
49035
120
原创 Vue 使用 Vue-socket.io 实现即时聊天应用（Vue3连接原理分析）
总的来看，要深入了解socket的源码，知道其实现方式，基于源码，将vue3的特性结合进去
2022-09-13 16:35:15
13474
28
原创 Vue 使用 Vue-socket.io 实现即时聊天应用（实战篇 二）
1.项目说明：我们主要通过这个项目，练习一下vue-socket.io的群聊和私聊两个功能，至于房间Rooms，有兴趣的伙伴可以自己去研究啦。那我们的群聊是怎么实现的呢？我们会设计一个登录页面，要求输入用户的用户名，作为聊天应用的唯一标识。群聊是登录上来就有一个默认的群，而每个用户都能触发私聊。就这个思路，下面来实现。2.登录页面实现：//vuex state: { /* 记录登录状态 */ isLogin:false,}//App.vue c..
2021-11-22 13:32:39
16618
57
原创 Luckysheet chartmix 统计图实现原理分析及协同实现
简单分析了luckysheet 插件实现原理，处理依赖报错问题，通过 pugin.js、 handler.js 劫持用户创建、更新、删除统计图操作，发送协同数据；同时，新增了luckysheet 的全局API(createChart、updateChart、renderChart、deleteChart)，以及新增 controller/chart.js，用于处理统计图相关的操作。
2024-12-16 14:45:33
1305
2
原创 Luckysheet 实现 excel 多人在线协同编辑（全功能实现增强版）
单独将Luckysheet 抽离成新项目，争取实现完整的协同功能。，使用 sequelize 作为ORM数据库连接，方便大家迁移，同时，也做了兼容，没有数据库的用户，。同时，为了规范代码，，没有使用任何前端框架，实现最简单简介的luckysheet协同增强版。
2024-12-11 15:28:07
4617
4
原创 读取文件内容、修改文件内容、识别文件夹目录(Web操作系统文件/文件夹详解)
我们通过FileSystemFileHandle可以进行文件内容读取、修改文件内容等文件相关操作，同时，利用FileSystemDirectoryHandle提供的能力，可以实现点击上传并识别文件夹目录，对文件夹内文件进行内容读取，还利用DataTransferIt，实现了拖拽上传文件/文件夹，利用其能力，也能识别文件夹目录及对文件进行读取操作。同时，拖拽上传还支持纯文本哈，const data = e.dataTransfer?这也是一些白板、Canvas-Editor、流程图 从外部拖拽上传实现的原理。
2024-11-13 17:31:13
1102
原创 基于 Konva 实现Web PPT 编辑器（三）
这篇主要丰富了Unipptx的功能，支持富文本、公式导出、拖拽上传及幻灯片排序等，还有难度较大的PPTX导入导出实现。整体来说，目前已经可完全编辑了，后面主要实现的功能有 预览、元素动画实现、协同实现。最近工作较忙哈，更新较慢，大家多多谅解，欢迎大家fork代码，一起创作开发~大家有啥新的想法、创意，页可以留言讨论实现方案，一起完善相关功能~
2024-10-16 17:24:30
1678
原创 基于 Konva 实现Web PPT 编辑器（二）
大体实现了幻灯片新增、删除、切换，支持矩形、箭头、文字、统计图、表格、图片多媒体、公式等类型的新增、删除、编辑操作；实现了基本的动画系统、历史记录管理器及属性配置模块。
2024-09-05 09:48:00
1724
2
原创 基于 Konva 实现Web PPT 编辑器（一）
Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva 提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能，本应用基于 konva 实现Web PPT 编辑器，以实现设计编辑、预览、切换、动画等核心功能。
2024-08-15 15:22:53
1491
原创 Canvas-Editor 基于canvas/svg的富文本编辑器
介绍 npm、源码、插件包的方式使用Canvas-Editor，是canvas-editor最基础的使用教程、包括如何使用源码增强Canvas-Editor 功能。
2024-08-09 17:19:52
7852
60
原创 Monaco Editor 中文文档整理（超详细、超全面、带demo示例）
对 Monaco Editor 官网的译文，翻译目前最新版本 V0.49.0，全网最全API，共计 500 + 文章，保持了与官网一致的目录结构，针对特定API提供了示例DEMO，方便用户更快速了解Monaco Editor 的使用。
2024-07-11 09:58:48
17970
原创 Web IDE 在线编辑器综合实践（Web IDE 技术探索 三）
前面两篇文章，我们简单讲述了 WebContainer/api 、Terminal 的基本使用，离完备的在线代码编辑器就差一个代码编辑了。今天通过 monaco editor ，来实现初级代码编辑功能，讲述的是整个应用的搭建，并不单独针对monaco editor的使用哈，因为Monaco editor 确实有些难度，仅在使用到的API 、功能模块上做讲解。如果大家有需要，可以留言，会考虑后期做一篇monaco的保姆级教程。
2024-06-05 17:31:12
2000
2
原创 Terminal Web终端基础（Web IDE 技术探索 二）
一个由 Vue 构建的支持多内容格式显示的网页端命令行窗口插件，支持表格、json、代码等多种消息格式，支持自定义消息样式、命令行库、键入搜索提示等，模拟原生终端窗口支持 ← → 光标切换和 ↑ ↓ 历史命令切换。
2024-05-21 09:44:39
2619
原创 WebContainer/api 基础（Web IDE 技术探索 一）
随着web技术的发展，在网页端直接运行node.js、实现微型操作系统已经不再是难事。今天介绍的 WebContainers就是一个基于浏览器的运行时，用于执行 Node.js 应用程序和操作系统命令，它完全运行在您的浏览器页面中，提供了文件系统、运行进程的能力，同时内置了 nodejs、npm/yarn/pnpm 等包管理器。也就是说，基于WebContainers，可以直接在网页端运行 node -v、npm install、npm run dev等命令，甚至能对文件系统进行操作。
2024-05-20 16:56:48
3329
1
原创 Vue 使用 Apache Echarts 绘制地图（中国、世界json文件）
很多小伙伴后台私信我，我想要省市级JSON数据，我已经写了爬虫程序，叫运行下，也搞不定。今天就帮大家把文件爬取下来，免费分享给大家！目前仅是爬取了省市级数据，基本上够用了，我看了下，如果将地级市数据也爬取的话，一共有3238个，在实际的项目中，仅展示地级市的数据好像也没意义，因此这里不做深究，如果实在需要，可以私信，帮大家弄
2024-04-10 11:41:35
1488
原创 Svg Flow Editor 原生svg流程图编辑器（五）
至此，该实现的功能基本上都已经具备雏形了，后面就不再更新文章咯，但是还是会持续更新这个库，大家有什么想法，需要什么BUG，都可以在git、文章下留言，我会持续关注大家的意见，维护这个库。即将发布的 1.0.15 版本，是1.0版本的最后一版，后续的版本将更替为 1.1 ，主要实现协同、相关工具类、以及关键的 history历史记录。目前市面上也有很多成熟的产品，做这个主要不是为了超越他们，而是熟悉流程图的底层实现、TypeScript的应用、以及主要的提升自我能力，望大家理性看待。
2024-04-07 19:39:44
1743
原创 Svg Flow Editor 原生svg流程图编辑器（四）
目前已经基本实现流程图的图形绘制、自定义icon 、文本输入，剩余的优化问题包括：1. 折线算法优化；2. 元件库拓展；3. 顶部菜单栏及相应 command API开发；4. ...大家可以下载包试试，有啥问题随时反馈改进哦。
2024-03-28 10:14:45
1824
原创 Svg Flow Editor 原生svg流程图编辑器（三）
本篇历时较久，原因是对项目进行了重构，使用mvp版本，不再使用单一 svg 实现整个元件的实现，而是使用div+svg的结构实现，使得旋转、层级处理上更加简单；目前旋转后，会导致一些位置异常问题，还有待深究，大家有好的想法，欢迎留言讨论呀，同时发布npm后，worker路径也会有问题，个人能力有限，如果大家有好的解决办法，可以分享下；下一篇的重点是实现折线的绘制，以及command API的完善。
2024-03-21 10:46:56
1443
原创 Svg Flow Editor 原生svg流程图编辑器（二）
目前实现的功能：1. 元件的创建、移动、形变；2. command API；3.eventBus listener 事件监听；4.register 自定义右键菜单； 5. 多实例化； 6. 文本创建与跟随。
2024-03-09 10:48:46
1821
2
原创 Svg Flow Editor 原生svg流程图编辑器（一）
svg flow editor 是一款流程图编辑器，提供了一系列流程图交互、编辑所必需的功能，支持前端研发自定义开发各种逻辑编排场景，如流程图、ER 图、BPMN 流程等。项目使用typescript与svg、canvas等技术进行搭建，脱离vue、react等框架的限制，使得用户更快、更轻松融合到自己的项目中。
2024-03-05 11:36:06
2826
1
原创 Canvas-Editor 实现类似 Word 协同编辑
基于canvas/svg 的富文本编辑器 canvas-editor，能实现类似word的基础功能，如果后续有更好的，也会及时更新。
2024-01-23 18:54:04
11025
49
原创 深度解析 Yjs 协同编辑原理
本文带大家分析了Yjs的API、y-websocket 的实现原理、Yjs的应用及底层协同模型，并使用Logic Flow 简单实现了其协同。大致的协同实现都有类似的思想，大家以后需要协同的场景，希望也能自行开发。
2023-12-26 10:16:36
5731
9
原创 Socket.IO 实现原理（一篇文章让你彻底弄懂即时聊天技术）
Socket.IO，支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定，本文将详细介绍 socket.io、socket.io-client、vue-socket.io三者的关系，Vue3 中使用 Socket.io-client 进行通信的分析过程，快来看看吧~
2023-12-05 14:18:12
2304
5
原创 Luckysheet 实现excel多人在线协同编辑
Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源，本文将重点讲述协同的实现方案，支持在线多人协作，编辑在线 excel 文档，支持文档导入、导出等其他功能
2023-11-06 17:39:21
25416
93
原创 Yjs + Quill 实现文档多人协同编辑器开发（基础+实战）
多人协同开发确实是比较难的知识点，在技术实现上有一定挑战。但随着各种技术库的发展，目前已经有了比较成熟的解决方案，而Yjs+Quill是比较简单实现多人协同编辑的开发技术
2023-09-01 10:42:07
8136
48
原创 Puppeteer 使用教程-实战篇（爬取图片、视频、音频，页面数据）
续上篇，我们简单讲述一下puppeteer常见的应用场景，包括静态页面数据获取，网络请求获取截取、图片、视频资源下载、自动化测试等，看了绝对有收获。
2023-07-19 16:23:35
4159
2
原创 Puppeteer 使用教程-基础篇（超详细、超全面）
Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。本文涉及了Puppeteer常见常用的API样例，包括爬取图片、视频、cookies设置，字符输入等多方面知识，很全面哦。
2023-07-17 10:58:22
23665
11
原创 Vue 使用 Apache Echarts 绘制地图（拓展篇）
根据大家的私信、留言，还是决定对地图这块的东西进行拓展讲解一下，希望大家能够真正了解、使用、绘制自己想要的地图效果，让大家彻底弄懂Echarts地图，涉及绘制原理、行政区划、SVG地图、地图打点、线路图、飞线图等内容。
2023-04-23 18:14:44
3186
2
原创 宏任务与微任务执行顺序（超详细讲解）
写此之前，也查阅了很多文章，并结合自己的理解，说说对Event Loop模型的理解、以及对在任务队列中的影响进行了分析，也给出了多种情形的任务案例以及分析解释，相信大家看完会有所收获；当然，也是自己的理解，难免有所偏差，欢迎大家指正~
2023-02-27 21:53:57
7305
2
原创 Vue Grid Layout - 适用Vue.js的栅格布局系统（项目实例）
Vue-Grid-Layout 基于Vue.js 的栅格布局系统，在拖拽布局的项目中可以借鉴一下；本文做项目实例，望参考，有问题欢迎留言讨论。
2023-02-24 16:03:59
10255
46
原创 Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
使用Apache Echarts绘制中国、省市级、自定义地图的方法
2022-07-04 20:10:40
31286
41
原创 Vue+ssm跨域问题解决的两个办法
最近在做vue+ssm的项目，遇到跨域问题，下面说说我的理解：基本项目的搭建：ssm:vue:基本的项目搭建就不多说了，重点是跨域问题的解决，主要有两个方法。方法一、注解式：这种方法仅限于spring 4.x以上（这个x具体是多少我也不知道，包括我用的4.3.6都不行！！不行。所以大家试试这个方法，不行的就换filter解决，不要纠结注解怎么没有作用啊，filter拦截也是很简单的。下面是我用的4.3.6）好了，开始吧：在某方法上增加@CrossOrigin.
2021-12-16 12:49:04
3679
原创 Vue 使用 Vue-socket.io 实现即时聊天应用（实战篇 一）
目录1. 项目说明：2. 项目的创建：3.使用编辑器打开项目：4. 下载ElementUI:5. 使用elementUI搭建聊天应用主体框架：6. Footer的实现：7. Aside的实现7.1 渲染用户列表；7.2 个人信息：7.3 搜索框实现8. vuex的设计：9. Header实现：10.Main的实现：11. 总结：1. 项目说明：本项目基于vue2与cli3，使用vue-socket.io实现即时聊天的小应用，从项目的搭...
2021-11-16 21:35:48
13612
14
原创 Vue 使用 Vue-socket.io 实现即时聊天应用（vuex管理）
PS:动态地址问题、自动连接问题、vuex管理、学习建议1. 动态socket地址问题最近有小伙伴私信问动态地址问题，今天统一做一下答复，谈谈自己的理解。所谓动态地址，就是请求后端接口，返回一个地址，然后你再连接这个socket.io服务器。如下示例：基础数据 server.json：{ "server":"http://localhost:9000"}如上，我定义了一个基础JSON数据，里面有一个服务器地址，下面我们通过axios请求这个JSON文件，模拟后端返回..
2021-11-15 14:22:49
4834
2
原创 Vue 使用 Vue-socket.io 实现即时聊天应用（通讯篇）
1. 上次的博客已经讲述了如何建立服务器，如何建立客户端，并且与服务器进行连接，那么本文接着上次，讲述一下客户端与服务器端的通讯是如何实现的。PS:事件的发布与监听、广播事件、私聊事件、其他常用事件。2. 事件的发布与监听： 2.1 emit（）、on（）：在vue中，组件可以发布自定义事件，使用emit，其他地方直接使用 on 监听这个事件即可。而socket.io 也是类似的，发布事件用 emit ，监听事件用 on；// 监听客户端连接...
2021-11-11 12:00:52
9554
8
原创 Vue 使用 Vue-socket.io 实现即时聊天应用（连接篇）
1. 目前比较成熟的实现聊天的技术很多，不过都是封装的web socket。在实际的项目中有这个需求，就查找了相应的文章，发现关于Vue实现聊天的完整叙述的文章少之又少。故写此文章，望帮助到正在探寻的小伙伴，欢迎留言讨论。（PS:包括客户端、服务器端、Vue-socket.io 使用的注意事项、请求跨域问题、400状态码问题的解决等，相信读完会有所收获。）2. 先说说Web Socket：Web Socket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。说人话就是建
2021-11-08 11:51:56
6520
13
原创 Element-UI 中 Upload 组件的使用
(第一次写优快云，写的不好见谅！)1. 我们在Element官网可以查看 Upload 的相关参数配置，但是我想很多人不知道 action 的实现原理，我也不知道。但是我们又想使用Element-UI Upload 组件实现图片上传，怎么办呢？我也看了很多文章，下面说说我的理解和解决办法，欢迎讨论。<el-upload class="upload-demo" drag multiple action="#" :http-request="Upload_file" :be
2021-11-02 15:21:21
1471
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人