- 博客(65)
- 收藏
- 关注
RSS订阅原创 js迭代器
一个数据结构，如果它实现了【Symbol.iterator】函数（即迭代工厂函数），该函数返回一个对象（即迭代器）遵循某种规定（可迭代协议）。之后，你用该数据结构 new 出来的对象就是可迭代对象。迭代工厂函数返回的迭代器对象必须有一个next()方法，next方法返回一个对象，必须包含两个属性，done:取值为true或false，表示迭代是否结束。value:取值为可迭代对象的元素值。迭代工厂函数返回的迭代器对象有一个可选的return方法，用于提前终止迭代器。
2025-04-02 11:18:18
315
原创 Object和Map和WeakMap比较，以及localStorage怎么存取Map类型的值
首先，Object和Map十分相似，使用object能解决的问题，一般Map都能解决。Map和Object主要三点区别：1、Object的键是数值、字符串、Symbol，Map的键可以是任意类型的值。2、Object的属性是无序的，而Map的键是有序的。3、Object无法用for of进行迭代，但是Map可以。
2025-04-01 16:26:17
269
原创 【减小图片打包体积】image-webpack-loader
期间报错，说是没有imagemin-mozjpeg这个moudle。（这一步看请情况，也许你不报这个错，根据报错去解决，少哪个包就安哪个包）打开dist/static/img，找到对应图片，发现图片被成功压缩啦。2、添加webpack的loader配置，和plugin配置同级。场景：登录页背景图片体积过大，加载慢，影响用户体验。5、再次打包，npm run build:prod。1、安装image-webpack-loader。4、安装imagemin-mozjpeg。
2025-03-31 16:22:37
278
原创 vue的SPA项目nginx配置注意点
表示（如果没有其他location规则拦截 API 请求）指定。这里的目录是 Vue/React/Angular 之类的前端框架。例如：访问，会返回访问，会返回$uri：尝试直接访问请求的路径，比如/about会查找。$uri/：如果$uri是一个目录，尝试访问该目录（通常用于访问/folder/这种 URL）。：如果前面的路径都不存在，则返回index.html。这是。在 Vue/React/Angular 的 SPA 项目中，前端路由是的，而不是 Nginx 服务器控制的。这些路径。
2025-03-28 09:47:36
371
原创 前端工程化开篇
答案是构建工具的出现，类似webpack，vite。再后来，有了vue，react等前端框架，有了虚拟dom以及diff算法等的加持，使得在提升开发效率的同时，网站的性能也得到了很大的提升。那么，通过模块化开发编写的代码（不论是es和commonjs），或者是一些.vue文件，或者是sass，less，ts的代码，是怎么在浏览器中执行的呢？最早的html，css，js是前端三剑客，足以实现所有的前端开发任务，但是呢，一个简单的前端交互效果可能就需要一大堆的代码去实现。
2025-03-25 11:26:40
326
原创 uniapp路由跳转导致页面堆积问题
在A页面用navigationTo跳转到了B页面，在B页面用navigationTo跳转到了C页面，在C页面提交表单后，用navigationBack返回到B页面，在B页面的onShow生命周期钩子中请求数据更新状态。但是页面栈中堆积了很多页面，从该页面返回就到了C页面，而C页面是表单提交页面，我们希望从B返到A。从A页面跳转到B页面，然后从B页面跳转到了C页面，在C页面提交了表单之后要返回到B页面，但是此时B页面的状态需要更新，完事之后，我们希望此时在B页面点击返回之后回到A页面。
2025-03-18 15:29:04
313
原创 ngrok实现内网穿透，可从外网访问本地服务
场景：由于没有服务器部署你的前端项目，而你想要给你远在两千里之外的朋友装一把，演示你的前端项目，你的朋友和你不在一个局域网下，那你不就装X失败了嘛。不用急，用ngrok帮你解决！ngrok authtoken wksfsieoiseojslkexxxxxxxxxxxxx(替换实际秘钥,获取方式如下)以上，启动成功，将上方地址发给你朋友，你朋友大赞。给你发了一句‘膜拜大佬’，啊哈哈哈哈哈哈！第二步，解压缩，双击，打开命令提示窗口。第四步，对你本地开启的服务进行端口映射。，登录一下，根据电脑版本安装一下。
2025-03-11 10:19:24
219
原创 vue2项目开启br压缩
在 Vue 2 项目中，你可以通过配置构建工具（如 Webpack）来启用对 .br 文件的支持。最后，确保你的网站在支持 Brotli 的浏览器上测试，以验证 .br 文件是否被正确加载和压缩。然后，你可以安装 brotli-webpack-plugin 插件来帮助你在构建过程中生成 .br 文件。通过以上步骤，你可以在 Vue 2 项目中启用并使用 .br 文件压缩，以提高网站的性能。minRatio: 压缩比率的最小值，只有当压缩比率达到或超过这个值时，文件才会被生成。步骤 1: 安装必要的依赖。
2025-03-10 10:19:46
384
原创 实现多个球沿椭圆轨迹进行旋转动画
X轴方向动画持续20秒，动画开始直接进入播放5秒时的状态，此时应该在向右运动过程中中间的位置。4、给其他球添加动画样式，通过设置动画的延时时间（正值为延迟播放，负值表示直接进入播放动画n秒之后的状态），可改变球的初始位置。2、想要球动起来，并且沿着椭圆轨迹，要用到运动的合成，同时添加X轴方向和Y轴方向上的动画，同时在过程中改变球的大小和透明度。在旋转的过程中，球的大小，透明度在不断地发生变化，转到前端的时候不透明且最大，转到后面的时候透明度很高且最小。给球绑定鼠标移入事件，鼠标移上，所有球动画停止。
2025-03-06 15:21:22
251
原创 文件上传和下载前后端交互逻辑
2、表单提交接口，提交表单时，将文件的id和表单信息一块提交给后台，实现文件和表单的绑定。1、后端给前端一个上传接口：进行文件上传，上传成功后，该接口返回文件的路径，名称，id。后端给前端提供一个下载接口，前端调用后，返回二进制文件流。
2025-03-05 15:08:49
251
原创 在https的网站里访问http的静态资源
B 前端处理请求地址，将拿到的地址去掉协议、域名、端口号后，进行请求，这样会将请求发送到你前端页面所在的服务器。场景：出于安全考虑，项目的前端访问地址由原来的http变为了https的地址。将资源请求发送到自己的https的前端服务，通过代理转发到http的静态资源服务器上，然后将拿到的资源以https的形式返给浏览器。A 拿到后端返回的静态资源地址后，不要直接请求，也不会请求成功，因为你前端是https的。C 进行代理配置，给改完的地址随便加一个“头”，类似"/ditu"，改完之后就变成了这样，
2025-03-05 09:09:24
291
原创 mapbox弹窗参数
试过在弹窗组件中使用自定义按钮，但是给自定义按钮绑定点击事件的时候，突然发现不知道怎么关闭弹窗，尴尬了！解决方法是由之前的设置：maxWidth: "200px",改为maxWidth: "100%"。1、以上是常见参数，今天做项目因为maxWidth属性设置问题，导致弹窗的叉号没有在右侧。3、想实现不同的类型弹窗，有的显示关闭按钮，有的不显示。以上判断了当弹窗内容是视频的时候，才显示关闭按钮。最后只能是在设置弹窗的时候进行判断了。2、修改弹窗关闭按钮颜色。
2025-03-03 11:37:51
223
原创 网页中图片保持清晰的秘诀
通常情况下，浏览器的显示比例为100%不变，想要你的图片保持清晰。要么增加图片的原始尺寸，要么减小代码中设置的样式尺寸。3、缩放比例：浏览器的缩放倍数，通过window.devicePixelRatio可以获取。当原始尺寸>=样式尺寸*缩放比例时，图片处于清晰的状态。当原始尺寸<=样式尺寸*缩放比例时，图片处于模糊的状态。1、原始尺寸：图片设计出来时的尺寸，如下84*85。只要满足以上公式，你的图片在网页中就会保持清晰。2、样式尺寸：你在代码中设置的尺寸80*60。
2025-02-28 15:25:33
146
原创 mapbox添加缓冲区
然而，在地理信息系统（GIS）中，缓冲区是一个重要的空间分析功能，用于围绕点、线、面等地理要素建立一定距离的扩展区域。此时，缓冲区的形状会根据所围绕的地理要素和设置的参数而变化。定义一个点（geojson类型的点，线，面都可以，或者是。2、缓冲区本质上是一个面（Polygon）），并使用 Turf.js 生成缓冲区。1、引入mapbox插件turf。
2025-02-27 10:08:38
266
原创 mapbox添加动图作为点位图标
但是，在这里你添加的图片如果是动图的话，在浏览器渲染之后就不是动图了，因此，我们需要别的方式设置动图，就是接下来要说的mapbox提供的Marker类。通过以上步骤，你就可以在Mapbox地图上成功添加一个包含DOM元素的Marker了。这个DOM元素可以是任何有效的HTML内容，你可以根据需要进行自定义和样式设置。5、你可以通过CSS来设置Marker的样式，比如大小、颜色、边框等。6、Mapbox Marker类继承自Evented类，因此你可以监听Marker上的各种事件，比如。
2025-02-26 09:42:29
235
原创 mapbox实现图层聚合
1、你需要一些点数据来进行聚合。这些数据可以是从API获取的，也可以是静态的GeoJSON数据。2、引入数据源，添加三个图层。聚合图层由三部分组成：聚合状态下图层、聚合数字，非聚合状态下的图层。
2025-02-26 09:13:12
138
原创 mapbox添加文本图层
在Mapbox中，当你想要添加文本图层时，数据源为GeoJSON格式的点、线、面数据确实都可以作为基础，但需要注意的是，文本图层（symbol图层）通常最直接地与点数据相关联。这是因为文本标记通常表示的是特定位置的单个点信息，如地名、地点标记等。
2025-02-25 16:59:30
129
原创 mapbox加载pbf切片
"source-layer": "traffic", // source-layer和mvt服务中的图层名对应。以上代码加载切片图层代码，其中。
2025-02-25 16:12:10
208
原创 mapbox添加线面类型数据
1、构建面的geojson格式数据，作为数据源添加。3、删除图层：同删除线的图层方式一致，换了id即可。1、线的geojson数据格式，作为数据源添加。
2025-02-25 14:44:45
188
原创 浏览器渲染原理
3.布局：根据样式计算每个树节点的尺寸和相对于包含块的位置。一般情况下，dom树和布局树不一样。例子：head，link在dom树中，但是不在布局树中。4.分层：将布局树的内容分成不同的图层，以便将来发生变化的时候，提升渲染效率 （可设置will-change属性分层，但不推荐）1.解析HTML：将html字符串变为对象树结构，并可以通过js进行操作。7、光栅化：将每个块变成位图（类似二维数组，存储每个像素点的颜色）6、分块：启用多个线程，将每一层分为多个小块。8、画：将画面呈现到屏幕上。
2025-02-25 11:17:02
120
原创 mapbox添加自定义图片绑定点击事件，弹窗为自定义组件
二、如果需要设置自定义图片作为点位，则要调用loadImage方法加载图片。三、在App.vue中设置取消mapbox默认的弹窗样式。四、弹窗组件通过props接收传过来的属性的值。
2025-02-25 09:31:49
466
原创 vue2项目中初始化mapbox组件
A方式： 通过npm安装mapbox，这种方式需要accessToken。（需要注册mapbox账号，很麻烦，有条件可自行注册，或者安装之后，修改mapbox源码）B方式：在index.html引入mapbox的js插件，以下便是两个版本的插件，已免token。我自己试了，不好用，可能mapbox版本的问题，你们可以自己试一下，我的版本是3.0.1。两版本对应的css文件，也引入到index.html文件中。注意：不要忘记给地图容器设置宽度和高度哦！
2025-02-24 16:18:19
429
原创 leaflet实现历史轨迹播放效果
以上代码添加了一个动画点位animatedMarker，移动点位坐标取自完整轨迹线。给实时轨迹线（橙色的）指定了点位数组newLatlngs。并在点位动画执行的过程中，通过回调函数updateRealLine，更新实时轨迹线。3、给完整轨迹线添加箭头（注意前三步的顺序不能颠倒，要保证箭头图层在最上面）2、添加实时轨迹线，初始状态置空。1、添加完整轨迹线，蓝色的。4、添加小车动态点位图层。5、播放结束，将图层移除。
2025-02-23 13:46:06
191
原创 leaflet实现pbf切片加载
这是一行被注释掉的代码，如果取消注释，它将定义一个函数，用于从要素对象中提取一个唯一的ID。Leaflet提供了多种渲染方式（如Canvas或SVG），这里选择了Canvas来渲染瓦片，因为Canvas通常提供更好的性能。以上代码为pbf切片添加点击事件，根据项目业务需求，添加一段折线并进行闪烁，两秒后移除效果。的值（即交通状态），返回不同的样式对象。是一个变量，应该在代码的其他部分被定义，指向矢量瓦片服务的地址。，它是一个对象，用于存储配置矢量瓦片图层的选项。是一个变量，应该包含有效的认证令牌。
2025-02-21 08:36:26
1040
原创 leaflet弹窗换成自定义组件
以上代码给进行了省略，给geojson点图层绑定了点击事件，整理好要给自定义组件传的参数，然后将先前的组件销毁，重新弹窗时用新的自定义组件（为了避免先前的状态保留，后来的状态因为错误没有更新，就会导致出现问题）。1、写一个自定义弹窗组件，用v-if控制其显示隐藏，在需要弹窗的时候使其显示，并添加ref属性，以便在代码中可以选择到它。leaflet实现正常添加图标或popup弹窗或tooltip提示框，请参考。本章主要介绍leaflet弹窗改为自定义组件。更多详细资料参考leaflet官网。
2025-02-20 08:51:55
341
原创 leaflet实现点位聚合
3、将相应的marker或者geojson的点图层添加到聚合图层中，点位会自动实现聚合。1、引入聚合插件及相应的样式文件。2、调用插件函数得到聚合图层。
2025-02-19 17:25:38
161
原创 leaflet给地图添加遮罩层（济南）
取地图四个边界点，在济南边界取一个点，将他们依次连接。这样形成的遮罩层的边界会多一条外边界和济南边界的连线，因此我们需要将color设置为transparent。当传入参数为以上格式时，两个多边形是包含关系，形成的新的多边形就是用外层多边形扣掉内层的多边形。我们可以用地图四个边界点形成的多边形扣掉济南边界形成的多边形。leaflet有个L.polygon函数，生成多边形。
2025-02-18 15:20:48
162
原创 leaflet前端初始化项目
注意:尽量要么使用npm包，要么使用leaflet.js库，两者一起使用容易发生冲突，引起莫名奇妙的bug.下面以使用leaflet.js库为例。1、通过npm安装leaflet包，或者直接在项目中引入leaflet.js库文件。如果在index.html中引入leaflet.js,在项目中可以直接使用变量L.这里id作为变量，有父组件传入，可在不同位置引入地图组件而不发生冲突。npm 安装：npm i leaflet。关于地图的详细配置参考。
2025-02-18 08:42:04
199
原创 关于项目证书登录流程
第五步，前端将用户名、密码、证书、签名值传给应用后端，后端一次进行用户名、密码校验，证书校验（因为每个项目证书唯一，事先将证书作为一个字段存在用户表里了）。第六步，效验完用户名、密码和证书后，后端拿着前端传来的签名值，调用加密机服务去验证签名值。第四步，前端拿到随机数后，js将证书、随机数、用户名、密码作为参数调用前端服务Server，生成签名值。第二步，插入U盘，里面存着证书，客户端可读取。第三步，前端调用后端随机数接口，后端接到请求后调用加密机服务获取随机数，将结果返给应用前端。
2025-02-17 08:55:02
265
原创 vue2项目生产环境移除console.log
场景：在实际的开发中，我们经常使用console.log在控制台中进行调试，但是调试完了之后，经常忘记了清除。项目开发久了，打开控制台发现一大堆console.log打印结果，其中不乏一些隐私信息，如登录密码等。面对开发时大量的console.log,我们该如何清除呢，一个一个的删掉？webpack提供了一个配置，可在项目打包时自动移除console.log。3、在configureWebpack中加入配置。2、在vue.config.js文件中引入。
2025-02-11 08:37:35
357
原创 前端项目部署到nginx后调用客户端本机的服务
如果请求依然是通过nginx代理，那么浏览器向nginx发起请求后，nginx应该转发到哪呢，是127.0.0.1吗？答案是否定的，因为nginx转发到127.0.0.1并不是用户本地服务地址，而是nginx所在服务器的IP地址。浏览器不直接向后端要数据，而是由用户浏览器发给nginx，因为nginx配置了代理，所以又将该请求转发到了后端。答案是我们不用通过nginx去代理请求，而是直接通过浏览器向本地服务发起请求。以上，直接调用本地服务显然出现了跨域问题，但至少我们已经请求到了本地服务。
2025-02-10 11:07:04
326
原创 使用canvas绘制图片并转换为base64格式
以上代码作为案例，传入一个文字和一张图片，生成一张新的图片，且生成图片的大小跟文字的长短有关，最终转换为base64格式，并用promise包裹返回。以上是调用方式，res即为base64图片地址。
2025-02-08 16:49:36
223
原创 leaflet实现大规模点位渲染优化
这两种实现方式是拿到全量数据后，全部进行渲染，并且点位是以dom的形式渲染的，当点位的数量级达到10000以上的时候，由于需要大量的dom渲染（尽管前端通过了markercluster插件进行了聚合），会导致浏览器出现卡死的现象，严重影响用户体验。将地图目前显示的四个角坐标和缩放级别传给后端，由后端进行聚合的计算,返回聚合点位的列表，每条数据包括聚合点位的坐标，聚合的数量，以及children字段，代表聚合下的详细点位数据（聚合交给了后端，显示聚合点位的疏密程度需要慢慢调试）。监听地图的缩放和平移事件。
2025-02-08 16:37:39
199
原创 vue2 el-date-picker时间范围赋值界面不更新
因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。当直接给formData.planTime赋值是 formData.planTime= value ， 界面没有变化。原文链接：https://blog.youkuaiyun.com/qq_43120764/article/details/122045550。value-format=“yyyy-MM-dd HH:mm:ss” range-separator=“至”
2025-02-07 08:26:39
241
原创 mysql+dbeaver安装教程
4、以管理员身份打开命令窗口，mysqld --initialize-insecure,此时根目录下会出现data文件夹。7、登录mysql, mysql -uroot -p回车，提示输入密码，默认密码为空，再回车，即进入mysql。6、net start mysql 启动mysql服务，net stop mysql 停止mysql服务。该语句修改了现有用户的密码，如果用户不存在，则将返回错误。3、在mysql的根目录下添加my.ini文件，用记事本打开，配置以下内容。替换为要修改密码的用户名，
2025-01-17 09:24:09
356
原创 后端返回字节流，前端接收下载
3、指定a标签的download属性，作为文件下载后的名字。1、通过http请求，拿到字节流res。8、触发a标签的点击事件，去下载。7、将a标签插入到DOM中。9、从DOM中移除a标签。
2025-01-16 09:00:59
232
原创 虚拟滚动解决前端大规模数据渲染问题
注意：添加滚动事件会使列表（.el-table__body）和‘假盒子’（this.vEle）一起滚动，而我们要保持列表不动，更新渲染数据，造成列表滚动的假象，就要逆向移动列表（.el-table__body）。计算列表（.el-table__body）中所有数据应占得高度height,创建一个div并设置高度为height用于撑开容器（.el-table__body-wrapper），出现滚动条，暂且称这个div为‘假盒子’（this.vEle）。需要全量展示列表数据，但数据量极大，会导致页面超级卡顿。
2025-01-15 15:02:54
318
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人