自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

shiyzhang

技术匠

  • 博客(105)
  • 资源 (6)
  • 问答 (3)
  • 收藏
  • 关注

原创 如何将几百兆的包优化到几十兆----记一次vue项目的打包优化过程

本次优化最终实现将项目包的大小由116MB降到了21.6MB,优化率达到了80%以上,可以说是一次非常成功的优化了,让一个大型项目能在只有5MB带宽的网络中能顺利使用起来。

2024-07-17 14:53:56 1418

原创 Ngnix 常用配置及和基本功能

Nginx 是一款高性能反向代理服务器,学习它非常有必要,本文讲解了 Nginx 核心配置,介绍了反向代理,负载均衡,动静分离三大功能,最后扩展了一些常用的指令。本文介绍了 Nginx 的基础用法,后续的 Nginx 内核以及原理部分有待研究。

2024-05-07 17:49:39 898

原创 vue3 webSocket 封装及使用

【代码】vue3 webSocket 封装及使用。

2023-11-22 15:52:33 1530 2

原创 滚动条造成页面抖动

最近在做一个项目对于页面 UI 要求十分严格,需要精确到 1px 这就导致了有时候页面可以折叠在折叠与打开之后难免会出现滚动条,这就造成了出现滚动条之后页面会出现抖动这里我先采用的 js+padding-right 实现后面发现 css 有个属性可以直接实现。

2024-09-14 10:18:08 352

原创 浏览器中使用AI模型 实现绘制人体骨架

在浏览器中获取本地摄像头视频流,绘制人体骨架

2024-08-27 11:12:20 341

原创 Konva 实现指示框

将konva封装成了hooks,可以在vue或者react中使用

2024-08-05 14:12:45 374

原创 canvas绘制表格

最近在为公司产品做技术预研,经理让用canvas做一个表格,于是就有了这篇博客。在这里为了方便实用我直接封装成组件了,当MQTT数据来了就出发绘制方法。我们的数据是后端通过MQTT推送过来的。具体MQTT的实现代码,可见博客。我在代码中也直接使用了。

2024-08-01 17:07:36 420

原创 konvajs绘制带有透明度的多边形

Konva 是一个HTML5 Canvas JavaScript 框架,它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva提供了高性能的动画,补间,节点嵌套,布局,滤镜,缓存,事件绑定(桌面/移动端)等等功能。你可以使用 Konva在舞台上绘制图形,给图形添加事件,移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。

2024-08-01 16:28:53 391

原创 Fabric.js 中文文档

Fabric.js 是一个功能强大的 canvas 库,它提供了一套丰富的 API 来操作 canvas 元素和上面的对象。通过配置项、方法和事件,开发者可以轻松地在网页上实现复杂的图形和交互设计。上述文档简要介绍了 Fabric.js 的一些基本用法和配置,更多高级功能和细节请参考官方文档。

2024-07-30 17:53:07 1701

原创 在vue使用MQTT

将mqtt封装成hooks,在vue中使用mqtt

2024-07-29 10:21:39 349

原创 ZLMRTCClient配置说明与用法(含示例)

ZLMRTCClient的配置说明与用法

2024-07-24 11:02:07 1496 1

原创 vite 初始化vue3项目Cannot find module ‘vue’. Did you mean to set the ’ moduleResolution’ option to ‘node’

Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

2024-07-16 14:24:51 301

原创 数据精度丢失

在开发过程中,发现从后台返回的数据结构中的id字段在前端显示为不正确的值。经过排查,怀疑是JavaScript中Number类型精度丢失的问题。通过将id字段的类型从Number改为String进行测试,确认了问题的根源。尝试在前端获取数据后立即转换为String类型,但发现数据在JavaScript中接收时精度已经丢失,因此最佳解决方案是让后端将id字段的类型改为String。

2024-07-16 12:17:50 431

原创 vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.

在使用Vue进行路由跳转时,若遇到“Avoided redundant navigation to current location”错误,这通常是因为尝试重复跳转到当前已经激活的路由。为解决这一问题,有两种主要方法。首先,可以考虑将vue-router版本升级到3.0,新版本可能已经修复了这个问题。其次,如果不想升级版本,也可以通过修改VueRouter原型对象上的push方法来避免这个错误。具体做法是在router文件中重写push方法,使其在执行时捕获并忽略这个错误,从而实现无缝的错误处理

2024-07-15 17:31:50 683

原创 log4js node日志插件

