hhhxyyyzz的博客

原创 Leaflet.CanvasLayer.Field

Leaflet.CanvasLayer.Field 是一个 Leaflet 插件，它允许你在 Leaflet 地图上绘制基于栅格数据的图层。这些是 Leaflet.CanvasLayer.Field 的基本使用方法。你可以根据自己的需求进一步定制渲染和交互逻辑。

原创 token的无感刷新

上述流程中，刷新令牌的有效期要比访问令牌长，通常为较长的时间（例如7天），而访问令牌的有效期较短（例如15分钟）。服务器验证刷新令牌的有效性，并生成一个新的访问令牌和一个新的刷新令牌。新的访问令牌替换旧的访问令牌，并将新的刷新令牌返回给客户端。用户登录时，服务器生成一个访问令牌（Access Token）和一个刷新令牌（Refresh Token），并将其返回给客户端。当访问令牌过期时，客户端向服务器发送一个刷新令牌的请求。客户端使用新的访问令牌来继续访问受保护的资源。

原创 父子组件嵌套时候，生命周期的加载顺序

父组件：beforecreate。子组件：beforecreate。父组件：beforecreate。子组件：beforecreate。父组件：beforeMount。子组件：beforeMount。子组件：beforeMount。父组件：beforeMount。父组件：created。子组件：created。子组件：mounted。父组件：mounted。父组件：created。子组件：created。子组件：Mounted。父组件：Mounted。

原创 js的作用域链是什么

但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域。一般情况下，变量取值是到创建这个变量的函数的作用域中取值。这么一个查找过程形成的链条就叫做作用域链。

原创 说一说闭包，垃圾回收机制和内存泄漏

闭包是指一个函数可以访问它定义时作用域内的变量，即使这些变量在函数执行完之后也能被访问到。闭包使得函数可以保存其执行的上下文，因此，闭包也容易引发内存泄漏和垃圾回收机制问题。因此，为了避免内存泄漏的问题，我们需要在使用闭包时，一定要特别注意变量的生命周期，及时释放不再使用的变量引用，确保垃圾回收机制能够正常运作。

原创 数组常用方法

/ 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。// 7.filter() filter() 方法创建一个新的数组，过滤出数组中符合条件的所有元素，把这些元素放在新数组中返回。// 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。// 23. keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

原创 权限管理实现思路

登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。动态根据用户的权限算出其对应有权限的路由，通过router.addRoutes 动态挂载这些路由。后台还会返回一个权限表premission，之后根据这个权限表进行渲染不同权限的路由。noRequireAuto:True 代表无需权限直接渲染。manageFree:true无需权限直接挂载。

原创 vue2和vue3的区别

因此，在 Vue 3 中，获取到的 this 对象实际上是一个 Proxy 对象，它拦截了对组件实例的属性和方法的访问，从而实现了数据的响应式更新。这样的设计使得 Vue 3 在性能和开发体验方面有了很大的提升。1. 由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法。vue2中，可以在当前组件中，通过this.$refs.ref的值 获取当前组件内一切的元素 或者绑定了ref属性的子组件。

原创 TS和JS的区别

枚举代表的是一系列特定类型的对象 这是从别的编程语言派生出来的概念，所以我们不能用 js 的概念强加到它上面，其实枚举最好理解的就是一系列确定的常量。第三种情况：设置返回值类型为void，void:用来表示空，以函数为例，就表示没有返回值的函数,或者说 返回值为空 ，如果想要一点返回值都没有，设置返回值类型为never（永远不会返回结果）ts增加了重写，子类覆盖了父类中的属性或者是方法叫做重写 子类和父类同名的方法和属性，在子类中重新声明的时候，就覆盖了父类原本的内容））来控制类的成员的访问范围。

原创 vuex和Pinia的区别

一般来说，vuex中的流程是首先actions一般放异步函数，拿请求后端接口为例，当后端接口返回值的时候，actions中会提交一个mutations中的函数，然后这个函数对vuex中的状态（state）进行一个修改，组件中再渲染这个状态，从而实现整个数据流程都在vuex内部进行便于检测。当我们组件中需要用到state中多个参数时，使用解构的方式取值往往是很方便的，但是传统的ES6解构会使state失去响应式，比如组件App.vue,我们先解构取得name值，然后再去改变name值，然后看页面是否变化。

原创 vue-puzzle-vcode实现拖拽验证码

【代码】vue-puzzle-vcode实现拖拽验证码。

原创 Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘, or to add ali

找到tsconfig文件，更改为moduleResolution:'node'

原创 错误消息 “Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to a

你可以检查你的项目的 tsconfig.json 或者 webpack 的配置文件中关于模块解析的配置选项，确保这些选项已经正确设置。如果你使用的是 TypeScript，你可以尝试设置 “moduleResolution” 选项为 “node”，或者通过添加路径别名到 “paths” 选项来解决这个问题。这个命令将列出你项目中已安装的 Vue 模块，如果 Vue 模块已经安装，你将能够在列表中看到它的版本号和所在路径。请确保你的设置是正确的，并按照你的项目的实际情况进行修改。

原创 Mock模拟后台登录接口

