- 博客(41)
- 收藏
- 关注
原创 计算机网络HTTP全讲解,让你透彻掌握HTTP协议(三)http长短连接/代理/网关/缓存/内容协商机制/断点续传
如果expires过期,浏览器请求服务器的时候就带上了文件最新修改时间,就是在请求头里加上if-Modified-Since,服务器会把请求头里的if-Modified-Since与服务器上的文件最新修改时间Last-Modified进行对比,如果他俩不相等,服务器就会去查找最新的f.js,同时再次返回expires,f.js ,last-modified;q=0.0, nl;第一次请求的时候,浏览器向服务器请求一个叫做f.js的文件,服务器通过响应头返回了一个约定时间expires,同时返回f.js。
2024-07-29 15:44:22 802
原创 计算机网络HTTP全讲解,让你透彻掌握HTTP协议(二)状态机制/编码和解码/基本认证
ASCII编码是最早的编码规范之一,仅能表示128个字符,包括英文字母和数字。由于其简单性和高效性,ASCI编码在许多应用中仍然被广泛使用。GBK编码专为汉字设计,能够有效表示中日韩字符。它的每个字符都占用两个字节,适合在中文环境下进行数据传输和存储。iso 8859-1编码是一个常用的默认编码,但它不支持中文字符,易导致乱码。很多时候,Tomcat服务器也使用这一编码方式,这对处理多语言内容造成了困难。unicode编码是国际标准化组织制定的通用编码规范,可以表示全球所有字符。
2024-07-25 13:33:02 441
原创 计算机网络HTTP全讲解,让你透彻掌握HTTP协议(一)TCP/IP协议族/HTTP数据传输过程(三次握手)/特点/报文结构分析/请求方法/状态码
客户端收到,这样客户端就能得出一个结论,首先服务端的接受能力正常,因为它接收到了上一次自己发送的网络包,它的发送能力也是正常的,因为它发送了一个网络包,同时也确认了自己的第一次发送正常,第二次的接收能力也正常。每层协议都将在我们的上层协议的基础之上加上自己的头部信息,链路层还会加上尾部信息,以此来实现所有层的一个数据封装。客户端可以用trace方法查询发送出去的请求到底是怎样被加工修改,这是因为请求想要连接到原目标服务器的时候,可能会通过代理中转,trace方法就是用来确认连接过程中发生的一系列的操作。
2024-07-16 17:01:10 544
原创 vue3的响应式原理
Vue 会在“next tick”更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个“tick”才一起执行。2.不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。
2024-07-15 15:27:33 278
原创 vue3中的props和emit
首先我们要明确props和emit是在父子组件(嵌套组件)中使用的。想要在父组件中渲染出子组件里的内容,需要在父组件中导入子组件,并在模板中渲染子组件。那父子组件中如何通信呢?就需要使用到props和emit。
2024-07-15 14:21:54 384
原创 大事件管理系统(vue3)compositionAPI/pinia/pinia持久化处理/Element Plus/pnpm包管理器/Eslint+prettier/husky(Git hooks)
在线演示:https://fe-bigevent-web.itheima.net/login接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835接口根路径: http://big-event-vue-api-t.itheima.net本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus一些优势
2024-05-22 16:43:10 1290
原创 Vue3新特性之组合式API/setup选项/ref和reactive/computed/watch/生命周期函数/父子通信/模版引用/provide和inject
父传子父传子的过程中通过什么方式接收props?defineProps( { 属性名:类型 } )setup语法糖中如何使用父组件传过来的数据?const props = defineProps( { 属性名:类型 } )props.xxx子传父子传父的过程中通过什么方式得到emit方法?defineEmits( [‘事件名称’] )怎么触发事件emit(‘自定义事件名’, 参数)
2024-05-18 10:22:54 935
原创 移动端智慧商城项目(vue2)之组件库vant/移动端vw适配/request封装/storage封装/api请求封装/请求响应拦截器/嵌套路由配置/路由导航守卫/路由跳转传参vuex分模块管理数据
接口文档:https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080演示地址:http://cba.itlike.com/public/mweb/#/目标:查看项目效果,明确功能模块 → 完整的电商购物流程1.安装脚手架 (已安装)2.创建项目选项手动选择功能选择vue的版本是否使用history模式选择css预处理选择eslint的风格 (eslint 代码规范的检验工具,检验代码
2024-05-14 19:55:21 929
原创 vue2(7)之vuex使用/state状态//mutations修改数据/getters/模块化module/获取模块内的数据state&getters与方法
目标:明确Vuex是什么,应用场景以及优势state: {count: 0},// 定义mutations})getters: {// getters函数的第一个参数是 state// 必须要有返回值,返回值就是getters的值// }
2024-05-06 17:47:33 1457
原创 vue2(6)之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint
router-link的两个高亮类名 太长了,我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面?查询参数传参(多个参数)动态路由传参(一个参数,优雅简洁)keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue
2024-05-06 12:54:05 792 1
原创 vue2(5)之自定义指令v-focus&v-color&v-loading/默认插槽/具名插槽/作用域插槽/路由vueRouter基础使用/路由的封装与抽离
这都是Vue给咱们内置的一些指令,可以直接使用自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念:自己定义的指令,可以封装一些DOM操作,扩展额外的功能全局注册// // 1. 全局注册指令// inserted 会在 指令所在的元素,被插入到页面中时触发// el 就是指令所绑定的元素el.focus()})局部注册//在Vue组件的配置项中"指令名": {// 可以对 el 标签,扩展额外功能el.focus()
2024-05-04 23:44:27 1053
原创 vue2(4)之scoped解决样式冲突/组件通信/非父子通信/ref和$refs/异步更新/.sync/事件总线/provide和inject
style的默认样式是作用到哪里的?scoped的作用是什么?style中推不推荐加scoped?data写成函数的目的是什么?组件通信,就是指组件与组件之间的数据传递组件的数据是独立的,无法直接访问其他组件的数据。想使用其他组件的数据,就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么?父向子子向父组件上 注册的一些 自定义属性1.非父子组件传值借助什么?2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法。
2024-05-02 22:40:30 910
原创 vue2(3)之vue生命周期钩子/工程化开发脚手架/组件化开发/组件的局部注册和全局注册
Vue CLI 是Vue官方提供的一个全局命令工具可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】虽然脚手架中的文件有很多,目前咱们只需认识三个文件即可main.js 入口文件App.vue App根组件index.html 模板文件整个应用最上层的组件,包裹所有普通小组件App组件包含哪三部分?1.全局注册组件应该在哪个文件中注册以及语法是什么?① 局部注册:(1) 创建.vue组件 (单文件组件)
2024-05-02 11:58:18 731
原创 vue2(2)之watch 侦听器/computed 计算属性/指令修饰符 / v-bind对于样式操作的增强 / v-model应用于其他表单元素
所谓指令修饰符就是通过指明一些指令后缀 ,不同的后缀封装了不同的处理操作 —> 简化代码代码演示:3.v-model修饰符 ——去除首位空格-——转数字4.事件修饰符 ——阻止冒泡——阻止默认行为——可以连用 即阻止事件冒泡也阻止默认行为三、v-bind对样式控制的增强-操作class为了方便开发者进行样式控制, Vue 扩展了 v-bind 的语法,可以针对 class 类名 和 style 行内样式 进行控制 。2.对象语法当class动态绑定的是对象时,键就是类
2024-04-27 17:10:04 1152
原创 vue2(1)之Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 /vue8个重要指令(内容/条件/列表渲染,事件/属性/双向绑定)
概念:Vue (是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点所谓框架:就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上,增加功能代码即可。提到框架,不得不提一下库。库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等。
2024-04-26 16:17:00 938
原创 JavaScript进阶(四)之深浅拷贝/异常处理/处理this/防抖节流
如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)了解函数中 this 在不同场景下的默认值,知道动态指定函数 this 值的方法。// 该箭头函数中的 this 与 sleep 中的 this 一致。// 该箭头函数中的 this 为函数声明环境中 this 一致。// 该箭头函数中的 this 为函数声明环境中 this 一致。// oldObj[k] ['乒乓球', '足球']// // k 属性名 oldObj[k] 属性值。
2024-04-26 11:17:13 503
原创 JavaScript 进阶 (三)之构造函数/原型对象/对象原型/原型继承/原型链
了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链。继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。作用:该属性指向该原型对象的构造函数, 简单理解,就是指向我的爸爸,我是有爸爸的孩子。
2024-04-24 12:39:45 1231
原创 JavaScript 进阶(二)之构造函数/内置构造函数/数组方法对象方法
的数据类型有 6 种,分别是字符串、数值、布尔、undefined、null 和 对象,常见的对象类型数据包括数组和普通对象。之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型。了解面向对象编程的基础概念及构造函数的作用,体会 JavaScript 一切皆对象的语言特征,掌握常见的对象属性和方法的使用。甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数,用于创建对应类型的数据。
2024-04-23 14:56:52 832
原创 javascript之数组方法总结
forEach方法用于调用数组的每个元素,并将元素传递给回调函数注意:1.forEach主要是遍历数组2.参数当前数组元素是必须要写的,索引号可选。
2024-04-23 13:27:40 590 1
原创 JavaScript进阶(一)之作用域/作用域链/js垃圾回收机制/闭包/变量提升/函数提升/动态参数/剩余参数/箭头函数/数组对象解构/forEach/filter
学习作用域、变量提升、闭包等语言特征,加深对 JavaScript 的理解,掌握变量赋值、函数声明的简洁语法,降低代码的冗余度。JavaScript 中的作用域是程序被执行时的底层机制,了解这一机制有助于规范代码书写习惯,避免因作用域导致的语法错误。知道函数参数默认值、动态参数、剩余参数的使用细节,提升函数应用的灵活度,知道箭头函数的语法及与普通函数的差异。复杂数据类型放到堆里面。目的:引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁。
2024-04-22 22:27:29 595
原创 Web API(六)之正则表达式
/ const strEnd = str.replace(/前端/, 'web') 只能替换一个。// const strEnd = str.replace(/前端/, 'web') 只能替换一个。表示字符的范围,定义的规则限定在某个范围,比如只能是英文字母,或者数字等等,用表示范围。// 用户名可以输入英文字母,数字,可以加下划线,要求 6~16位。语法:字符串.replace(/正则表达式/,‘替换的文本’)'欢迎大家学习前端,相信大家一定能学好前端,都成为前端大神'
2024-04-08 15:18:47 522
原创 Web API(五)之BOM操作&window对象&本地存储
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作DOM 而诞生的。应该先进行添加,之后再删除。history (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退等。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。**问题:**因为本地存储里面取出来的是字符串,不是对象,无法直接使用。
2024-04-08 13:58:13 713
原创 Web API(四)之日期对象&节点操作&js插件&重绘和回流
在已有的 DOM 节点中插入新的 DOM 节点时,需要关注两个关键因素:首先要得到新的 DOM 节点,其次在哪个位置插入这个节点。回顾之前 DOM 的操作都是针对元素节点的属性或文本的,除此之外也有专门针对元素节点本身的操作,如插入、复制、删除、替换等。DOM 树中的任意节点都不是孤立存在的,它们要么是父子关系,要么是兄弟关系,不仅如此,我们可以依据节点之间的关系查找节点。删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点。
2024-04-08 13:24:02 830
原创 Web API(三)之事件流&事件委托&其他事件
结合事件流的特征,我们知道当某个元素的事件被触发时,事件总是会先经过其祖先才能到达当前元素,然后再由当前元素向祖先传递,事件在流动的过程中遇到相同的事件便会被触发。再来关注一个细节就是事件相继触发的【执行顺序】,事件的执行顺序是可控制的,即可以在捕获阶段被执行,也可以在冒泡阶段被执行。概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。如果事件是在冒泡阶段执行的,我们称为冒泡模式,它会先执行子盒子事件再去执行父盒子事件,默认是冒泡模式。
2024-04-07 16:58:04 871
原创 Web API(二)之事件监听&类型&处理程序
的第2个参数是函数,这个函数会在事件被触发时立即被调用,在这个函数中可以编写任意逻辑的代码,如改变 DOM 文本颜色、文本内容等。结合 DOM 使用事件时,需要为 DOM 对象添加事件监听,等待事件发生(触发)时,便立即调用一个函数。将众多的事件类型分类可分为:鼠标事件、键盘事件、表单事件、焦点事件等,我们逐一展开学习。任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来,我们称这个对象为事件对象。事件回调函数的【第1个参数】即所谓的事件对象,通常习惯性的将这个对数命名为。
2024-04-07 16:55:38 760
原创 WebAPI(一)之DOM操作元素属性和定时器
严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现,并且在此基础上又扩展一些实用的功能,这些被扩展出来的内容我们称为 Web APIs。
2024-04-07 16:16:41 435
原创 JavaScript基础(5)之对象的方法和调用
它由属性和方法两部分构成。是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。数学对象提供了比较多的方法,这里不要求强记,通过演示数学对象的使用,加深对对象的理解。数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔。// 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔。
2024-04-02 14:56:30 772 1
原创 JavaScript基础(4)之函数的声明调用和使用
声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分function 函数名() {函数体 }函数名命名规范和变量命名基本一致尽量小驼峰式命名法前缀应该为动词命名建议:常用动词约定。
2024-04-02 14:20:18 1131 1
原创 JavaScript基础(3)之循环语句for和数组
script > // 1. 语法,使用 [] 来定义一个空数组 // 定义一个空数组,然后赋值给变量 classes // let classes = [];// 2. 定义非空数组 let classes = [ '小明' , '小刚' , '小红' , '小丽' , '小米' ] // 1. 语法,使用 [] 来定义一个空数组。
2024-04-02 13:41:05 835 1
原创 javascript基础(2)之运算符和语句
理解什么是流程控制,知道条件控制的种类并掌握其对应的语法规则,具备利用循环编写简易ATM取款机程序能力。
2024-04-01 17:48:08 982
原创 css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap
less是一个css预处理器,less文件后缀是.less。扩充了css语言,使css具备一定的逻辑性,计算能力。注意:浏览器不识别less代码,目前阶段,网页要引入对应的css文件vscode插件:easy less,保存less文件后自动生成对应的css文件。
2024-03-25 19:07:54 1772
原创 css空间转换/视距/空间旋转/立体呈现/3d导航案例/空间缩放/animation动画/走马灯案例/精灵动画/多组动画/全民出游案例
空间:是从坐标轴角度定义xyz三条坐标轴构成了一个立体空间按,z轴位置与视线方向相同。像素单位数值deg百分比(参照盒子自身尺寸计算结果)
2024-03-24 23:40:55 1099 1
原创 css平面转换平移/旋转/缩放/倾斜/渐变/喜马拉雅综合案例
作用:为元素添加动态效果,一般与过渡配合使用概念:改变盒子在平面内的形态(位移,旋转,缩放,倾斜)平面转换又叫2d转换。
2024-03-23 16:19:32 959 1
原创 css定位&精灵图&字体图标&动画&垂直对齐&过渡&透明度
作用:灵活的改变盒子在网页中的位置。实现:1.定位模式:position2.边偏移:设置盒子的位置 left right top bottom。
2024-03-13 15:35:02 984
原创 前端开发CSS(一)
css定义,css引入方式,选择器,标签选择器,类选择器,id选择器,通配符选择器,盒子,文字控制属性,字体大小,字体粗细,字体样式(是否倾斜),行高,行高-垂直居中,字体族,font复合属性,文本缩进,文本对齐,水平对齐方式—图片,文本修饰线,color文字,颜色,复合选择器,后代选择器
2024-02-29 20:19:47 1072
springboot+vue3+mysql的企业后台管理系统
2024-07-15
大事件管理系统(vue3)compositionAPI/pinia/pinia持久化处理
2024-05-22
移动端项目之智慧商城电商项目
2024-05-17
前端静态页面小兔鲜项目.zip
2024-03-22
学成在线**静态网页项目**前端html&css&flex
2024-03-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人