- 博客(235)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 MongoDB Realm数据库在Node中的使用
本示例的演示是在Electron主线程中编写，由于浏览器环境的限制，realm依赖无法在Web端构建。当然如果需要在web端使用数据库存储，可以安装realm-web依赖。
2024-03-04 15:48:52
220
原创 开发桌面端应用，使用electron-vite构建项目真的是一绝！
技术栈：electron v28.2.1、react v18.2.0构建工具：electron-vite v2.0.0项目打包：electron-builder v24.9.1本教程为项目工程的搭建，相关技术的知识请各自学习。Vite在当下绝对是非常卓越的前端构建工具，很多项目将其与Electron进行结合，开发桌面应用。但是如果单独配置vite进行桌面应用的开发，配置相当繁琐、复杂，甚至需要安装第三方库来解决一些常见问题，例如需安装nodemon来使electron应用热更新；
2024-02-02 17:21:55
739
原创 实现元素进入界面的平滑效果
解决关键性问题，当滚动条滚动到界面中间时，刷新界面后，不论是往上滚还是往下滚，再次进入界面的元素都会执行动画。当然我们所需要的是往下滚动时下面的元素进入界面需要加载动画，而上方的元素进入界面不需要动画。});});// 判断节点是否在视口内if(!${DISTANCEpx)`,opacity: 0},opacity: 1], {})})结尾：上面的示例是在html文件中完成的，当然你也可以在Vue和React中实现，在Vue中，你可以自定义指令，通过获取到的el。
2024-01-28 20:17:58
379
原创 Vue3中ElementPlus组件二次封装，实现原组件属性、插槽、事件监听、方法的透传
本文以el-input组件为例，其它组件类似用法。
2024-01-27 15:14:42
1854
2
原创 解决Canvas画图清晰度问题
先吹下水：远程桌面的连接我们是通过Websocket连接后，后端不断返回远程端的界面二进制数据流，我接收到之后转为图像，画到Canvas中，然后对canvas进行一系列的事件监听，传递消息给服务端，从而实现远程桌面的连接操作。在完成开发之后，发现了一个问题，后端返回的图片信息是比较清晰的，当我在前端渲染的时候，将窗口放在扩展屏上时，图像显示正常，但将窗口移入到电脑屏时就出现了模糊现象。物理像素的大小即是在内存中的实际大小，CSS像素的大小即是设置的样式大小。将窗口移入扩展屏前后。
2024-01-06 22:30:41
962
原创 实现网页跟随系统主题切换
这个API可以帮助我们解决这个问题。它和css中的媒体查询一样的用法，只是这个是在JS中使用。实现亮/暗主题的切换，那如何让其跟随系统自动切换呢？如何实现网页跟随系统主题切换？想必大家都是用过媒体查询。
2024-01-06 14:09:13
582
原创 Electron中调用dll
截止目前Electron的官方稳定版本已经更新到了28.1.1。我在创建Electron项目时用的28.0.0版本，后面在项目中有用到调用dll方法的需求，大致的实现就是将后端给的dll文件引入到项目中，安装ffi-napi依赖，然后进行使用。但是在ElectronV21+的时候，官方引入了V8内存隔离区，当再使用ffi-napi这个库的时候就会报错，用尽了一切办法，都未果（如果读者有解决办法可私聊）。最终还是将Electron版本降到了20.3.8。当然ffi-napi。
2024-01-05 17:25:17
1313
2
原创 Webpack5 常用优化总结
本文主要总结经常用到的一些等内容的方法。具体的实现可参考webpack官网查看相关示例。注：如果读者还未接触过webpack，请先了解webpack的基本使用。
2024-01-05 11:51:25
1382
原创 Electron V28主进程与渲染进程互相通信总结
本文示例采用Electron+Vue3+TS编写，请读者理顺思路，自行带入自己的项目。注： 读本文前请先搞懂什么是主进程，什么是渲染进程。在Electron中有着和模块，以及创建窗口对象上的。很显然ipcMain和窗口对象上的webContents是在主进程中使用的，ipcRenderer和contextBridge（用于向渲染进程暴露API）是在预加载脚本中使用的。请看下方示例，关键讲解写在代码注释中。主进程中发送消息，是使用new 窗口时的对象上的webContents发送消息。例如：main.j
2023-12-14 15:56:41
513
原创 Error: Cannot find module ‘@npmcli/config‘ 最新解决办法
看了网上许多这个问题的小伙伴，都是降级node版本来解决的。但是降级并不是我想要的结果。真正的解决办法就是更新nvm，将你的nvm升级到最新版本，然后卸载掉npm报错的node版本，重新安装即可使用。
2023-12-05 14:55:28
1904
1
原创 Vue3中搜索表单的二次封装
经过前两步的封装之后，在使用的SearchForm组件时，简直是爽的不要不要的。{label: '项目名称', prop: 'name', type: 'input'},{label: '项目编码', prop: 'code', type: 'input'},{label: '项目描述', prop: 'desc', type: 'select', list: [{label: '未开始', value: 1}, {label: '已开始', value: 2}]},
2023-08-23 15:30:31
1389
1
原创 分享在Vue项目中对protobufjs的使用
研究了几天protobufjs，最开始总是被如何引入proto文件所困扰，总是报错，如果只是在html中引入proto文件，那么只需要引入protobuf对象，然后再把html运行在容器中即可。但是要在vue项目中使用，可没有这么容易了。因为vue没办法处理proto文件，需要引入loader对其处理。
2023-06-05 15:05:40
740
原创 面试官：请你描述一下React的Diff算法
当更新列表时，React 会根据 key 来快速定位元素，从而减少不必要的 DOM 操作，提高更新性能。总的来说，React diff 算法是 React 的核心算法之一，它通过有效地比较 Virtual DOM 树的差异来提高渲染性能，同时还可以避免不必要的重新渲染，提高应用程序的性能和用户体验。React diff 算法的基本思想是将 Virtual DOM 树上的节点按照深度优先的顺序进行比较，比较的过程中可以使用三个指针来跟踪原始树、新树和上一次更新时的树，从而找到需要更新的节点。
2023-04-12 16:02:25
631
原创 用简短的话来描述React Fiber架构
在 React Fiber 中，每一帧都被认为是一个时间片（time slice），React Fiber 将渲染任务拆分成一系列的小任务，并将这些小任务分配给不同的时间片进行处理。在传统的 React 渲染模型中，React 会从根组件开始，一直递归渲染整个组件树，直到完成所有的渲染操作。React Fiber 架构的主要目标是实现增量式渲染，使得在渲染大型组件树时，React 可以将渲染过程拆分成多个较小的步骤，每一步骤都可以被打断或者中止，从而可以让应用程序更加灵敏和响应。
2023-04-12 15:37:04
153
原创 PubSub原理解析并简单实现其源码
该方法接受两个参数：主题和订阅器对象。首先检查该主题是否有任何订阅器对象。否则，找到该订阅器对象在数组中的索引，然后使用splice方法从数组中删除该订阅器对象。否则，对该主题的所有订阅器对象进行遍历，依次调用每个订阅器对象的方法，并传递消息作为参数。如果该主题还没有任何订阅器对象，则需要先创建一个空数组，然后将订阅器对象添加到数组中。该实现中，PubSub对象包含三个方法：subscribe、publish、unsubscribe，以及一个名为subscribers的对象，它保存了所有订阅器对象的信息。
2023-03-01 15:04:01
301
原创 前端大文件分块上传及计算大文件MD5值
本文主要讲解文件的MD5值计算及上传逻辑。大致思路：在选择文件获取到文件之后，首先是对文件进行MD5值的计算，然后拿着这个MD5值对查询后端接口此文件是否存在。查询结果分为三种情况，一是不存在，二是已存在，三是部分存在。不存在时对文件分块，然后一块一块上传；已存在时直接使用已存储的文件，即秒传；部分存在时后端会返回不存在的文件块的位置，然后上传对应不存在的块。
2023-02-22 16:26:18
2626
2
原创 前端数据请求Loading方案
在写业务的时候，你现在是否还再请求调用处一遍遍写showLoading、hideLoading？即使自己对不同组件库的Loading进行二次封装，方便你调用，但这也不是很好的一种解决办法。无论是ElementUI的Loading还是Antd中的，你使用前都必须要先进行导入，这时候你可能会二次封装，将封装后的对象绑定在全局上。这是很常用的一种方法，直到前两天 突发奇想，为什么Loading不能统一写在一个地方，而不需要我们一遍遍的在请求调用处写showLoading、hideLoading呢。
2022-11-26 12:39:55
1554
原创 Vue3 中结合 ElementPlus 实现弹窗的封装
Vue3自定义弹窗，知识点包含vue3的emit使用，自定义ref，子组件内容方法向外暴露。
2022-09-30 11:40:16
3503
2
原创 electron-vue初始化项目到打包运行
Electron-vue就是基于vue来构造electron应用程序的样板代码。electron-vue充分利用vue-cli作为脚手架工具，加上拥有vue-loader的webpack、electron-packager或是electron-builder，以及一些最常用的插件，如vue-router、vuex、axios等等。...
2022-07-19 10:31:55
640
原创 ElementUI 表单自定义正则表达式校验文本框
结合element的表单规则方式，需在data的返回中写form和formRules，这里写的自定义规则是要结合formRules，示例如下：在data函数中写自定义规则的方法，在rules中进行使用
2022-06-16 17:05:03
541
原创 Flutter 异步操作
在Flutter中，借助 FutureBuilder 组件和 StreamBuilder 组件，可以非常方便地完成异步操作。一、FutureBuilder在讲解FutureBuilder之前，你首先要知道Future是什么，了解了这个，后面再了解该组件就轻松许多。在不同的编程语言中会有不同的名词来定义，在Dart语言中 选择使用Future类型配合async、await关键字来实现异步支持。Future 表示一个现在不确定，但以后应该可以确定的值。这个值可以是任意类型，如 Future<int
2022-05-16 23:31:58
1052
原创 黑客与画家——片段一
想要把握住这个时代，就必须理解计算机。理解计算机的关键，则是要理解计算机背后的人。表面上这是一个机器的时代，但是实际上机器的设计者决定了我们的时代。程序员的审美决定了你看到的软件界面，程序员的爱好决定了你有什么样的软件可以使用。我们的时代是程序员主导的时代，而伟大的程序员就是黑客。黑客的正确理解到底是什么？为了把这个问题说清楚，有必要从源头上讲起。1964年，第一台电子计算机ENIAC在美国诞生，从此世界上一些最聪明、最有创造力的人开始进入这个行业，在他们身上逐渐地形成了一种独特的技术文化。在这种文化的发
2022-05-02 23:41:27
476
原创 Flutter 无状态类、有状态类、State、生命周期
Flutter中的生命周期类似于Vue、React中的生命周期一样，有初始化、状态更新、停用、销毁等。在React中，组件分为函数式组件和类式组件，它们的区别就是一个无状态、一个有状态。那么在Flutter中亦是如此，它有两种类，一种是无状态类，一种是有状态类。其生命周期的使用就是有状态类的特定用法。无状态类无状态类内部有build方法，在表面上看 每次数据更新都会执行build方法。但实际上，在组件树中，当每次数据发生变更时，无状态类都会重新执行组件LessComponent对象。class Le
2022-04-30 15:33:21
1424
原创 Vue 权限指令的使用，不同情况下的权限控制分析
在日常的开发过程中，我们除了使用Vue已有的指令之外，还需自定义指令，需要对DOM节点进一步操作。在后台系统中，最常用的就是权限指令。权限控制的原理就是在系统当前界面初始化时，判断某些DOM节点有没有权限，没有则移除此DOM。...
2022-04-29 23:17:57
1503
3
原创 Vue知识点总结
实现：Vue是MVVM框架，双向数据绑定，当ViewModel对Model进行更新时，通过数据绑定更新到View。虚拟DOM是一个映射真实DOM的JS对象，提供了响应式和组件化的视图组件。一、Vue初始化过程，双向数据绑定原理vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，dep.addsub来收集订阅的依赖，watcher监听数据的变化，在数据变动时发布消息给订阅者，触发相应的监听回调。监听器Obse
2022-02-01 23:03:52
771
原创 微信小程序网络请求二次封装
微信小程序在进行网络请求时虽说用官方api写也非常顺手，但是呢，重复的代码太多了，会导致逻辑代码臃肿不堪，并且如果在请求的时候有身份验证，比如需要在header中传uuid，token等信息。你在每个需要验证的请求中都写一遍也不是很浪费时间。所以，在项目搭建之初，请封装好一切可以封装的代码。封装流程：首先在utils文件夹中创建request.js文件：const openid = wx.getStorageSync('openid')const host = "https://it.cc";
2022-01-05 15:55:28
955
原创 Element inputNumber输入框初始化没值为0问题
昨天测试小姐姐找到我说，在数字输入框内输入值的时候要先删了零才能再输入比较麻烦，所以看怎么处理一下。看到这个问题，第一想法就是在输入框聚焦的时候处理这个值的问题，因为后端返回是null，所以这个数字输入框的属性就是转换为了零。处理办法：给输入框绑定 @focus 事件，接着将输入框的model传给函数，在函数内判断。接着给model赋值为undefined即可。<el-input-number size="mini" v-model="item.addScore" :key=
2021-12-23 10:55:31
3268
2
原创 dva封装axios 跨域处理 跨域配置404问题
经过五个小时的不断调整跨域配置，关闭项目，启动项目，搞得我要疯了，在dva中跨域配置不是setupProxy.js！！！，也是不packag.json！！！如果你还沉浸在react脚手架创建的项目中的方式来处理跨域，随解决了跨域，但一直是404问题！！！dva有自己的跨域配置文件，那就是.webpackrc文件！{ "proxy": { "/api": { "target": "http://10.1.92.116:8080", "changeOrigin
2021-12-20 10:38:33
818
原创 从零搭建Axios的封装及处理跨域
本示例是写在Vue项目中，同样的道理可以搬到React等项目中。首先，安装axiosnpm install axios接着直接上手编写request.js，此文件的作用是对axios的创建及请求拦截、响应拦截。import axios from "axios";import { Notify } from 'vant'//创建axios服务，这里可写两个基本参数，baseURL(基础地址，这里写/api是后面做跨域使用)和timeout(请求超时时间)const service = new
2021-12-06 14:12:19
681
原创 Vue中自定义组件全局注册安装
有没有考虑过一个问题，在Vue中为什么我们安装了ElementUI或者Antd之后，只需要在main.js中引入ElementUI并use(ElementUI)，就可以在项目的任何组件中直接使用Element的任何组件？那我们自己定义的组件可不可以实现这种操作呢？而不是在组件中引入一个个的组件去使用。还像上面这样使用？在PassWordReset组件中引入了TopTip，在ForgetPwd中也引入了TopTip。那就不够优雅了！看我下面的写法，创建一个js文件，名字你可自定义，我这里写了cgi.
2021-12-06 09:27:05
523
原创 Angular 监听服务（Service）中的数据变化
在上一篇文章中，我对服务的作用及创建使用稍作介绍。那么，问题来了，在服务中 这个公共领域，如果其属性值发生变化，那我们如何将其更新到组件中呢？首先，你需要了解Angular的完整生命周期，对应的生命周期钩子的作用是什么，都分别在什么时候触发。lifecycle.components.tsimport { Component, OnInit } from '@angular/core';import { UserService } from "../../services/user/user.serv
2021-11-17 10:03:42
3535
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人