李子不会理-CSDN博客

原创 VUE3 请求拦截器响应拦截器

1，导入axios （使用axios进行接口的请求，页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如：判断token，设置请求头。如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。所以axios为开发者提供了这样一个API：拦截器。

2023-02-13 14:37:56 2242

原创 VUE 3 防抖和节流

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率，规定你在事件触发一段时间内，只允许执行一次。防抖：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法，当你点击一个事件操作停止后才运行后面代码。在你需要调用页面先import引入，就可以成功啦。vue3 ，vite 项目中。

2023-02-13 14:12:28 631

Promise构造函数接收一个函数作为参数，也就是回调函数；该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数，reject作为失败的回调函数。先创建一个promise对象，接着调用then方法，then方法返回结果是Promise对象，对象状态由回调函数的执行结果决定。promise是ES6新建的一个封装异步操作的函数，一般拿来封装ajax。then方法是可以链式调用来处理一些回调地狱的问题。控制失败的回调，类似于then的第二个参数。

2022-10-10 19:16:00 141

原创 axios

可以解决：1.使得请求的url地址统一管理，2.往一些接口传递headers。3.设置请求拦截器（前端给后端发数据），headers给后端传递相应的token。在vue中下载：npm install axios -S。引入：import axios from ‘axios’Axios是基于promise对ajax的数据封装。4.响应拦截器（后端给前端返回数据）2.创建axios对象。

2022-10-05 19:51:56 338

原创 Vuex

vuex是专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理，可以适应于任意组件间通信。2.来自不同组件的行为改变同一个状态。1.多个组件依赖同一个状态。

2022-10-01 23:21:08 187

原创插槽 slot

