- 博客(58)
- 收藏
- 关注
RSS订阅原创 sse记录问题
devServer: { open: true, hot: true, proxy: {}, compress:false // 此处改为false },react umi 需要 4版本才可以。
2024-12-04 11:06:32
301
原创 封装axios请求重试和路由切换时请求取消
请求重试函数：这里注意两个变量__retryCount 和retry分别代表当前次数和重试次数。思路：全局维护一个函数集合，其中每一项为cancel()，在请求拦截中添加此函数到集合中，在beforeEach中执行每一个函数并清空集合。请求取消我这里的场景是路由切换时，将上次路由全部取消也可以配置部分取消。回顾axios请求取消的几种使用方式：1. 第一种使用AbortController。类似这种错误报名你取消请求成功了，但是error的结构不再是以前的结构了。
2024-02-20 16:18:56
885
原创 模拟钉钉官网动画
然后考虑到每个dom它的动画不是只有一个属性可能有多个，例如scale,opacity,transform等。然后应该将dom和属性存储到map集合中，key为dom,属性为value。实现思路：利用粘性定位sticky，以及滚动事件实现。首先我们应该设置滚动动画开始位置和结束位置 ，然后根据位置计算透明度或者transform，scale的值。
2024-02-01 16:41:42
731
原创 前端发布项目自动更新
思路：无论vue还是react打包都会有dist文件夹，内部有index.html。我是想根据index.html中的script src地址是否改变，判断项目是否有新内容。首先先拿到生产环境中index.html文本，由于是单页面应用使用fetch('/?_stamp='+Date.now())来拿到html文本。并获取所有的src地址。全局定义lastSrcs表示旧的地址数组，然后和新的newScripts对比，如果长度不同或者某一项不同则表示项目有新内容更新。最终我们使用轮询的方式监听是否变化。
2024-01-03 18:22:48
789
原创 cdn引入React以及React-dom—数组遍历渲染时setExtraStackFrame报错
配置一下多环境即可。在引入react官网提供的cdn后，部分静态页面没有问题，但是使用到 一下循环的页面则会报错。经过在网络上的搜索，发现是。
2023-12-29 16:38:27
985
原创 连接mysql 出现can‘t connect to server on ‘localhost‘ (10061) 报错
然后执行mysql --install 下载服务。net start mysql 启动服务就可以了。管理员启动终端，找到安装的mysql ，并进入到bin文件。如果没有这个服务，需要我们下载服务。如果安装了mysql 还是有问题。如果有Mysql 服务，启动服务即可。首先确保你自己已经安装了mysql。中找Mysql服务。
2023-11-30 14:51:51
844
原创 css 实现文字流光效果
实现主要利用background 渐变背景以及backgorund-clip:text实现。经过调研发现大多滑块验证码中，有一些文字流光效果，因此在这里简单实现一下。
2023-11-20 13:16:20
1014
原创 SpringBoot集成Jwt
创建JwtInterceptor类，实现接口HandlerInterceptor(拦截器)，重写preHandle方法。在登录时，调用TokenUtils.getToken(userid,sign)拿到token。@Bean标注在方法上(返回某个实例的方法)，等价于spring的xml配置文件中的。结构：标头(header)、载荷(Payload)、签名(Signature)。创建配置类InterceptorConfig，这里说明一下。我是在utils中编写TokenUtils工具类。
2023-10-19 18:09:34
241
原创 SpringBoot 配置Swagger3.0接口文档
需要注意的是配置类的头部需要加上@Configuration。@ApiModel注解是用在接口相关的实体类上的注解，它主要是用来对使用该注解的接口相关的实体类添加额外的描述信息，常常和@ApiModelProperty注解配合使用。@ApiModelProperty注解则是作用在接口相关实体类的属性（字段）上的注解，用来对具体的接口相关实体类中的参数添加额外的描述信息，除了可以和 @第一步，需要在pom中引入相应的配置，这里使用的是3.0.0版本，SpringBoot使用的2.5.9 版本。
2023-10-17 16:12:43
771
2
原创 vue3中patch函数（处理vnode）位运算，以及创建vnode的时做了什么
patch函数用来挂载和更新节点，当节点发生改变，对比旧节点与新节点的不同，采用不同的更新方式。patch通过对vnode的type进行判断当前是什么类型节点。//根据新节点的 type 类型，调用不同的处理方法；这里大部分方法名都是以 process 开头，意为加工、处理对应元素// 文本节点case Text:break// 注释节点break// 静态节点break// 多根节点n1,n2,container,anchor,isSVG,optimizedbreak。
2023-07-04 17:39:50
898
原创 uniapp实现上传图片添加日期和地点水印，修复多张图片同时上传，显示相同图片问题
imgCount就是限制上传个数，当我们同时使用拍照和相册上传，会出现当上传一张拍照图片，再从相册上传这个如果不做imgCount--操作上传的个数会出现问题。也有其他实现形式哦。方法，配置count、sizeType、sourceType参数，分别代表选择的图片个数、original 原图，compressed 压缩图，默认二者都有、是从相册还是拍照。如果我们在成功的回调中拿到所有图片，直接在success中循环调用添加水印方法。uploadFile我就不说了，每个公司都不一样的路径，看文档就可以了。
2023-07-03 09:21:50
4474
4
原创 Vue3 从初始化到首次渲染发生了什么？
在packages/runtime-core/src/apiCreateApp.ts中，他返回真正的createApp,内部包含了const app = createApp(App)。这里的app 就是一个包含了许多方法的对象。因此我们可以使用app.方法名调用。本文从createApp开始简要分析都做了些什么。位置在packages/runtime-dom/src/index.ts。方法非常长，包含了渲染器的所有方法,createApp是。这就是createApp大概流程。上，可能是后续渲染时会用到。
2023-06-25 17:05:00
543
原创 vue3中ref的底层实现
createRef接收两个参数，第一个是目标值，第二个是否是浅引用。如果是响应式则直接返回。的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制。这里不再看依赖收集和依赖触发的过程了，上篇文章中有具体代码。方法来允许我们创建可以使用任何值类型的响应式 ref。来看看他的内部代码实现：位置在packages/reactivity/ref.ts中。之间的唯一区别在于它们处理带符号的 0 和。toRaw和toReactive的代码实现。下面是ref可以定义任何类型的例子。
2023-06-25 10:51:56
448
原创 vue3响应式原理
reactive(obj) vue3内部先执行（在reactive.ts中）参数 target(要代理的对象)、isReadonly(是否只读)、baseHanlers（拦截Object和Array类型数据的函数集合）、collectionHandlers(拦截Map,Set,WeakMap,WeakSet的函数集合)、proxyMap(WeakMap集合用来记录代理的对象，避免重复代理)。此函数主要用来创建响应式对象。然后我们需要关注proxy的第二个参数，也就是和分别在对应的文件里。
2023-06-19 18:51:19
503
2
原创 谈谈：File、Blob、FileReader、ArrayBuffer、base64
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。而是通过类型化数组对象或DataView对象来操作，他们会将缓冲区中的数据表示为特定的格式，并通过这些读写缓冲区的内容。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。Blob全称为binary large Object 即二进制大对象，他是js中的一个对象，表示原始类似文件的数据。，且可以用在任意的 Blob 类型的 context 中。对象指定要读取的文件或数据。
2023-06-19 13:33:51
588
原创 vue 根据word摸板导出word文档，并压缩为zip
我看网上很多都是先将转为base64然后转为ArrayBuffer。我没有按这种方式，我是发送了一次请求，响应类型为arraybuffer。#table需要table的格式为 table：[{url0:'123',url1:'123',...}，{}]注意：这里的fileUrl必须是绝对路径，否则可能会报 is not zip的错误，请大家注意。{#url0}{%url0}{/url0} 这类似if条件语句。word文档摸板如下： 比较特殊的就是在处理图片时。大概就这些了，有什么问题私信哦。
2023-06-16 10:14:37
1416
原创 生成二维码并跳转，实现流程
配置公众号或小程序的开发环境，并在服务器端获取access_token，用于后续生成二维码和访问微信公众平台API接口。在微信公众号或小程序后台，获取开发者ID和开发者密码，以及应用的AppID、AppSecret等信息。第二种方法，如果后端能力一般，可以让后端给你access_token，然后去调用第三方接口。是一个访问令牌，可以通过调用微信公众平台的API接口获取。是一个预览图片的JSAPI，使用。参数决定了二维码的尺寸大小，参数是生成的随机字符串参数。参数是小程序的页面路径，参数是随机字符串参数。
2023-06-13 09:17:12
2664
原创 实现钉钉机器人 ---node
随边给机器人起个名字，然后安全设置选择第二项，因为后边需要这个字符串。点击完成，然后再点击自己添加的机器人，拿到webhook后边有用。主要配合自动化部署，在部署成功时提示钉钉。首先我们需要在钉钉群里加入机器人，步骤如下。点击添加机器人，选中自定义机器人。
2023-06-01 15:39:52
446
原创 echarts 绘制地图流程
1. 首先我是用json的方式引入世界地图，网上好多世界地图的json文件。同时也需要有一个翻译成中文的json文件。经过两天的研究终于有点起色，给大家分享一下吧。3. 利用json文件注册Map。2. 下载echarts依赖。
2023-04-04 18:39:26
881
原创 node实现自动化部署
需要在代码中配置deploy.config.ts 文件，使用zc-deploy init 初始化摸板。也可以自己配置，配置格式如下，需要知道公司项目发布的服务器ip，在此文件中声明即可。在执行yarn deploy时，会出现如下图选择部署的服务器。3. node-ssh connect 用于用户连接服务器，exec 用于执行命令， putFIle用于推送文件到服务器指定位置。8. commander 这里主要用来生成不同的指令，zc-deploy init 和 zc-deploy push。
2023-03-31 10:16:44
824
原创 vue3实战tabs切换时添加动画效果
js部分，需要大家新建几个组件导入。然后解析一下把，首先导入两个组件。然后定义tabs当前选中name，然后点击tabs触发事件，给定义的变量赋值。然后定义选中tabs所显示的组件，监听name的变化，然后赋值给变量。刚开始想通过给页面添加样式，来实现tabs跳转时过渡效果。但是我发现我好像不太会写。然后我知道有transition这个内置组件，来实现此效果。经过查看确实可以实现组件间的效果。此处就不贴图了，代码也不多。过渡效果大家自行设置。
2022-12-20 18:48:17
3257
原创 管道流动效果---svg
最近有些迷恋上了动画，感觉好吊啊。正好碰到需求，需求是这样：类似流水线，要看到流动的方向，例如从左到右。最终使用svg 的polyline多线段绘制方法，并配合linearGradient设置渐变，实现。后来再次基础上 实现健康宝页面小球动画。可是掉了好多头发终于感觉可行了。
2022-12-10 19:55:32
3920
3
原创 svg实现箭头无缝滚动
此效果主要模拟信号以及水流动的方向。遇到此需求可以使用，具体问题具体分析。使用svg绘制箭头 实现这种效果，首先你需要使用svg画一张图，如下 效果图 然后就可以使用border-image实现了。具体api请查看MDN。
2022-12-08 01:27:27
1613
3
原创 实现虚线动画效果
1.案例一 利用css3的属性即可完成，在百度查看时，第一次发现是用js完成的，果断放弃。然后看到有类似动画，记录下来方便以后使用。css部分代码js代码 看完下面的图你将了解度数的设置 可以根据这种效果实现一些管道，流动方向。类似下面这种。 感兴趣的可以尝试实现一下。
2022-12-06 00:08:07
1537
原创 vue实现button按钮进度条效果
这个进度条主要通过css实现的，原理：将两个相同大小的盒子，默认是盒子的右上角和第二个盒子的左下角相连如下图，然后设定过度效果以及过度的时间。首先看html部分，我是通过div绘制按钮样式，并且通过自定义属性设置按钮的大小，也可以动态改变style样式，具体操作看vue官网。src/components/Icons.vue · 刘紫成/vue3-vite-template - Gitee.com。就是将el-icon组件进行了二次封装，下载按钮动画也在这个项目里。
2022-11-28 14:26:21
1409
原创 reactive的实现过程--版本3.2.45
target 已经是个 proxy ，而且不是要求这个proxy 是已读的，但这个 proxy 是个响应式的，则直接返回这个 target。proxy的第二个参数，是根据targetType判断的，如果是Object、Array返回baseHandlers，否则返回collectionHandlers。本质上是对某个对象的劫持，这样它不仅仅可以监听对象某个属性值的变化，还可以监听对象属性的新增和删除；，所以它只能监听这个属性值的变化，而不能去监听对象属性的新增和删除。是给对象的某个已存在的属性添加对应的。
2022-11-23 11:50:26
383
原创 map、set、WeakMap、WeakSet用法及区别
对象是一组值的集合，这些值是不重复的，可以按照添加顺序来遍历。简单的说就是自动去重。Map集合的所有用户基本都在下边了，主要特性：唯一key值，相同key值不会出现多次。，值可以是任意类型。它的键被弱保持，也就是说，当其键所指对象没有其他地方引用的时候，它会被 GC 回收掉。WeakSet原型上有add、set、delete方法，支持我们操作，因为是弱引用所以不支持枚举。遍历方法以及转为数组都和Map是相同的。的用例很有限，比如使用 DOM 元素作为键来追踪它们而不必担心内存泄漏。对象也是键值对的集合。
2022-11-21 16:39:48
432
原创 二次封装el-form--只需配置文件
兄弟们经过我上班摸鱼，最近摸了很多组件，一点点分享给大家。大佬们就别看了，二次封装很简单哦。我是根据element+封装的。大家在封装时，根据文档的api一步步实现。我给大家说说简单的思路。根据上面代码，大家来找相同的部分，然后通过配置的形式传入即可，是不是很简单。下面给大家分享我的配置文件。这个配置文件，组件不需要动，除非有情况没有考虑，或者代码不严谨。大家可以根据情况书写自己的组件。其中也有table封装，包括搜索栏一键生成0。然后看看组件内部写法。
2022-11-17 15:49:10
1145
原创 二次封装table，一分钟写一个页面
组件功能：封装了loading，查询，搜索框展开和搜索功能，同时也是实现了适配功能，分页等功能，相对来说还是挺好用的，大家在每次做管理系统都能提升效率，大家可以根据下面的配置文件进行配置即可使用。1. 观察上图你会发现，封装的zc-table需要两部分，一部分是search栏，第二部分则是展示数据的表格，所以在封装时，分为search和table两部分。在公司时，写的页面多了，就感觉特别没有意思，所以我对ElementPlus进行了二次封装，相信大幅度提升自己的开发效率，有兴趣的可以看看。
2022-11-11 15:49:38
400
原创 vite.config.ts中引入全局样式--踩坑
scss.additionalData 仅添加到 scss 内容之前。如果您没有在项目中加载任何 .scss 文件（或 块），则没有地方可以插入。将 scss.additionalData 用于 CSS 变量是一种不好的做法。CSS 变量是运行时属性。scss.additionalData 通常用于编译时 SCSS 变量。而且中必须有内容，才可以引入成功。你是不是在main.ts中引入是没有问题的，但是以上方式样式则不生效。
2022-11-07 17:23:12
2351
原创 vite.config.ts配置--自动导入element-puls
注意：自动引入会出现一些样式的丢失，如：ElMessage、ElNotification等，解决方法如下，在vite.config.ts中进行如下配置。配置可以自动引入的依赖，我配置的是vue，vue-router，axios等，配置完成以后，他会将你配置的依赖显示到auto-imports.d.ts中，这样配置太过简单，你会发现目录会多出两个文件，auto-imports.d.ts和components.d.ts。他们的作用就是不需要开发者手动导入，你所使用的组件库和依赖都会在这里看到。
2022-11-03 14:31:26
3440
1
原创 vue3+vite+ts实现管理系统摸板
项目使用vite搭建基础框架，配置Router、store等，根据大多需求的情况下，实现系统的菜单权限，路由权限，登录鉴权，按钮权限等。同时封装了axios请求，router路由以及pinia状态管理等。目前登录没有完整，只是为了能够登录，后期使用需要做相应的修改。
2022-11-02 10:03:57
917
11
原创 git账户切换
2. git config --global user.name "xxx" 切换用户。git config --global user.email "xxx" 切换邮箱。1. git config user.name 查看用户名。git config user.email 查看邮箱。
2022-10-28 14:37:56
4127
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人