自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(74)
  • 收藏
  • 关注

原创 Vue 离线地图实现

然后通过 open 打开镇文件夹中的 .kml 文件,即可实现镇和市的合并json操作。将 json 数据复制放进Vue 项目的 /static/map.json 地址中。点击地图缩放至想要的市区域,通过右侧的链接打开网址,复制json数据。最后将合并好的json数据放到 map.json 文件夹中等待使用。首先将市json数据复制到这里。选择你想要的镇数据,点击下载。网址合并json数据。main.js 注册。

2024-05-19 22:34:27 710

原创 vue-treeselect 的基本使用

vue-treeselect是一个树形的下拉菜单,至于到底有多少节点那就要看你的数据源有多少层了,挺方便的。下面这个这个不用多说吧,下载依赖。

2024-04-16 17:24:29 382

原创 鼠标选区元素

【代码】鼠标选区元素。

2024-04-10 09:48:37 173

原创 实现 select 中嵌套 tree 外加搜索

【代码】【无标题】

2024-04-01 17:35:54 389

原创 华为云服务器远程登录

我们在登录的时候,登录账号默认为 root ,密码是自己设置的,如果忘记了也可以选择右下角的重置密码。这里忘记了密码是什么了,我们可以通过命令bt 来调出所有的宝塔操作。通过 命令 bt default 来调出宝塔的登录地址。通过访问宝塔登录地址后,来到这个页面。我们这里采用华为云服务器的远程登录。

2024-03-08 15:26:46 243

原创 Vue2 echarts 实现自适应

【代码】Vue2 echarts 实现自适应。

2024-02-21 16:30:03 485

原创 表格封装~

【代码】表格封装~

2024-01-11 16:53:10 502 1

原创 Vue3 多语言

【代码】Vue3 多语言。

2024-01-10 20:48:47 532

原创 触底加载上拉刷新

【代码】触底加载上拉刷新。

2023-11-30 23:43:44 162

原创 【Vue3】响应式原理

答:数据是可以进行观测的,也就是说在读取和设置的时候可以劫持它来做其他操作;注意:数据响应式和视图更新是没有关系的!!!响应式只是一种机制,一种数据变化的侦测机制,实现这种机制的方法也不是唯一的,就例如vue2和vue3实现响应式的方法是不同的。

2023-10-18 11:41:54 235

原创 JS sort排序

sort() 方法用于对数组的元素进行排序,并返回数组。排序顺序可以是按字母或数字,也可以是升序(向上)或降序(向下)。默认排序顺序是根据字符串UniCode码。语法:Array.sort(sortBy);参数sortBy可选,用来规定排序的顺序,但必须是函数。

2023-10-13 15:59:58 122

原创 JS 原生实现触底加载

监听滚动事件,当滚动接近底部时触发加载更多操作。加载更多数据后,将新数据附加到容器中。创建一个容器来存储列表项。

2023-10-13 15:04:31 303

原创 JS 原生实现上拉刷新

2. 监听`touchstart`、`touchmove`和`touchend`事件以追踪用户的滑动动作。3. 当用户滑动超过一定的距离时,触发刷新操作,通常通过改变DOM元素的状态或添加加载动画。4. 当数据加载完成后,通过JavaScript更新DOM内容,重置下拉刷新状态。1. 创建一个包含下拉刷新内容的容器,通常是一个`<div>`元素。

2023-10-13 10:39:37 120

原创 JS 实现图片懒加载

在HTML中,为要进行懒加载的图片元素添加一个占位符,通常是一个小尺寸的透明图片或者一个简单的`<div>`元素。- 为每个要懒加载的图片元素添加一个自定义数据属性,例如`data-src`,用于存储原始图片的`src`属性的值。实现图片懒加载的思路是延迟加载页面中的图片,只有当用户滚动到图片可见区域时才加载图片,以减少初始页面加载时间和网络带宽的使用。- 当图片进入可见区域时,通过JavaScript将`data-src`属性的值设置为`src`属性,从而加载原始图片。这会触发浏览器下载图片。

2023-10-13 10:24:17 244

原创 MVVM 与 MVC区别和应用场景?

在MVVM的框架下,视图和模型是不能直接通信的,它们通过ViewModal来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View。这样就把数据更新分的比较明确了。

2023-10-12 14:21:55 324

原创 Vue2 router详解

路由(英文: router)就是对应关系Hash地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址:https://router.vuejs.org/zh/① 能够知道如何在 vue 中配置路由② 能够知道如何使用嵌套路由通过 children 属性进行路由嵌套③ 能够知道如何实现动态路由匹配。

2023-10-12 11:45:34 974

原创 Vue2 Watch的语法

watch第一次绑定值的时候不会执行监听,如果需要第一次就执行监听 则需要设置:immediate: true。