通过使用插槽，渲染外层样式，内部样式还是由父容器提供，使用插槽可以使父容器更加灵活更加具有可复用性，现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。使用slot，来对内容进行插槽设置，默认插槽，若一个组件接受父组件的内容，一般是通过props来进行一个接受，然后在进行调用渲染。在传值组件处，使用v-slot:XXX(这个在template才可以用）slot（在div里面用）进行命名，在接受处使用name绑定那个名字。给插槽动态绑定的方法，数据，可以传递给插槽的使用者；

2022-10-01 22:16:59 106

原创 vue 组件

1、将组件内容设置好，2、通过Vue.component(‘组件名’，组件内容) 注册全局组件。注册好后可以使用在任何新创建的Vue根组件的模板中。组件的data必须是一个函数，确保每个实例可以维护一份被返回对象的独立的拷贝，也就是任何一个组件的改变不会影响到其他组件。1、设置组件内容，2、通过components 在你需要局部调用的组件位置中注册局部组件。父传子：将父组件的内容传递到子组件中（建议动态绑定，静态绑定传进去就是个字符串）1.在子组件内绑定参数 2.子组件接受并处理。

2022-09-26 17:20:29 198

原创生命周期钩子函数

created：实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空数组常用于简单的ajax请求，页面的初始化。updated：虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作避免在这个钩子函数中操作数据，可能陷入死循环。beforeupdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

2022-09-26 16:19:09 114

原创 Typescript

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型（就是在你定义后面的加上你想要的数据类型，后面将变量进行值修改，但是变量类型不能改动）any是在我们编程阶段还不清楚的类型的变量指定的一个类型，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。接口：在TypeScript中，接口的作用就是命名这些类型和在你的代码和第三方代码之间建立契约。类实现接口必须具有接口得属性和方法,方法一般情况为一个没有方法体的方法。接口是需要实现的类是可以继承。

2022-09-21 15:50:55 173

原创迭代器（iterator）

1.创建指针对象，指向当前数据结构的起始 2.第一次调用指针对象next方法，可以将指针指向数据结构的第一个成员 3.第二次调用，指向下一个，一直指导数据结构结束位置。iterator 是一种接口，为不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，可以完成遍历操作；可以用keys values entries 来检查是否为iterator ,否返回is not iterable。且iterator接口主要是供ES6中的for of 来消费。

2022-09-19 16:41:24 291

原创 ES6 类

静态属性和静态方法是定义在类【构造函数】上的，所以可以通过类【构造函数】直接访问。在静态方法中，this指向当前类【构造函数】，静态方法是构造函数的私有属性，并不是公共属性。constructor，是类的默认方法，创建类的实例化对象时候被调用。ES6提供了类Class这个概念，作为对象的模板。定义一个类通过class关键字，ES6的类可以看成是构造函数的另一种写法。class 的本质是 function。如何去定义一个类：1.不可重复声明，2.类定义不会被提升，所以使用前必须进行类的定义，否则就会报错。

2022-09-15 17:01:39 102

原创 Tcp和UDP的区别

也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达;并且因为 tcp 可靠，面向连接，不会丢失数据因此适合大数据量的交换。（3）TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。（1）TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。（4）TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。（6）TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

2022-09-14 21:59:59 495

原创状态码分析

产生原因：前端提交数据的字段名称和字段类型与后台的实体没有保持一致前端提交到后台的数据应该是 json 字符串类型，但是前端没有将对象 JSON.stringify 转化成字符串。（9）304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个 304 状态码。（4）404：Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面。

2022-09-14 21:58:15 229

原创 ES6 解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

2022-09-14 15:30:06 307

原创 ES6 模块化

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。1、CommonJS 模块输出的是一个值的拷贝/复制，ES6 模块输出的是值的引用。每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口.

2022-09-13 18:46:23 133

原创 JavaScript 函数调用

call：简单的说，A.call(B) 就是使得A可以身上可以使用B的属性，使得A披上了B的假面。apply 和call区别是后面多传递的参数要使用数组来包含。函数名.apply(执行环境对象,实参列表数组);函数名.bind(执行环境对象)(实参列表);函数名.call(执行环境对象,实参列表);后三种方法作用类似，都是改变this的指向。bind 是需要一个参数来接受返回值。函数名(实参列表);

2022-09-08 19:23:00 403

原创 HTTP和HTTPS

http:超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务端请求和应答的标准，用于www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。HTTP传输的内容数据都是未加密，https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。http 的连接很简单，是无状态的；但是，HTTPS协议需要ca证书，费用较高，一般情况下http协议的端口为80，https的端口为443。

2022-09-05 23:32:35 445

原创 for in 与 for of

自定义变量名”用来指定是数组的元素索引，也可以是对象的属性。for of 和for in它们两者都可以用于遍历，不过。for(自定义变量名 in 数组/对象){for..in用于遍历数组或者对象的属性。在数组中自定义变量是存储了数组的索引值。遍历的是数组的索引（即键名），而。在对象中，存储了其键值。遍历的是数组的索引（遍历的是数组元素值（或数组、字符串的下标。

2022-09-01 18:34:34 377 1

原创通讯，跨文档数据传输

H5提供了网页文档之间互相接收与发送消息的功能。当在a页面中通过window.open方法打开b页面，或者在a页面中通过iframe嵌套b页面，我们想让a中的数据传递到b中就可以使用跨文档消息传输。第二个页面，这个页面是第一个的内敛样式。通过第一个页面打开窗口，......

2022-08-31 18:02:43 82

原创 Web 存储

使用sessionStorage 进行会话存储，页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面。：cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；：使用localStora 进行本地存储，将数据存到本地磁盘中，即使浏览器关闭数据依然在，特点:将数据存储到本地磁盘即使选项卡和浏览器关闭数据依旧存在，除非手动删除否则数据一直存在本地磁盘中传输得数据5M甚至更大。...

2022-08-31 16:26:35 63

原创线性渐变和径向渐变

声明一个渐变对象前三个参数小圆心x轴开始位置 y轴开始位置半径后三个参数大圆心x轴开始位置 y轴开始位置半径（其他于线性渐变一样）线性渐变（默认上到下，或者加to 表明方向，也可以用度数表示方向用deg。获取径向渐变则：使用createRadialGradient；使用canvas，在js中绘制线性渐变。.........

2022-08-30 15:24:02 406

原创 canvas 画布

绘制轮廓矩形参数 x轴起始位置 y轴起始位置宽高。canvas在页面设置出一块空白位置，为我们绘制涂写。

2022-08-30 15:04:42 1145

原创 Vue的声明写法

关于data的两种写法，各有好处，运用在不同场景。但是写组件的时候必须要用函数式，不然会报错（并且尽量少写箭头函数，这个时候this的值将指向的不会是Vue实例）声明Vue中可以用new Vue来创建一个Vue实例我们一般的写法如下。也可以改用对象的写法；这个方法更加推荐，方法比较灵活。...

2022-08-29 20:01:42 1115

原创 AJAX GET和POST

POST：1.偏向提交的语义化；2.参数格式多样，但是需要特殊说明；3.理论传输内容大小上没有限制。GET：1.偏向获取的语义化；2.参数是查询字符串；3.传输内容不能过大；ajax中GET和POST都是后端人员进行数据传输的接口。...

2022-08-29 17:21:12 67

原创 HTML flex

左右/等比例划分* 在弹性盒对象的元素中的各项周围留有空白 */ align-items:XX;/* 弹性盒不允许挤压 */ flex-wrap: wrap;display：flex 将一个div定义，适合用于移动端布局。会默认将子元素浮动。若设置对象为span则会自动转换为div order：x （顺序越大越往后） flex：x （剩余高度由其补满 x为其占据倍数）} 使得滚动条消失。...

2022-08-29 16:26:29 233

原创 DOM 初步认识

通过document对象调用：1.getElementById() 通过ID属性来获取一个元素节点对象 2.getElementsByTagName() 通过标签名获取一组元素节点对象 3.通过getElementsByName()通过name属性获取一组元素节点对象。clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。tagName：返回当前元素的标签名。...

2022-08-29 16:19:40 84

原创 JSON和JS区别

JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号。JSON（格式字符串）和 JS 对象（也可以叫JSON对象或 JSON 格式的对象）互转（JSON.parse 和 JSON.stringify）。JSON.stringify(obj) 将对象序列化为JSON字符串,只能序列化对象可枚举的自有属性。中使用$.parseJSON()来讲json对象转换为js对象，使用$.param()进行序列化。对象序列化是指将对象的状态转换为字符串，也可以反序列化，将字符串还原为对象函数。...

2022-08-26 18:27:46 3766

原创 JavaScript BOM

Location：代表当前浏览器的地址栏的信息，通过Location可以获取地址栏的信息，或者操作浏览器跳转页面。Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器，但是由于历史原因，其大部分属性都已经不能帮助我们识别浏览器了。这些BOM对象在浏览器中都是做为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。Screen：代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关的信息。BOM：浏览器对象模型；BOM可以使得我们通过JS来操作浏览器。

2022-08-25 11:15:05 150

原创 JavaScript 原型

原型对象也是对象，所以它也有原型，当我们使用一个对象的属性或者方法时候，会先在自身寻找，自己有则使用，没有去原型对象中寻找，不行就在去原型的原型中寻找，直到找到object对象的原型，Object对象的原型还是没有，就返回undefined。（以后我们可以在创建函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使得每一个对象都具有这些属性和方法了）检查对象中是否含有某个属性时，如果对象中没有但是原型中有，要会返回true。

2022-08-20 23:30:16 130

原创构造函数深入了解

因此对前面的案例而言，person1 和 person2 都有名为 adi()的方法，但这两个方法不是同一个 Function 实例。我们把被创建的对象称为“产品”，把创建产品的对象称为“工厂”。如果要创建的产品不多，只要一个工厂类就可以完成，这种模式叫“简单工厂模式”。但是勒，也可以改成构造函数的方法来定义,区别就是：这个没有显式的创建对象，并且将方法属性都赋值给了this，也没有return。但是使用原型模式会改变原生的对象类型，可能会发生命名冲突，更好的是采用构造函数和原型模式的组合方式。...

2022-08-18 18:55:35 40

原创 JavaScript 数组

push（向数组的末尾添加一个或者多个元素，并且返回新长度）/pop（用于删除最后一个数组元素，并返回删除元素）/ shift（把第一个元素删除，并且返回第一个元素的值）/unshirt(（向开头添加一个或者多个元素，并返回新长度）join（将数组中的所有元素转换成一个字符串，并且可以通过指定的分隔符进行分隔）如果数组中有对象，函数等，join转换的是它的原型，可以选用序列化工具进行转换。forEach（数组的每一个元素都执行一次回调函数）用于调用速度的每一个元素，并且将元素返回给回调函数。...

2022-08-13 16:21:19 190

原创 JavaScript 函数

函数是由事件驱动的或者当他被调用执行的可重复使用的代码块。函数实际上也是对象，每一个函数都是function类型的实例，函数名实际上也是一个指向函数对象的指针。：回调函数实现异步编程，例如：们可以一边读取文件，一边执行其他命令，在文件读取完成后，我们将文件内容作为回调函数的参数返回。JavaScript函数有个内置的对象arguments对象，其包含了函数调用的参数数组（将传递进来的参数当成一个数组），本身相当于一个类数组；（最常见的闭包的创建方法就是在一个函数内部创建另一个函数）传递进去的值为形参；...

2022-08-12 13:07:50 139

原创 JavaScript 对象

这个属性不包含数据，包含一对get和set方法（双向绑定的原型），但是访问器不能直接定义必须使用object.defineProperty（）方法来定义。JavaScript的对象也是一个变量，但是对象可以包含多个值（使用键值对的写法 key：value）：（个人看法：是对使用object.defineProperty 创建的对象内在属性的设置；【Enumerable 】设置定义属性能否通过for in 循环来返回属性；对象的方法定义了一个函数，并作为对象的属性存储。对象的属性之间一定要用逗号隔开;..

2022-08-11 19:21:56 227

原创 JavaScript运算符

5、undefined 除了与字符串进行累加时有效（undefined 视为字符串"undefined"处理），其他情况皆返回 NaN。++放在前面先累加后赋值，放在后面先赋值后累加（递减（--）也是一样的用法）4、bool 类型与 null 类型进行累加时，视为其与整数类型累加处理。条件1：条件2 当X中的数据执行为真时执行条件1 当为假时执行条件2。2、bool 类型在与数字类型进行相加时，视为 0 或者 1 处理。3、null 类型与数字类型进行累加时，视为 0 处理。...

2022-08-08 20:00:47 185

原创 JS 初步认识总结

字符串（String）数字（Number）布尔（Boolean）空（Null）未定义（Undefined） symbol（是Es6新加的数据类型，表示独一无二的值）（let const是ES6新增的语言，相比var ，其初始化不能为空值，不会进行预解析，不能重复定义变量，有块级作用xiab。:使用关键字function来定义函数，使用return语句返回函数值，使用return，函数将会停止，并且返回函数值。：对象（object）数组（array）函数（Function）正则（RegExp）...

2022-08-08 19:17:39 87

空空如也

空空如也