在Express后台项目的开发过程中,日志记录是一个重要的环节。起初,开发者可能考虑使用Node.js自带的console模块来实现日志输出,但往往发现其格式和功能无法满足实际需求。因此,经过搜索和比较,选择了log4js这一插件来实现更灵活的日志管理。

2024-07-15 17:25:32 399

原创 AI在编程领域的作用

AI(人工智能)在软件开发和许多其他领域都发挥着重要作用,但这并不意味着它在取代开发者。相反,AI更多地是在帮助开发者提高工作效率,解决复杂问题,并创造新的可能性。

2024-07-10 11:51:07 298

原创 2024前端面试题之Vue3

在面试前端工程师时,对于 Vue 3 的掌握程度是一个重要的考核点。本文将提供一系列针对这一级别工程师的 Vue 3 面试题,并附上详细的解析,帮助面试官全面评估候选人的技术实力和项目经验。

2024-07-10 11:35:09 1616

原创 前端与嵌入式开发通信之QWebChannel(Qt)

最近开发中需要用到和c++开发的操作台进行通信的的需求,就找到了这个技术,记录一下。

2024-07-10 11:23:54 293

原创 程序员35岁会失业吗?

相反,通过合理的职业规划和持续的学习努力,许多程序员不仅能够在这一年龄阶段保持竞争力,还可能迎来职业生涯的新高峰。因此,即使从纯技术的角度看,年轻程序员在某些方面可能更具优势,但经验丰富的程序员在团队中仍然具有不可替代的价值。首先,必须承认的是,技术领域的确在不断变化,新的编程语言、框架和工具层出不穷。只要能够保持持续学习的热情,不断提升自己的技能和能力,那么无论年龄如何增长,都能够在竞争激烈的市场中立足。这意味着,无论是传统的软件开发还是新兴的技术领域,如人工智能、大数据等,都将持续需要大量的技术人才。

2024-04-01 11:20:23 654

原创 无感刷新token

无感刷新token思路

2024-03-27 11:03:13 574

原创 cron表达式

一个基于vue3+Ant-Design-vue的cron表达式组件。

2024-03-15 17:58:37 436

原创 TreeData 数据查找

最近做需求的时候遇到了这样的一个需求,Tree组件数据支持查找,而且TreeData的数据层级是无限级的开始想的事借助UI组件库(Ant-design-vue)中的Tree组件的相关方法直接实现,看了下api 发现没法实现,后来想通过手动构建节点树实现,这样就需要写递归组件,需要重新写编辑,删除逻辑(本人有点懒所以就没采取),最后还是在数据上动手。

2024-02-22 15:31:25 643

原创 VScode必备插件

记录一下常用插件。

2023-09-15 16:44:26 403

原创 函数柯里化和反柯里化

柯里化和反柯里化都是非常有用的编程技巧,让我们可以写出更加灵活通用的函数。理解这两种技术的实现原理可以帮助我们更好地运用它们。在编码中,我们可以根据需要决定是将普通函数柯里化,还是将柯里化函数反柯里化。合理运用这两种技术可以大大提高我们的编程效率。

2023-08-02 15:26:49 156

原创 根据数据获取渐变背景色

根据数值返回对应颜色

2023-06-16 13:37:21 113

原创 html2canvas实现屏幕截图功能

html2canvas 实现屏幕截图,base64转为blob

2023-05-25 16:44:20 355

原创 Cannot read properties of null (reading ‘setTransform‘)

Cannot read properties of null (reading 'setTransform')

2023-04-23 11:56:33 957

原创 mapbox-gl.js:30 Error: Layer with id “test_map“ already exists on this map

mapbox-gl.js:30 Error: Layer with id "test_map" already exists on this map

2023-03-02 15:58:31 506

原创 原型原型链

js原型原型链

2023-02-10 09:56:40 85

原创 js语法基础

##一、JavaScript基本介绍及发展趋势ES5是2019年发布,在所有现代浏览器中得到了相当完全的实现###二、编写JS及如何运行JS1.在HTML普通标签中直接写入JS代码写在标签上的 js 代码需要依靠事件(行为)来触发

2023-02-09 17:46:31 301

原创 vue基础教程

vue基础教程,带你走进vue

2022-07-24 20:42:21 2897

原创 js语法基础

ji基础

2022-07-21 14:58:52 88

原创 js坐标转换

这是一个功能丰富的地理位置坐标转换工具集,它支持WGS-84、GCJ-02和BD-09等多种坐标系统之间的相互转换,同时提供了Web Mercator投影坐标与WGS-84坐标之间的转换功能。此外,该工具集还能精确计算地球上两点间的距离,并判断一个给定的点是否位于中国境内。