2023-10-11 21:16:37 495

原创 Ts interface 和 type 的区别?

提示:刚学习TS 的新手看到type 和 interface 会分不清楚什么场景下怎么使用,所以写一篇文章总结一下。

2023-10-10 15:43:24 72

原创 Docker 自动化部署(保姆级教程)

jenkins介绍jenkins部署Vue项目docker安装JenkinsJenkins:是一个开源的、提供友好操作界面的持续集成(CI)工具,主要用于持续、自动的构建的一些定时执行的任务。Jenkins用Java语言编写,可在Tomcat等流行的容器中运行,也可独立运行。

2023-09-24 17:26:04 2701 1

原创 Docker 部署前端项目(非自动化)

前端上线的项目在路由上可能出现刷新后出现404的情况,这时,我们需要在nginxConf文件中的conf.d文件下的default.conf文件配置一行代码。首先你需要有nginx配置文件,你可以执行以下命令获取配置文件。

2023-09-23 10:07:30 189

原创 CSS 小球随着椭圆移动

CSS 小球随着椭圆移动。

2023-09-21 18:54:23 310 1

原创 单点登录原理

在企业发展初期,系统设计不多,可能只需要一个系统就可以满足业务的需求,用户呢,也只需要用账号密码登录就可以完成验证,但是随着业务迭代的发展,系统架构也随之迭代,演变越来越多的子系统,用户每进一个系统呢就需要重新进行登录,为了解决这个问题,就产生了单点登录。用户登录成功之后,会与sso认证中心及各个子系统建立会话,用户与sso认证中心建立的会话称为全局会话,用户与各个子系统建立的会话称为局部会话,局部会话建立之后,用户访问子系统受保护资源将不再通过sso认证中心,全局会话与局部会话有如下约束关系。

2023-09-21 16:43:27 107 1

原创 JS 手写call、apply和bind方法

apply、call和bind都是系统提供给我们的内置方法,每个函数都可以使用这三种方法,是因为apply、call和bind都实现在了Function的原型上(Function.prototype),而他们的作用都是给我们函数调用时显式绑定上this。

2023-09-21 09:53:11 113

原创 JS 继承

原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针,而实例则包含一个原型对象的指针。寄生组合式继承,借助解决普通对象的继承问题的Object.create 方法,在前面几种继承方式的优缺点基础上进行改造,这也是所有继承方式里面相对最优的继承方式。相比第一种原型链继承方式,父类的引用属性不会被共享,优化了第一种继承方式的弊端,但是只能继承父类的实例属性和方法,不能继承原型属性或者方法。

2023-09-20 21:24:50 293

原创 JS Ajax 封装

Ajax(Asynchronous JavaScript And XML)是2005年新出现的技术,它的出现是为了解决这样一个场景:整个页面中,只有一小部分的数据需要进行更新,按照传统的前后端交互,我们需要向服务器请求该网页的所有数据,然后再在客户端重新渲染,这无疑是非常低效的操作。因此,Ajax就可以做到只向服务器请求我们想要的那一小部分数据,而不用请求全部数据,进而在刷新整个页面的前提下更新那部分的数据。

2023-09-20 10:27:08 605

原创 JS 原型的原理

说白了就是说,它会先去找实例本身,如果有,那自然最好。如果没有,没关系,我可以找实例所对应的那个类,它的原型,然后找它的原型上有没有。说白了,先在自己身上找,没有就找它爹要,找他爹其实就是在找它爹的原型,还没有,就找它爷爷,一直找到 Object 身上,还没有,就是 undefined。而现在,我们有了 class 之后,理论上,在我写这个类的时候,其实是用不着原型了,但是原型它自己也有很大的作用。这个过程其实特别的简单,当然这个过程不用我们来完成,都是由 js,由语言自身来支撑这些功能的,不用我们来做。

2023-09-19 17:31:28 110

原创 JS 采用JSON.parse实现深拷贝时出现的问题?

综上,虽然 JSON.parse(JSON.stringify()) 方法是一种简单易用的实现深拷贝的方法,但它并不完美,使用时需要注意其缺陷。JSON.stringify() 方法无法处理某些特殊的 JavaScript 对象,如 RegExp、Error、Date 等,这些对象会被转换成空对象。JSON.stringify() 方法无法处理 JavaScript 中的函数和 undefined 值,这些值会被忽略掉,因此在使用该方法时需要注意。

2023-09-19 16:09:34 480

原创 JS parseInt 方法

