- 博客(55)
- 收藏
- 关注
RSS订阅原创 【性能优化】在大批量数据下使用 HTML+CSS实现走马灯，防止页面卡顿(二)
上一篇只是简单演示了’下一张’的操作和整体的设计思路,这两天把剩余功能补全了,代码经过精简,可封装当成轮播组件使用,详细如下.
2024-07-22 09:56:10
582
原创 前端加载,渲染十万条数据(性能优化)
子盒子C,信息展示的载体,里面是一定数量的单条展示信息盒子,子盒子C相对于父盒子A绝对定位,每次滚动时修改偏移量,保证信息显示在父盒子A的视口,不随滚动卷到其他地方。项目中某个弹窗展示设备信息卡片,返回的设备信息很多,页面样式有很花哨,导致渲染极其缓慢。子盒子B,用于模拟滚动条长度,高度设为单条展示信息盒子的高度×子盒子的数量。采用虚拟列表的方式,滚动时,dom元素数量不变,只改变展示的数据。//冻结数据,优化性能,//接收传入本组件的超大数据。//列表展示的开始索引。//列表展示的结束索引。
2024-06-03 15:24:42
431
原创 threejs的基本属性(三)
1.创建场景,摄像机,渲染器,几何体,材质,网格。场景.add(网格),网格加入场景中。相机的轨道控制器是个单独的对象。场景.add(坐标辅助器)渲染 = 场景+摄像机。网格 = 物体+材质。
2024-05-23 16:14:39
189
原创 使用 ResizeObserver解决页面尺寸变动,echarts或地图等自适应的一种方法(监听特定DOM元素尺寸变化)
项目中,页面做了响应式布局.大量使用了弹性布局,导致盒子没有固定的宽高,在菜单切换或者窗口缩放时,echarts或者地图元素就会出现扭曲,错版,填充不完全,溢出等问题.当通过监听window的resize事件时,难以精准捕捉目标容器,同时echarts的resize()方法并不一定达到效果。
2024-04-23 20:39:48
1103
原创 浏览器页面缩放导致弹性布局页面无限扩张的问题(overflow的妙用)
根据原型设计和需求文档,搭建如图项目框架(vite+vue3+js),主要页面使用弹性布局搭建.但是在反复缩放页面的情况下,main盒子出现越来越宽的情况,缩放次数越多,main盒子越宽,导致出现滚动条和页面被无限拉伸.
2024-04-01 17:46:58
518
原创 Error: Cannot find module ‘@rollup/rollup-win32-x64-msvc‘
新项目需要使用vite搭建一个v3项目,之前也弄过,但项目创建后却一直无法跑起来,大聪明的我一直没有注意到这个问题。
2024-03-27 21:03:28
2220
原创 vue3组合式api(一)
Vue 3 中引入了一个新的 Composition API，其中包含了 setup 函数，用于替代 Vue 2 中的 data、methods 等选项。setup 函数提供了更灵活和可组合的方式来组织组件的逻辑，并且更加符合函数式编程的思想它的执行比created还要早,在这里打印不了this,v3的项目几乎用不到this.setup是进入页面时自动触发而定一个函数。
2024-03-22 17:05:24
893
原创 filter过滤器
在 Vue.js 中，过滤器（Filters）是一种用来格式化和处理模板中显示的数据的技术。过滤器可以用在两个地方：双花括号插值表达式（Mustache 插值）和 v-bind 表达式中。过滤器通过在双花括号插值表达式中使用管道符 | 的方式来应用。myFilter是一个过滤器的名字，用于将 message 的值转为大写后显示在页面上。Vue.js 会自动将 message 的值作为过滤器的第一个参数传入过滤器函数中。也可以传递参数给过滤器，多个参数之间使用 | 分隔。
2024-03-21 16:58:00
202
原创 threejs简单创建一个几何体(一)
拖动网页,刷新后画布尺寸发生变化,再次拖动窗口,会出现空白。这样创建的几何模型是纯色的方块,效果如上图。这一步将前面的设置全部加入到画布中。// 设置摄像机z轴的空间的位置。// 设置几何体的材质(纯色)// 将网格对象添加到场景中去。// 把渲染器添加到页面中去。// 设置几何体皮肤(贴图)// 设置渲染器场景的大小。// 给网格对象添加动画。// 4.创建几何模型。// 2.创建摄像机。// 3.创建渲染器。
2024-03-14 16:29:12
347
原创 vue插槽的基本使用
在Vue.js中，可以通过使用默认插槽来在组件中插入内容。默认插槽允许你在父组件中传递任意内容给子组件，并在子组件中使用这些内容。如果在子组件中的slot中写内容,则为默认内容,父组件未插入值的情况下显示,插入则被覆盖。在父组件页面的子组件标签中插入值,需要用template标签,v-slot:""指定这段内容是插入哪个插槽的。作用域插槽可以从子组件传递数据到父组件,写一个表格的例子。通过子组件的slot标签将子页面的数据传递到父组件。/* 设置细线边框的颜色和宽度 *//* 设置表头的背景颜色 */
2024-03-13 16:14:15
811
原创 xlsx.js读取本地文件,按行转成数组数据
/读取文件内容，并以二进制字符串的形式传递给 reader.onload 的回调函数进行处理。//遍历工作表的名称（workbook.SheetNames）并获取每个工作表的数据。//通过 workbook.Sheets[sheetName]，获取到具体工作表的数据。//这里我们将 type 设置为 'binary'，以二进制字符串的形式读取文件。//通过 event.target.files 获取到选择的文件。//通过循环遍历每一行数据），将每一行的数据打印出来。//将工作表的数据转换为数组形式。
2024-03-11 17:00:34
463
原创 vue项目通过nginx部署到服务器
当你在开发环境中运行 Vue 项目时，devServer 的代理配置允许你将特定的请求代理到后端服务器，以便在开发过程中模拟生产环境中的 API 请求。但是，一旦你将 Vue 项目部署到 Nginx 中，Nginx 将成为前端和后端之间的统一入口，所有的请求都将由 Nginx 接收并处理。因此，如果你的 Vue 项目中有依赖于代理的请求，你需要在 Nginx 配置中设置适当的代理规则，以确保这些请求被正确路由到后端服务器。部署的服务器是阿里云买的,使用finalShell根据账号秘密链接服务器即可。
2024-03-08 15:19:46
649
原创 简单整理vue-router,路由知识
在实际使用中，通过 path 传递参数时，并不能直接在目标页面的组件中通过 $route.params 获取到参数值，因为 path 传递参数是基于路由配置中动态参数的匹配，而非通过 params 属性传递参数。在main.js中 书写,会造成单个js文件过于臃肿的情况,需要将路由配置部分抽离出来,在src下新建router文件夹,新建index.js文件。2.全局解析守卫（beforeResolve）：在路由被解析之后，组件被激活之前调用，可以用来做一些全局的前置操作。
2024-03-06 17:33:22
534
原创 vscode代码片段设置,一键生成预编代码
在vue文件中输入你的指令接回车,即可出现保存的代码片段。选择新代码片段,在这里给你的代码片段文件取个名字。选择新代码片段,也可在现有代码片段上增加。点击左下角落设置按钮。
2024-02-28 14:54:21
221
原创 websocket实现一个局域网在线摸鱼聊天室
第一个前端项目,搭建聊天室页面,同时使用Websocket API,与服务端进行通信。第二个项目,使用node环境,下载ws包,搭建服务。// 为WebSocket添加事件监听。'websocket连接建立完毕'// 生成WebSocket对象。
2024-02-27 15:22:53
1119
2
原创 奇怪的需求之与图片做交互
2.观察点击事件传入的参数,e.target.clientWidth和e.target.clientHeight是图片被点击时的宽和高,同时存在e.offsetX和e.offsetY,代表鼠标点击位置相较于点击对象的偏移值.3.由已知条件可知:点击事件发生时鼠标在X方向的偏移值与图片元素此时的宽度的比值是固定的,同理Y方向的偏移值和图片元素此时的高度之比也是固定的.通过这两个比值的范围,可以粗略判断当前点击位置是否在图片对应的位置上。// 判断滚轮是上滚还是下滚,对应的进行放大缩小操作。
2024-02-22 14:34:34
1659
原创 vue2中几种组件传值方法
父组件在子组件标签中传入fatherMess,在子组件使用$emit,约定子传父事件名,将子组件的数据传递到父组件.通过按钮修改,可以发现,这里的传值是响应式的 1.在父组件中给子组件标签添加属性 2.在子组件中使用props接受数据 3.子组件中使用数据,可以直接访问。
2024-02-21 17:16:37
971
原创 openlayers地图点击标记点,弹出当前位置自定义弹窗(三)
1. 效果图2. 代码<template> <div class="container"> <div id="map" style='width: 100%; height: 100%;border: 5px solid #a4cdff;'> <div class="toolBox"> <div class="messageBox" v-show="isShow"> <di
2024-02-19 16:38:54
1679
原创 页面切换导致echarts不加载的问题
在A页面写了echarts,初始化dom元素加载,显示正常.当切换到B页,再切换回B页面时,echarts加载不出来.f12召唤出来看看报错,没有问题,但是有这样的警告渲染echarts的dom元素上多了一个""的属性,这是用来表示唯一性的.
2024-01-31 17:12:22
573
原创 js中数组的常用处理方法
如果 a 等于 b，则返回 0。filter 方法接受一个回调函数作为参数，并对数组中的每个元素调用该回调函数。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。回调函数会对数组中的每个元素进行调用，并传入三个参数：当前元素、当前索引和整个数组。Array.from 方法接受两个参数：第一个参数是要被转换为数组的对象，第二个参数是一个可选的映射函数，用于对数组中的每个元素进行转换。
2024-01-31 11:34:53
708
原创 js动态参数与剩余参数
动态参数指的是在函数或方法中，可以接收不定数量的参数，并将其作为一个数组或类似数组对象进行处理。这样可以方便地处理不确定数量的输入数据。1.arguments功能是动态获取函数的实参 2.arguments是动态参数,只存在于函数里面 3.得到的arguments是一个伪数组 4.argument在使用时,不需要写在形参位置,应为它是函数内部内置的伪数组变量 5.箭头函数中没有arguments。
2024-01-26 16:53:42
306
原创 nodejs写接口实现图片上传回显(三)
(1)页面用formData上传图片文件(2)接口配置multer中间件,解析存储图片文件(3)接口返回图片地址,回显。
2024-01-25 16:35:32
639
原创 SpeechSynthesis实现页面内容语音播报
不同的浏览器可能会在支持的语音合成引擎、可用语音列表和不同语音的声音质量方面有所差异。具体的支持情况和可用语音列表可以通过speechSynthesis.getVoices()方法获取。Mozilla Firefox：支持SpeechSynthesis API的所有版本。Microsoft Edge：支持SpeechSynthesis API的所有版本。Google Chrome：支持SpeechSynthesis API的所有版本。
2024-01-23 22:16:28
1189
原创 前端使用nodejs写一个get请求接口(一)
可以使用参数、中间件和处理函数来处理请求，并根据不同的 URL 和请求方法返回相应的响应。Express 是一个流行的 Node.js Web 应用程序框架，用于构建前后端分离的 Web 应用程序和 API。可以使用现有的中间件（如日志记录、静态文件服务、解析请求体等）或编写自己的中间件来处理特定的需求。：Express 具有内置的错误处理机制，可以捕获和处理应用程序中的错误。：Express 提供了一些安全性措施（如 CSRF 保护、防止常见的 Web 攻击等），帮助开发者提高应用程序的安全性。
2024-01-22 14:38:54
735
原创 节流和防抖的思想
防抖是一种用于控制函数执行频率的优化技术。它通过延迟函数的执行时间，直到一段连续的触发事件停止后的指定时间间隔，从而减少函数的执行次数。防抖可以用于减少频繁触发的事件中函数的执行次数，从而提高性能和响应速度。节流是一种用于控制函数执行频率的优化技术。它通过限制函数的调用速率，以便在高频率事件中减少函数的执行次数。节流可以使函数在一定的时间间隔内最多只执行一次，从而减轻计算量和提高性能。
2024-01-18 17:28:36
402
2
原创 深浅拷贝几种常用的方法
浅拷贝是创建一个新对象，然后将原对象的属性值复制给新对象。如果属性值是引用类型（例如数组、对象、函数等），则复制的是引用，即新对象和原对象将引用同一块内存。因此，修改新对象的属性值可能会影响原对象。它将原始数组与传入的参数数组连接起来，按照参数数组的顺序排列。Object调用assign静态方法后,将第二个参数传入的对象复制到第一个参数,也就是新的对象.同时静态方法调用后返回的也是复制产生的新对象。深拷贝和浅拷贝是对象拷贝操作中的两个概念。
2024-01-17 17:04:38
553
原创 使用md5js包对数据进行简单加密
MD5是一种哈希算法，而不是一种加密算法。哈希算法是不可逆的，这意味着无法将哈希值逆向还原为原始数据。因此，MD5是无法被解密的。MD5通常用于数据完整性校验和密码存储，而不是用于加密和解密敏感数据。当存储密码时，我们通常会计算密码的MD5哈希值，并将哈希值保存在数据库中。当用户输入密码时，我们再次计算其MD5哈希值，并将其与数据库中保存的哈希值进行比较，用于验证密码的正确性。
2024-01-17 14:52:46
492
原创 布局超快的flex弹性布局
(1)作用:基于flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生.非常适合结构化布局. (2)设置方式:父级元素添加display:flex; 给父盒子加 justify-content: space-between; (4)弹性盒子存在一个主轴,默认为x轴.还存在一个侧轴(交叉轴).给需要的弹性盒子添加,flex:1; (6)flex的组成:弹性容器,弹性盒子,主轴,侧轴。首先弹性盒子需要有宽,第二步给父元素设置换行属性。 (3)父级叫弹性盒子,子盒子叫弹性盒子.
2024-01-16 13:54:23
319
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人