3.接下来，代码使用了filter方法来筛选一个名为userPools的用户池数组。4.条件函数中，通过比较userMsg.name和数组中每个元素的name属性，来判断是否匹配。5.接下来对userArry的长度进行判断，如果userArry的长度不为0，说明用户输入的用户名存在，就可以走下一步了，对密码进行判断。2.在请求的主体部分，即req.body中获取到用户的登录信息，然后将其解析为一个JSON对象，赋值给userMsg变量。如果筛选结果为空，即未找到匹配的用户，则返回一个对象，其中包含状态码。

原创 无法找到模块“mockjs”的声明文件。解决方法

原创 vue3 页面跳转传参报错 router.query undefined ，vue3 没有 router.query

这里用的query来传递的，使用params也行。

原创 使用vite创建vue3项目出现找不到模块“./App.vue”或其相应的类型声明。

与 Vue CLI 不同，Vite 不自动为单文件组件引入类型声明文件。因此，在使用 TypeScript 编写 Vue 3 项目时，您需要手动为单文件组件引入类型声明文件。如果您使用了其他库或依赖，该库可能也需要单独的类型声明文件。文件时，应当将其视为 Vue 组件，并将其导入为。目录中为 Vue 单文件组件创建一个名为。这将告诉 TypeScript，当遇到。时就会自动为其引入类型声明文件。文件来为它们创建类型声明。

原创 this.$refs.editFromRef.validate

方法通常用于执行表单验证操作。具体的逻辑和实现方式取决于你的代码结构和所使用的表单验证库。时要确保子组件已经被渲染并且引用已经建立。另外，你也可以在组件的生命周期钩子函数。是一个 Vue.js 中用于通过引用调用子组件方法的方式。这样，当父组件渲染完成后，将会调用子组件的。提供了对组件及其DOM元素的直接访问。属性访问该子组件，并调用其暴露的方法。来确保子组件已被渲染才调用其方法。是一个子组件的引用，你可以通过。方法来执行表单验证操作。在父组件中，你可以通过。方法，对表单进行验证。

原创 npm和yarn命令对比

原创 v-on监听多个方法怎么写？

【代码】v-on监听多个方法怎么写？

原创 vue2如何进行逆向传值

父组件将值传递给子组件，叫做正向传值，子组件将值传递给父组件，叫做逆向传值；需要借助 自定义事件 2、vue.js 中允许正向传值，所以正向传值不需要条件触发，是主动的；逆向传值，是不允许的，需要主动（手动）触发。1.在父组件中，需要在data中设置一个空值用来接收子组件穿过来的值，如设置一个want:' ',2.在子组件中设置一个button按钮，用来主动出发事件监听。自定义事件传递的值，会作为getVal的参数来传递。此处的change是自定义的，放到父组件中接收。

原创 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

我初学webpack,在全局安装完webpack之后，使用 webpack -v 检查版本号会出现：webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 这样的报错。最后在一个评论区 看见别人说 使用 npx webpack -v 我试了一下成功了。也成功的打包了我的一个js文件 同样是在前面加上npx。看了很多别人的解决办法，都不成功。

原创 使用iframe引入头部底部，底部里面插入点a链接不会跳转新页面

使用iframe引入头部底部，底部里面插入点a链接不会跳转新页面，而是在iframe框里面显示新页面 解决：在iframe引入的页面里。

原创 判断是pc还是移动浏览器

通过JavaScript判断终端类型。

原创 git push时出错error: RPC failed； HTTP 504 curl 18 HTTP/2 stream 7 was reset

使用了这段代码之后成功了。

原创 nodemon安装和启动服务

1.安装2.启动。

原创 JS的执行机制总结

单线程：JavaScript是单线程的，意味着它一次只能执行一个任务。同步任务进入主线程后一直执行（从上往下），直到主线程空闲时（表示同步任务执行完毕）,此时才会去任务队列(event queue)中查看是否有可执行的异步任务，如果有就将任务队列中的异步任务推入主线程中进行执行。总体来说，JavaScript的执行机制是基于事件循环和异步机制的，通过单线程的方式处理任务，并利用闭包和作用域来管理变量和函数的访问。异步任务执行的时候，若时间一样，从任务队列那里从上往下执行，如果时间不一样，时间短的先执行。

原创 说一说js的面向对象

原型是一个共享的对象，所有通过构造函数创建的对象都可以访问和共享原型对象中的属性和方法。继承允许一个对象继承另一个对象的属性和方法，实现代码的重用和扩展性。封装允许将一些数据和方法隐藏在对象内部，只提供对外部的接口，提高代码的安全性和可维护性。除了构造函数和原型，JavaScript还引入了ES6中的类(class)语法，可以更简洁地定义和创建对象。总的来说，JavaScript是一种支持面向对象编程的语言，通过对象构造函数、原型和类，我们可以利用面向对象的思想来组织和管理我们的代码。

原创 使用循环生成一个数组，并且输出为金字塔形状

1、使用循环生成这样一个数组：['*', '**', '***', '****', '*****', '******', '*******', '********']

原创 VScode如何设置自动格式化

第一步先找到vscode的设置。第二步搜索设置，把下面的勾上。