- 博客(67)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue、React项目对接Mqtt消息
在Vue或React项目中对接MQTT消息通常需要借助MQTT客户端库，这些库允许前端应用与MQTT代理（如Eclipse Mosquitto、EMQX等）进行通信。
2024-12-09 13:22:56
109
原创 构建基于Jenkins、GitLab与Nginx的自动化项目部署
在开始之前先明确以下概念：持续集成（Continuous Integration, CI）持续集成是一种软件开发实践，要求开发团队成员频繁地将代码更改集成到共享的主分支中。这个过程通常包括自动化构建、测试和代码质量检查。持续集成的目标是尽早发现集成错误，并通过自动化的反馈机制帮助开发团队快速定位和解决问题。持续部署（Continuous Deployment, CD - Deployment）持续部署是持续集成的延伸，它自动化地将通过集成测试的代码更改部署到生产环境中。
2024-11-25 19:32:04
1040
原创 ubuntu离线安装docker方法
近期因工作需在离线环境下安装docker，购买的工控机是ununtu的，由于docker国内访问不友好的原因，在线安装困难重重·····我的是ubuntu20.04，别名是focal。（4）切换到目标目录下，使用如下命令行进行安装。一、Ubuntu20.04安装docker。（5）配置daemon并重启docker。（3）将下载文件上传到目标文件夹。（1）查看当前系统版本号和名称。（2）在镜像源进行源文件下载。以需求为主，图片仅供参考。出现docker信息即可。（6）查看是否安装成功。
2024-11-08 11:50:01
249
原创 HarmonyOS4.0开发-TypeScript快速入门
类（ class） 是⾯向对象编程语⾔中的⼀个重要概念。⾯向对象编程（ Object-Oriented Programming， 简称OOP） 是⼀种编程范式， 其核⼼理念在于 将程序中的数据与操作数据的⽅法有机地组织成对象 ，从⽽使程序结构更加模块化和易于理解。通过对象之间的协同合作， 实现更为复杂的程序功能。类（ class） 是对象的蓝图或模板， 它定义了对象的属性（ 数据） 和⾏为（ ⽅法）。通过类可以创建多个具有相似结构和⾏为的对象。
2024-07-19 10:00:00
1193
原创 HarmonyOS4.0开发-环境配置
HarmonyOS 应⽤的主要开发语⾔是 ArkTS，它由 TypeScript（简称TS）扩展⽽来，在继承TypeScript语法的基础上进⾏了⼀系列优化，使开发者能够以更简洁、更⾃然的⽅式开发应⽤。值得注意的是，TypeScript 本身也是由另⼀⻔语⾔ JavaScript 扩展⽽来
2024-07-18 12:06:45
1295
1
原创 websocket全局封装使用
重连机制，如果断连后尝试一定次数的重连，超过最大次数后仍然失败则关闭连接。消息推送，接收到消息后进行业务逻辑处理。WebSocket对象的创建。WebSocket对象的关闭。启用心跳机制，避免断连。
2024-04-29 15:27:42
872
原创 rtsp流实现web端实时播放（海康+大华）
最近的电力项目需要嵌入海康摄像头画面，之前没有做过类似的流媒体播放，所以有些懵；海康开放平台的webAPI，有插件还是无插件，都不适合自研web系统的嵌入，所以需要自己进行解流；首先，介绍一下相关流的知识：常见的摄像头都支持rtsp取流，可浏览器不支持直接使用video标签播放rtsp流，所以需要转换。每个厂商的rtsp取流格式不一样，可以自行去官网查看；我们使用webrtc-streamer进行取流，什么是webrtc-streamer？
2024-03-14 16:57:47
1747
1
原创 react-router6使用高阶组件实现路由守卫
熟悉的Vue的朋友都知道，Vue-router中有大量钩子函数，包含组件声明周期的，路由的等，但在react中，没有路由钩子函数，需要自己去实现，最简单方法就是使用高阶组件，那什么是高阶组件呢?实现的方式有好多，还可以使用route组件的render属性，但是在6版本中，采用路由表配置路由，就不太好用；高阶组件（HOC）是React中的一个概念，它是一个接受一个组件并返回一个新组件的函数;然后将App根组件传入，就可以实现全局守卫了。
2024-01-27 12:12:32
1002
原创 Vue3+Echarts实现实时曲线及开始与暂停功能
第一步：使用设计模式思想，将变化的部分和不变的部分分开，echarts中的配置项option是固定的，series中的data数据项是变化；这个需求，重点在图表数据项的不确性，可能是一组数据，也可能是多组数据，所以要对echarts进行拆分；对于开始暂停功能，就是定时器的建立与清除；用户选择设备的属性后（多选情况，可以选择不同设备的属性），然后请求各自的数据，使用折线图的形式实现趋势展示，同时要支持暂停和开始功能；第三步：实现暂停效果，清除定时器；第二步：获取设备数据，进行渲染；
2024-01-27 11:39:58
1032
2
原创 el-tree实现多选、反选、指定选择
最近项目中遇到实现设备多选的需求，虽然这个需求很常见，但功能需求的不同，实现过程也大相径庭，我们的需求时只提供自己选择，父级不做选择，只提供层级显示；我们后端接收到的数据传入字符串形式，所以在选择中直接处理了；用的正则的原因是去掉出现零是我情况；
2024-01-27 11:18:34
1479
原创 认识&对比 React、Vue2、Vue3 三者的 diff 算法
通过 React 源码和 Vue 源码的对比学习，发现 React 源码比 Vue 源码难懂很多，个人觉得是由于 React 采用了 Fiber 架构造成的，Fiber 是一个链表结构，子节点之间通过 sibling 指针连接，没有 Vue 直接用数组来得那么简单直接。
2024-01-19 16:37:23
1594
转载 Nginx配置详解
location块的主要作用是，基于Nginx服务器接收到的请求字符串（例如， server_name/uri-string），对除虚拟主机名称（也可以是IP别名，后文有详细阐述）之外的字符串（前例中“/uri-string”部分）进行匹配，对特定的请求进行处理。前面已经提到，http块中可以包含自己的全局块，也可以包含server块，server块中又可以进一步包含location块，在本书中我们使用“http全局块”来表示http中自己的全局块，即http块中不包含在server块中的部分。
2023-08-09 12:48:56
2635
1
原创 vue3组件通信方式
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件我是子组件2
2023-08-01 16:10:13
222
原创 Vite创建Vue+TS项目引入文件路径报错
报错信息：TS2307: Cannot find module ‘./App.vue’ or its corresponding type declarations.使用vite搭建vue3脚手架的时候，发现main.ts中引入App.vue编辑器会报错，但是不影响代码运行。创建脚手架的时候，项目的根目录下会生成一个env.d.ts文件，修改文件里面的代码，在文件里面增加下面的代码。报错的原因是因为ts不识别.vue后缀的文件。翻译过来是找不到模块或者相关的声明类型；编辑器中的报错就不存在了。
2023-07-29 13:10:05
1077
原创 axios文件上传和 Content-Type类型介绍
content-type，B端发给S端的数据类型描述 响应头中的content-type，就是 S端发给B端的数据类型描述。FormData是XMLHttpRequest Level2提供的一个接口对象， 提供了一种表单数据的键值对的构造方法，即告诉服务器端，我给你传的数据是某种类型的。第3种类型：序列化后的 JSON 字符串，最常用，特别适合 RESTful 的接口。使用input设置type=filte来接受上传的文件，通过change事件的event对象获取上传的文件对象。
2023-07-06 13:45:51
1891
原创 错误: 字段“datlastsysoid“不存在（Navicat报错）
要解决此问题，请升级到最新的 Navicat 15.0.29 或 16.1 及更高版本（可能需要新的许可证），国内选手应该不需要许可证，哈哈哈。
2023-07-03 11:37:40
8710
4
原创 Docker安装的msyql镜像运行sql脚本
镜像ID或者镜像名称:/var/local 将需要执行的脚本copy到MySQL镜像目录内 source。通过docker exec -it 镜像ID bash 进入镜像容器内部查看对应文件夹下是否有脚本文件。如果镜像内没有需要执行的sql脚本通过 docker cp /var/local/xxxx.sql。原因：docker 安装的mysql镜像运行后是默认读取镜像内目录。/root/yun/vue.sql 执行脚本。时间：2022-11-2。
2022-11-02 18:32:13
645
原创 若依前后端分离版入门
若依这里是采用配置拦截器的方式来处理xss攻击，一旦请求被过滤器拦截，就会转入到自定义的拦截器XssFilter当中，首先解决的就是判断是否启用xss拦截器和是否需要拦截，若依这里是采用在配置文件当中填写具体信息的方式，来配置是否启用xss，是否是白名单，是否是匹配链接。如果是不处理的话对于项目来说是一个很大的漏洞，但有些时候前端可能会用到传入一些标签的形式来处理一些情况，这个时候是又需求的，所以也不能完全屏蔽掉。当需要新增页面时，就需要修改若依路由配置，若依对路由做了严格配置（导航守卫）
2022-10-19 18:55:53
2250
原创 NODE.JS：在EXPRESS保存请求数据时，CANNOT READ PROPERTY ‘ID‘ OF UNDEFINED
问题在于生成token的时候，payload里包含了id，解析后无法识别。console.log(req.user)也是undefined，跑去npm看了一下，才明白：
2022-09-27 21:07:23
702
原创 小程序开发：Component “路径“ does not have a method “方法名(p)“ to handle event “tap“
今天在写小程序时，彻底掉坑了，习惯了js传参的写法，就在点击事件名后加了括号直接传，结果报错WASubContext.js?t=wechat&s=1652063927164&v=2.20.1:2 Component “pages/demo/demo” does not have a method “tonav()” to handle event “tap”.查了一下教程，千奇百怪的，有什么说把方法写在methods里的，这不是原生小程序的开发的，是用uni-app框架写的时候才会出
2022-05-09 11:20:46
9509
2
原创 uni-app基础知识
####uni-app的基本使用课程介绍：基础部分：环境搭建页面外观配置数据绑定uni-app的生命周期组件的使用uni-app中样式学习在uni-app中使用字体图标和开启scss条件注释跨端兼容uni中的事件导航跳转组件创建和通讯，及组件的生命周期uni-app中使用uni-ui库项目：黑马商城项目uni-app介绍 官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微
2022-04-24 21:32:30
1119
原创 Vue.js设计与实现（读书笔记）
框架设计概览第一章 权衡的艺术第二章 框架设的核心要素第三章 VUe.js的设计思路声明式UI： Vue.js 3是一个声明式UI框架声明式描述UI的方式有两种1.模板描述2.JavaScript对象描述const vnode = { tag: 'div', props: { onclick: () => alert('gl') }, children: 'click me' }使用JavaScript对.
2022-04-21 21:37:00
1306
原创 vue项目中使用vuedraggable
最近在学习一个可视化搭建的项目，里面用的拖拽就是draggable.js。看了几个中文的文档，有很多坑，可能是没有及时更新的原因。建议去看vuedraggable的官方文档，只不过是英文的。官方文档：https://github.com/SortableJS/Vue.Draggable；由于vue3已经是默认版本了，所以vuedraggable也对应vue2.0和3.0有各自的版本，直接使用基本命令安装：npm install vuedraggable --save会默认安装2.1左右的
2022-04-11 14:23:28
27825
转载 原型和原型链
原型前面我们在 实例化 和 实例共享方法 时，都提到了原型。那么现在聊聊这个神秘的原型到底是什么？1 什么是原型？Father.prototype 就是原型，它是一个对象，我们也称它为原型对象。2 原型的作用是什么？原型的作用，就是共享方法。我们通过 Father.prototype.method 可以共享方法，不会反应开辟空间存储方法。3 原型中this的指向是什么？原型中this的指向是实例。原型链1 什么是原型链？原型与原型层层相链接的过程即为原型链。2
2022-04-10 22:57:59
159
原创 超详细前端八股文
今天在掘金看到一篇特别好的前端八股文，链接：https://juejin.cn/post/7016593221815910408
2022-04-10 21:39:40
18849
2
原创 has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check: No
作为一个前端，没有后端数据的时候，自己模拟，就是最好的结局，我常用的就是两种：1.postman进行后端模拟，在此就不进行多余叙述，2.node后端，用express当中间件，也是问题的源头。在进行请求时，终端报错为：has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header
2022-04-07 15:04:38
40923
原创 DSA/ RSA/ ECC/DES（对称算法）
1)MD5/SHAMessageDigest是一个数据的数字指纹.即对一个任意长度的数据进行计算,产生一个唯一指纹号.MessageDigest的特性:A)两个不同的数据,难以生成相同的指纹号B)对于指定的指纹号,难以逆向计算出原始数据代表:MD5/SHA2)DES单密钥算法,是信息的发送方采用密钥A进行数据加密,信息的接收方采用同一个密钥A进行数据解密.单密钥算法是一个对称算法.缺点:由于采用同一个密钥进行加密解密,在多用...
2022-03-28 14:41:37
2602
转载 NFA 和 DFA
作为前端大佬的你，想必对于 JavaScript 的正则表达式非常熟悉了，甚至随手就能利用正则表达式写出一些惊世骇俗的代码。只是不知道你是否有和我一样的疑惑：正则表达式是怎么执行的呢？我们写下这样的正则表达式 (a+|b)c，然后用它来匹配字符串 aacde、abcde，这是怎样的一个过程呢？前段时间，我试着去查找、学习相关的资料，然后知道了以下的内容：目前正则表达式引擎主要有两种：NFA 和 DFA JavaScript 采用的是 NFA 引擎那么 NFA 又是啥，跟 DFA 有什么不同？
2022-03-26 12:35:29
6650
转载 JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
这里是javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;window.innerHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高..
2022-02-28 16:42:20
24325
1
原创 前端模块化：Commonjs与ES6的区别
模块化模块化就是将变量或函数 放入不同的文件中模块的作用域是私有的 内部定义的代码只能在当前文件中使用 外部使用那么需要将此模块暴露出去模块化的好处减少全局变量 避免变量名和函数命名冲突提高代码的复用性和维护性CommonJSnode使用的是commonjs ，在使用模块的时候是运行时同步加载的 ，拷贝模块中的对象模块可以多次加载，但只会在第一次加载 之后会被缓存 引入的是缓存中的值引入使用：require("path")1.如果是第三方模块 只需要填入模块名
2022-02-27 19:56:14
313
原创 JSON.parse 和JSON.stringify
parse用于从一个字符串中解析出json对象,如var str = '{"name":"huangxiaojian","age":"23"}'结果：JSON.parse(str)Objectage:"23" name:"huangxiaojian" __proto__:Object注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。stringify()用于从一个对象解析出字符串，如var a = {a:gl,b:2}结果：JS...
2022-02-27 18:43:35
323
原创 js函数调用有无括号的区别
今天在写练习项目时，服务器请求的数据要进行刷新，为了减轻服务器的压力，进行了防抖操作，但是写完发现没作用，问题找了好半天，才明白是在调用执行函数时，加了括号。<script> // 简单的防抖动函数 function debounce(func, wait) { let timeout; // 定时器变量 return function() { clearTimeout(timeout); // 每次触发时先清除上
2022-02-25 20:18:48
417
原创 防抖（debounce）&& 节流（throttle）
在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。函数防抖规定函数至少间隔多久执行。函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行下一次函数调用将清除上一次的定时器，并用setTimeo.
2022-02-25 17:04:26
92
原创 css自适应单位布局vm,vh
视口单位(Viewport units)什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight..
2022-02-19 13:53:53
1053
原创 js内存管理-隐藏类和删除操作
hidden class 隐藏类对于动态类型语言来说，由于类型的不确定性，在方法调用过程中，语言引擎每次都需要进行动态查询，这就造成大量的性能消耗，从而降低程序运行的速度。大多数的Javascript 引擎会采用哈希表的方式来存取属性和寻找方法。而为了加快对象属性和方法在内存中的查找速度，V8引擎引入了隐藏类(Hidden Class)的机制，起到给对象分组的作用。在初始化对象的时候，V8引擎会创建一个隐藏类，随后在程序运行过程中每次增减属性，就会创建一个新的隐藏类或者查找之前已经创建好的隐藏类。每个隐
2022-01-20 00:30:45
1661
原创 扩展运算符
对象的扩展运算符对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }12上述方法实际上等价于:let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a: 1, b: 2 }12Object.assign方法用于对象的合并，将源对象（so
2021-12-15 16:59:15
143
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人