- 博客(235)
- 资源 (2)
- 收藏
- 关注
原创 MongoDB Realm数据库在Node中的使用
本示例的演示是在Electron主线程中编写,由于浏览器环境的限制,realm依赖无法在Web端构建。当然如果需要在web端使用数据库存储,可以安装realm-web依赖。
2024-03-04 15:48:52 209
原创 开发桌面端应用,使用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 615
原创 实现元素进入界面的平滑效果
解决关键性问题,当滚动条滚动到界面中间时,刷新界面后,不论是往上滚还是往下滚,再次进入界面的元素都会执行动画。当然我们所需要的是往下滚动时下面的元素进入界面需要加载动画,而上方的元素进入界面不需要动画。});});// 判断节点是否在视口内if(!${DISTANCEpx)`,opacity: 0},opacity: 1], {})})结尾:上面的示例是在html文件中完成的,当然你也可以在Vue和React中实现,在Vue中,你可以自定义指令,通过获取到的el。
2024-01-28 20:17:58 372
原创 解决Canvas画图清晰度问题
先吹下水:远程桌面的连接我们是通过Websocket连接后,后端不断返回远程端的界面二进制数据流,我接收到之后转为图像,画到Canvas中,然后对canvas进行一系列的事件监听,传递消息给服务端,从而实现远程桌面的连接操作。在完成开发之后,发现了一个问题,后端返回的图片信息是比较清晰的,当我在前端渲染的时候,将窗口放在扩展屏上时,图像显示正常,但将窗口移入到电脑屏时就出现了模糊现象。物理像素的大小即是在内存中的实际大小,CSS像素的大小即是设置的样式大小。将窗口移入扩展屏前后。
2024-01-06 22:30:41 922
原创 实现网页跟随系统主题切换
这个API可以帮助我们解决这个问题。它和css中的媒体查询一样的用法,只是这个是在JS中使用。实现亮/暗主题的切换,那如何让其跟随系统自动切换呢?如何实现网页跟随系统主题切换?想必大家都是用过媒体查询。
2024-01-06 14:09:13 546
原创 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 1182 2
原创 Webpack5 常用优化总结
本文主要总结经常用到的一些等内容的方法。具体的实现可参考webpack官网查看相关示例。注:如果读者还未接触过webpack,请先了解webpack的基本使用。
2024-01-05 11:51:25 1344
原创 Electron V28主进程与渲染进程互相通信总结
本文示例采用Electron+Vue3+TS编写,请读者理顺思路,自行带入自己的项目。注: 读本文前请先搞懂什么是主进程,什么是渲染进程。在Electron中有着和模块,以及创建窗口对象上的。很显然ipcMain和窗口对象上的webContents是在主进程中使用的,ipcRenderer和contextBridge(用于向渲染进程暴露API)是在预加载脚本中使用的。请看下方示例,关键讲解写在代码注释中。主进程中发送消息,是使用new 窗口时的对象上的webContents发送消息。例如:main.j
2023-12-14 15:56:41 473
原创 Error: Cannot find module ‘@npmcli/config‘ 最新解决办法
看了网上许多这个问题的小伙伴,都是降级node版本来解决的。但是降级并不是我想要的结果。真正的解决办法就是更新nvm,将你的nvm升级到最新版本,然后卸载掉npm报错的node版本,重新安装即可使用。
2023-12-05 14:55:28 1618 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 1290 1
原创 分享在Vue项目中对protobufjs的使用
研究了几天protobufjs,最开始总是被如何引入proto文件所困扰,总是报错,如果只是在html中引入proto文件,那么只需要引入protobuf对象,然后再把html运行在容器中即可。但是要在vue项目中使用,可没有这么容易了。因为vue没办法处理proto文件,需要引入loader对其处理。
2023-06-05 15:05:40 699
原创 面试官:请你描述一下React的Diff算法
当更新列表时,React 会根据 key 来快速定位元素,从而减少不必要的 DOM 操作,提高更新性能。总的来说,React diff 算法是 React 的核心算法之一,它通过有效地比较 Virtual DOM 树的差异来提高渲染性能,同时还可以避免不必要的重新渲染,提高应用程序的性能和用户体验。React diff 算法的基本思想是将 Virtual DOM 树上的节点按照深度优先的顺序进行比较,比较的过程中可以使用三个指针来跟踪原始树、新树和上一次更新时的树,从而找到需要更新的节点。
2023-04-12 16:02:25 613
原创 用简短的话来描述React Fiber架构
在 React Fiber 中,每一帧都被认为是一个时间片(time slice),React Fiber 将渲染任务拆分成一系列的小任务,并将这些小任务分配给不同的时间片进行处理。在传统的 React 渲染模型中,React 会从根组件开始,一直递归渲染整个组件树,直到完成所有的渲染操作。React Fiber 架构的主要目标是实现增量式渲染,使得在渲染大型组件树时,React 可以将渲染过程拆分成多个较小的步骤,每一步骤都可以被打断或者中止,从而可以让应用程序更加灵敏和响应。
2023-04-12 15:37:04 146
原创 PubSub原理解析并简单实现其源码
该方法接受两个参数:主题和订阅器对象。首先检查该主题是否有任何订阅器对象。否则,找到该订阅器对象在数组中的索引,然后使用splice方法从数组中删除该订阅器对象。否则,对该主题的所有订阅器对象进行遍历,依次调用每个订阅器对象的方法,并传递消息作为参数。如果该主题还没有任何订阅器对象,则需要先创建一个空数组,然后将订阅器对象添加到数组中。该实现中,PubSub对象包含三个方法:subscribe、publish、unsubscribe,以及一个名为subscribers的对象,它保存了所有订阅器对象的信息。
2023-03-01 15:04:01 277
原创 前端大文件分块上传及计算大文件MD5值
本文主要讲解文件的MD5值计算及上传逻辑。大致思路:在选择文件获取到文件之后,首先是对文件进行MD5值的计算,然后拿着这个MD5值对查询后端接口此文件是否存在。查询结果分为三种情况,一是不存在,二是已存在,三是部分存在。不存在时对文件分块,然后一块一块上传;已存在时直接使用已存储的文件,即秒传;部分存在时后端会返回不存在的文件块的位置,然后上传对应不存在的块。
2023-02-22 16:26:18 2563 2
原创 前端数据请求Loading方案
在写业务的时候,你现在是否还再请求调用处一遍遍写showLoading、hideLoading?即使自己对不同组件库的Loading进行二次封装,方便你调用,但这也不是很好的一种解决办法。无论是ElementUI的Loading还是Antd中的,你使用前都必须要先进行导入,这时候你可能会二次封装,将封装后的对象绑定在全局上。这是很常用的一种方法,直到前两天 突发奇想,为什么Loading不能统一写在一个地方,而不需要我们一遍遍的在请求调用处写showLoading、hideLoading呢。
2022-11-26 12:39:55 1530
原创 Vue3 中结合 ElementPlus 实现弹窗的封装
Vue3自定义弹窗,知识点包含vue3的emit使用,自定义ref,子组件内容方法向外暴露。
2022-09-30 11:40:16 3446 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 629
原创 ElementUI 表单自定义正则表达式校验文本框
结合element的表单规则方式,需在data的返回中写form和formRules,这里写的自定义规则是要结合formRules,示例如下:在data函数中写自定义规则的方法,在rules中进行使用
2022-06-16 17:05:03 531
原创 Flutter 异步操作
在Flutter中,借助 FutureBuilder 组件和 StreamBuilder 组件,可以非常方便地完成异步操作。一、FutureBuilder在讲解FutureBuilder之前,你首先要知道Future是什么,了解了这个,后面再了解该组件就轻松许多。在不同的编程语言中会有不同的名词来定义,在Dart语言中 选择使用Future类型配合async、await关键字来实现异步支持。Future 表示一个现在不确定,但以后应该可以确定的值。这个值可以是任意类型,如 Future<int
2022-05-16 23:31:58 1041
原创 黑客与画家——片段一
想要把握住这个时代,就必须理解计算机。理解计算机的关键,则是要理解计算机背后的人。表面上这是一个机器的时代,但是实际上机器的设计者决定了我们的时代。程序员的审美决定了你看到的软件界面,程序员的爱好决定了你有什么样的软件可以使用。我们的时代是程序员主导的时代,而伟大的程序员就是黑客。黑客的正确理解到底是什么?为了把这个问题说清楚,有必要从源头上讲起。1964年,第一台电子计算机ENIAC在美国诞生,从此世界上一些最聪明、最有创造力的人开始进入这个行业,在他们身上逐渐地形成了一种独特的技术文化。在这种文化的发
2022-05-02 23:41:27 471
原创 Flutter 无状态类、有状态类、State、生命周期
Flutter中的生命周期类似于Vue、React中的生命周期一样,有初始化、状态更新、停用、销毁等。在React中,组件分为函数式组件和类式组件,它们的区别就是一个无状态、一个有状态。那么在Flutter中亦是如此,它有两种类,一种是无状态类,一种是有状态类。其生命周期的使用就是有状态类的特定用法。无状态类无状态类内部有build方法,在表面上看 每次数据更新都会执行build方法。但实际上,在组件树中,当每次数据发生变更时,无状态类都会重新执行组件LessComponent对象。class Le
2022-04-30 15:33:21 1414
原创 Vue 权限指令的使用,不同情况下的权限控制分析
在日常的开发过程中,我们除了使用Vue已有的指令之外,还需自定义指令,需要对DOM节点进一步操作。在后台系统中,最常用的就是权限指令。权限控制的原理就是在系统当前界面初始化时,判断某些DOM节点有没有权限,没有则移除此DOM。...
2022-04-29 23:17:57 1477 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 769
原创 微信小程序网络请求二次封装
微信小程序在进行网络请求时虽说用官方api写也非常顺手,但是呢,重复的代码太多了,会导致逻辑代码臃肿不堪,并且如果在请求的时候有身份验证,比如需要在header中传uuid,token等信息。你在每个需要验证的请求中都写一遍也不是很浪费时间。所以,在项目搭建之初,请封装好一切可以封装的代码。封装流程:首先在utils文件夹中创建request.js文件:const openid = wx.getStorageSync('openid')const host = "https://it.cc";
2022-01-05 15:55:28 950
原创 Element inputNumber输入框初始化没值为0问题
昨天测试小姐姐找到我说,在数字输入框内输入值的时候要先删了零才能再输入比较麻烦,所以看怎么处理一下。看到这个问题,第一想法就是在输入框聚焦的时候处理这个值的问题,因为后端返回是null,所以这个数字输入框的属性就是转换为了零。处理办法:给输入框绑定 @focus 事件,接着将输入框的model传给函数,在函数内判断。接着给model赋值为undefined即可。<el-input-number size="mini" v-model="item.addScore" :key=
2021-12-23 10:55:31 3214 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 814
原创 从零搭建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 675
原创 Vue中自定义组件全局注册安装
有没有考虑过一个问题,在Vue中为什么我们安装了ElementUI或者Antd之后,只需要在main.js中引入ElementUI并use(ElementUI),就可以在项目的任何组件中直接使用Element的任何组件?那我们自己定义的组件可不可以实现这种操作呢?而不是在组件中引入一个个的组件去使用。还像上面这样使用?在PassWordReset组件中引入了TopTip,在ForgetPwd中也引入了TopTip。那就不够优雅了!看我下面的写法,创建一个js文件,名字你可自定义,我这里写了cgi.
2021-12-06 09:27:05 518
原创 Angular 监听服务(Service)中的数据变化
在上一篇文章中,我对服务的作用及创建使用稍作介绍。那么,问题来了,在服务中 这个公共领域,如果其属性值发生变化,那我们如何将其更新到组件中呢?首先,你需要了解Angular的完整生命周期,对应的生命周期钩子的作用是什么,都分别在什么时候触发。lifecycle.components.tsimport { Component, OnInit } from '@angular/core';import { UserService } from "../../services/user/user.serv
2021-11-17 10:03:42 3511
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人