2022-07-14 09:07:29 644

原创 VScode为Vue文件设置模板代码

VScode为Vue文件设置模板代码(1)\安装 Vetur 和 VueHelper 插件,安装完成后需要重启 VScode。(2)在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件,注意看图标,千万别安装错插件了(3)为 vue 添加模板代码片段。(4)选中 vue 项。(5)在打开的 vue.json 中加入你的模板代码片段。{ "vue": { "prefix": "vue", "body": [ " <!-- @description

2021-12-17 15:00:35 376

原创 BrowserRouter与HashRouter的区别

BrowserRouter与HashRouter的区别1.底层原理不一样:BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如:localhost:3000/demo/testHashRouter的路径包含#,例如:localhost:3000/#/demo/test3.刷新后对路由state参数的影响1、Brows

2021-10-19 16:29:17 367

原创 antd按需引入与自定主题

antd的按需引入+自定主题1.安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json将原有启动命令改为下列形式```json "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build",

2021-10-19 16:27:42 159

原创 React 三种路由传参

React 三种路由传参1、params传参优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。// 路由页面:<Route path='/home/message/detail/:id/:title' component={Detail}/> //注意要配置 /:id//路由跳转并传递参数: //链接方式: <Link to={`/home/message/detail/${id}/${title}`}&

2021-10-19 14:19:11 247

原创 vue文件配置

vue-cli4 全面配置  细致全面的 vue-cli4 配置信息。涵盖了使用 vue-cli 开发过程中大部分配置需求。  不建议直接作为模板,希望能按照此教程按需配置,或者复制 vue.config.js 增删配置,并自行安装所需依赖。配置多环境变量  通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境  只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过 proces

2021-10-10 19:28:41 901

原创 前端代码规范

前端代码规范Front Standard Guide前端 JS 项目开发规范规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的。引自《阿里规约》的开头片段:现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普

2021-09-23 16:28:35 196

原创 js中伪数组(类数组)

js中伪数组(类数组)伪数组js中伪数组(类数组)一、伪数组特性二、生成伪数组的方法三、将伪数组转为真正的数组一、伪数组特性具有length属性按索引方式存储数据不具有数组的方法, 比如push(),pop()等二、生成伪数组的方法在js中生成伪数组的方法比较多function的arguments对象document.getElementsByTagName和document.childNodes,返回NodeList对象的都是伪数组上传文件时选择的fi

2021-09-23 09:21:57 617

ZLMRTCClient配置说明与用法(含示例)

ZLMRTCClient配置说明与用法(含示例)

2024-07-24

2024最全前端面试题

前端面试题概述 本文档汇总了前端开发中常见的技术面试问题,涵盖了HTML、CSS、JavaScript、Vue、React、ES6及Webpack等多个方面。主要内容包括: HTML与CSS:详述了rem、em、vw、vh等单位的区别,以及BFC布局规则、浮动与清除浮动的原理。 JavaScript:探讨了闭包、原型链、Promise使用场景、async/await与回调函数的差异等核心概念。 Vue框架:深入介绍了Vue的双向数据绑定原理、组件通信方式、路由守卫、生命周期钩子等关键知识点。 React框架:分析了React的合成事件系统、受控组件与非受控组件、Hooks机制及其与类组件的区别。 性能优化:探讨了懒加载、虚拟DOM、组件懒加载等提升前端性能的策略。 Webpack:讲解了Webpack的工作原理、配置方法及其在项目优化中的应用,如代码压缩、资源分离等。 此外,文档还涉及了跨域问题、HTTP与HTTPS的区别、git常用指令等前端开发中必须掌握的基础知识。这些问题不仅考验了面试者的理论知识,还涵盖了实战经验和问题解决能力,是前端开发者面试前复习的重要资料。

2024-07-15

最新全国行政区sql编码

最新的全国 行政区编码 内容很全 到各个行政单位

2022-07-26

element-ui表格二次封装.zip

配置化表单,只需配置后端接口,请求参数即可查询数据

2021-12-21

admin_project.zip

admin_project.zip

2021-08-05

基于iview二次封装实用组件

基于iview封装的二次组件

2021-04-14

elementForm.zip

只需配置即可使用,不需要写html

2021-04-14

vue+element后台管理类型框架.7z

这是一个后台管理类型的框架,里面包含了路由,事件总线,vuex,router,element组件的一些常用方法,页面关联性不大,可以下载下来直接使用,没有关联很逗类容,很容根据自己的页面内容去进行改动

2020-07-30

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除