由于 parseInt 第二个参数的推算并不稳定,所以建议在使用 parseInt 的时候第二个参数也添加上。在捋捋规则:第一个参数默认为字符串类型,不是字符串类型,会被toString;如果字符串无法解析,直接返回NaN;第二个参数指定为 0 或未指定,会根据第一个参数的格式,进行推断。基数的取值范围为 2-36;基数超出范围NaN;来都来了来都来了,顺便看一下和parseInt比较相似的parseFloatparseFloat比较简单,只有一个参数,就是需要解析的字符串。对于。

2023-09-19 14:47:59 271

原创 JS parseFloat 方法

parseFloat方法是将字符串进行转化为浮点数字符串中符合科学计数法则会进行转化字符串中中包含不能转化为浮点数的字符,那么就将已经转化好的部分返回parseFloat会自动过滤字符串前后空格如果参数不是字符串,或者第一个字符不能转化为浮点数,那么返回NaNparseInt不同于Number。

2023-09-19 14:38:13 3363

原创 JS new操作符具体做了什么?

在JavaScript中,“new” 操作符用于创建一个新的对象实例。具体来说,“new” 操作符会执行以下步骤:JavaScript中的new操作符是一个非常重要的操作符,它用于创建一个新的对象实例。

2023-09-18 19:11:55 491

原创 JS 如何判断一个元素是否在可视区域?

HTMLElement.offsetParent返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table,td,th,body元素。DOMRect 可以理解为将元素看出一个矩形,该对象包含了该矩形的位置、大小信息,可以获得页面中元素的左,上,右和下分别相对浏览器视窗的位置。有时,我们希望某些静态资源(比如图片),只有用户向下滚动,它们进入视口时才加载,这样可以节省带宽,提高网页性能。这样设置以后,不管是窗口滚动或者容器内滚动,只要目标元素可见性变化,都会触发观察器。

2023-09-18 09:54:31 709

原创 JS 原型和原型链

这是js对象中(null和undefined除外)都会存在的属性,这个属性会指向该对象的原型(注意:__proto__因为浏览器兼容性问题,不一定都可以获取到,应当使用Object.getPrototypeOf函数作为获取对象原型的标准API)。在JavaScript 中,每个对象通过__proto__属性指向它的原型对象,这个原型对象又有自己的原型,直到某个对象的原型为 null 为止,这种一级一级的链结构就称为原型链。看下面这副图,通过打印构造函数中的teach方法,能够打印出结果。

2023-09-16 12:06:21 125

原创 JS 垃圾回收机制

在JavaScript中,垃圾回收(GarbageCollection)是一种自动内存管理机制,它可以自动地识别不再使用的变量和对象并将它们从内存中清除,以释放内存空间。JavaScript中的垃圾回收器会定期扫描内存中的对象,标记那些可达对象和不可达对象。1. 可达对象指的是当前代码中正在被使用的对象2. 不可达对象指的是已经不再被引用的对象。垃圾回收器会将不可达对象标记为垃圾对象,并将它们从内存中清除。

2023-09-15 20:58:00 214

原创 JS 深浅拷贝

深拷贝与浅拷贝在其它语言中也经常被提及到,在实际项目开发过程中也常常需要区分当前使用的到底是深拷贝还是浅拷贝,有时候在该使用深拷贝的地方,我们使用了浅拷贝,会导致深藏不露的bug。

2023-09-15 15:32:43 114

原创 JS for...in 和 for...of 的区别?

for...in和for...of都是JavaScript中遍历数据的方法,让我们来了解一下他们的区别。使用 for…in 迭代对象的属性名,适用于对象。使用 for…of 迭代集合的值,适用于数组、字符串等可迭代对象。在迭代数组时,通常使用 for…of 而不是 for…in,因为 for…in 可能会迭代到数组的原型链上的属性,而for…of 不会。在迭代对象属性时,可以使用 hasOwnProperty方法来检查属性是否是对象自身的属性,以避免迭代到继承的属性。

2023-09-14 21:24:50 175

原创 处理数据 根据 pid 添加到父级 children

【代码】处理数据 pid 找父级 children。

2023-09-14 17:24:41 156

原创 JS Set和Map数据结构

前言:如果要用一句来描述,我们可以说Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构什么是集合?什么又是字典?集合区别?

2023-09-14 15:54:14 284

原创 JS Array 操作方法合集

1.当reduce()方法的第二个值为空时,第一次循环方法中的第一个参数(prev)为数组的第一项值,第二个参数(cur)为数组的第二项值,反之,第一次循环方法中的第一个参数(prev)为reduce的第二个参数值,第二个参数(cur)为数值的第一项值。它们都返回一个遍历器对象,可以用for…flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

2023-09-13 22:18:14 165

原创 上线node项目

端口号是设置的5002。

2023-09-11 16:56:18 135

原创 实现3D照片墙效果

【代码】实现3D照片墙效果。

2023-09-08 15:32:01 108

空空如也

空空如也

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

TA关注的人

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