- 博客(46)
- 收藏
- 关注
RSS订阅原创 后台管理项目优化与上线
一、项目优化实现步骤：（1）生成打包报告，根据报告优化项目（2）第三方库启动CDN（3）Element-UI组件按需加载（4）路由懒加载（5）首页内容定制二、添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'.....//请求在到
2021-06-22 20:06:01
274
原创 三次握手和四次挥手
三次握手：第一次：建立连接时，客户端发送syn包到服务器，等待服务端确认第二次：服务器收到syn包，必须确认客户的syn，同时也发送一个syn包，即syn+ACK包第三次：客户端收到服务器的syn和ack包，向服务器发送确认包ack，发送完毕，客户端和服务端连接成功，完成三次握手四次挥手：第一次：浏览器发送完数据后，发送fin请求断开连接第二次：服务器发送ack到客户端，确认客户端的断开请求第三次：服务器请求断开fin的请求第四次：客户端确认服务器的断开ack...
2021-06-21 19:00:30
133
原创 当url输入到页面的过程中发生了什么
大致过程是：浏览器的地址栏输入URL并按下回车，查找当前的URL是否存在缓存，并比较缓存是否过期，DNS解析URL对应的IP，根据IP建立TCP连接（三次握手），HTTP发起请求，服务器处理请求，浏览器接收HTTP响应，渲染页面，构建DOM树，关闭TCP连接（四次挥手）。...
2021-06-21 18:58:40
117
原创 http和https的区别
http：超文本传输协议（Http，HyperText TransferProtocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支.
2021-06-21 18:46:36
205
原创 http常见的状态码
http状态码分类：100-199 提示信息 – 表示请求正在处理200-299 成功 – 表示请求正常处理完毕300-399 重定向 – 要完成请求必须进行更进一步的处理400-499 客户端错误 – 请求有语法错误或请求无法实现500-599 服务器端错误 – 服务器处理请求出错常见的状态码有哪些？200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；404：(客户端问题)请求的资源没有找到400: 语义有误，当前请求无法被服务器理解。401: 当.
2021-06-21 18:38:32
135
原创 双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，
2021-06-16 18:40:08
230
原创 ifram优缺点
iframe的优点：① iframe能够原封不动地把嵌入的网页展现出来。② 如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。③ 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。④ 如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决。iframe的缺点：① 会产生很多页面，不容易管理。② 在几个框架中都出现上下、左右滚动条时，
2021-06-11 14:53:21
3829
2
原创 js宏任务和微任务
js中的一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入eventqueue，然后在执行微任务。宏任务和微任务都包含一些事件宏任务：setTimeout,setInterval,Ajax,DOM事件微任务：Promise async/await要想明白这个机制就要理解js单线程。因为JS是单线程语言，只能同时做一件事儿。js任务需要排队顺序执行，如果一个任务时间过长，后边的任务也会等着。假如，我们在请求一个网址时，图片加载很慢，网页总不能一直卡不出来，这个时候就可以...
2021-06-10 16:20:41
2142
原创 elememt ui中表单如何校验
第一种常用方式：表单上加rules｛object｝<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable>
2021-06-08 08:28:30
227
原创 vue打包上线流程，nginx服务器配置（路由history模式白屏如何处理）
一、项目完成后运行npm run build,生成一个打包文件夹tests，把这个文件夹放到html目录下二、liuulanqifang
2021-06-08 08:08:49
434
原创 webpack打包优化
webpack打包优化有好多种方法，先总结一下其中比较实用的几种方法：一、按需加载二、优化loader配置三、关闭生产环境的sou
2021-06-06 21:29:18
109
原创 什么是函数节流与函数防抖
举个栗子，我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。再举个栗子，假设电梯一次只能载一人的话，10 个人要上楼的话电梯就得走 10 次，是一种浪费资源的行为；而实际生活正显然不是这样的，当电梯里有人准备上楼的时候如果外面又有人按电梯的话，电梯会再次打开直到满载位置，从电梯
2021-06-04 16:18:31
186
原创 vant-ui 的按需引入
前言以前我们使用vue框架写项目的时候，总是在全局导入，但是到了实际开发中，为了提高性能，缩小项目体积，都会要求我们按需导入一、安装tongguo
2021-06-03 16:18:38
177
原创 axios拦截，api统一管理
一、概念axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。首先要安装axios，一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url,在request.js中添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开.
2021-06-03 15:58:32
107
原创 项目开发流程
1、确定项目的技术栈vue2.0 + vue3/4 + vue-router + axios + vuex + vant + rem + sass + webpack
2021-06-02 09:07:13
45
原创 Transition
一、简介Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。transition-property 用于指定应用过渡属性的名称transition-duration 用于指定这个过渡的持续时间transition-delay 用于指定延迟过渡的时间transition-timing-function 用于指定过渡的类型...
2021-06-02 08:43:41
125
原创 keep-alive
一、什么是keep-alive在平常开发中，有时页面跳转之间没有必要多次初始化，只需要保存页面数据即可。这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示shi
2021-06-02 07:57:36
314
原创 什么是事件委托
瀑布流：无限上拉列表中，如果给每一个图片绑定点击事件，非常繁琐且消耗内存。所以我们可以把每张图片上的点击事件委托给共同的父元素。事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了好处：提高性能，减少了事件绑定，从而减少内存占用应用场景 在vue中事件委托我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们...
2021-05-30 19:54:51
610
原创 什么是闭包
闭包：简单的理解就是函数中套了一个函数，内层函数可以访问外层函数中的变量有时候需要用到函数内的局部变量，在正常情况下是不能读取到的，这个时候就需要用到闭包。闭包可以封装对象的私有属性和方法，就是可以简单的理解成闭包就是一个私有作用域，可以定义属性和方法，vue中的data就是一种闭包的形式。闭包作为回调函数，可以实现函数的复用优点：闭包因为长期驻扎在内存中。可以重复使用变量，不会造成变量污染缺点：闭包会使函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网.
2021-05-30 19:54:10
71
原创 var let const之间的区别
在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面有介绍），ES6提出了使用let和const声明变量,弥补了ES5中var的缺点。1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceErr..
2021-05-30 19:31:57
56
原创 自由变量和变量提升
一 、自由变量当前作用域外的变量都是自由变量，一个变量在当前作用域没有定义，但是被使用了，就会向上级作用域，一层一层依次查找，直至找到为止，找到这个变量后就会停止，不会继续查找这个变量，如果全局作用域都没有找到这个变量就会报错。这个自由变量查找的过程就是作用域链。二、bianl...
2021-05-30 18:42:33
269
原创 作用域、作用域链
一、作用域作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域全局作用域就是js中最外层的作用域，任何地方都可以访问，可以反复使用函数作用域是js通过函数创建的一个独立作用域，仅在函数内部可访问，不能反复使用函数可以嵌套，所以作用域也可以嵌套ES6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）二、作用域链由多级作用域连续引用形成的链式结果掌管一切变量的使用顺序： 先在局部找，没有，就延作用域向父级作用域找当...
2021-05-28 18:59:02
91
原创 this的指向问题
一、概述概述（1）this是每次调用函数的时候都会向函数内部传递进一个隐含的参数。（2）this指向的是一个对象，函数执行的上下文对象。（3）根据函数的调用方式，this的指向也不同。（4）我们可以把this理解为这个函数执行者。注意：ES6中的箭头函数没有this指向的，它里面的 this 是继承外面的环境。作用（1）调用本类中的方法。（2）表示类中的属性。（3）可以使用this调用本类的构造方法。（4）this表示当前对象。————————————————版权声明：本文为C
2021-05-28 08:11:37
148
原创 new的创建过程
大概步骤：第一步：创建对象第二步：原型赋值第三步：Foo函数执行，this指向obj对象，给obj添加属性第四步：返回obj对象代码如下： function fn() { // 第一步：创建对象 var obj = {}; // 第二步：原型赋值 obj.__proto__ = Foo.prototype; // 第三步：Foo函数执行，this指向obj对象，给obj添加属性。 let re...
2021-05-27 11:19:44
182
原创 JavaScript中的原型与原型链
1、什么是原型原型：每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。2、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。，被称为显示原型3、_ _proto_ _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype4.
2021-05-26 19:34:11
54
原创 this与call，apply，bind之间的关系
1.浏览器里，在全局范围内的this 指向window对象；2.在函数中，this永远指向最后调用他的那个对象；3.构造函数中，this指向new出来的那个新的对象；4.Call、apply、bind中的this被强绑定在指定的那个对象上；5.箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；6.apply、call、bind都是js给函数内置的
2021-05-26 19:04:39
98
原创 数组常用的方法
JavaScript数组方法总结isArrary()判断参数是不是数组，返回布尔值-----Array.isArrary()toString()把数组转成字符串------数组名.toString–对象类型数组不能直接转换valueOf()返回数组本身-----数组名.valueOf()push()和unshift()数组名.push():在数组末尾添加元素，返回添加后的数组的长度，原数组会发生改变。数组名.unshift():在数组开头添加元素，返回添加后的数组的长度，
2021-05-25 21:17:46
55
原创 argument
1.什么是argumentargument是一个类数组对象，控制台打印出来的是一个数组，但并不是真正的数组，所以说arguments 是一个类数组的对象，我们叫他伪数组。2. argument 操作arguments是个类数组对象，其包含一个length属性，可以用arguments.length来获得传入函数的参数个数。function func() {console.log("The number of parameters is " + arguments.le...
2021-05-25 20:37:27
928
原创 数据类型的判断
判断数据类型的方法有四种：typeof、instanceof、 constructor、 prototype方法比较1. 使用typeof操作符。 对一个值使用 typeof 操作符可能返回下列某个字符串，返回的类型都是字符串形式。 (1) undefined：如果这个值未定义 (2) boolean：如果这个值是布尔值 (3) string：如果这个值是字符串 (4) number：如果这个值是数值 (5) object：如果这个值是对象或null .
2021-05-25 07:43:05
4410
原创 js数据类型
一、js的数据类型有哪些？基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增的值）和BigInt（es10新增）引用数据类型：object。 包含object、Array、Function、Date、RegExp。基本数据类型详解，1.Number类型number类型包含整数和浮点数，这里注意浮点数会自动转换成整数Number类型的数值转化：Number()，转型函数，可以用于任何数据类型parseIn...
2021-05-24 18:44:28
59
原创 深拷贝
一.什么是深拷贝引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。深拷贝采用了在堆内存中申请新的空间来存储数据，这样每个可以避免指针悬挂。深拷贝：对于深拷贝，针对成员变量存在指针的情况，不仅仅是简单的指针赋值，而是重新分配内存空间。如下： #include <stdio.h> ..
2021-05-23 21:35:22
106
原创 vue-router
路由原理路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即..
2021-05-23 19:11:18
68
原创 vuex
一、简介vuex是一个专为vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生改变，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护。二、组成有五个属性分别是：state、getters、mutations、actions、modulestate属性：存放状态，例如你要存放的数据等。getters：类似与共享属性，可以通过this.$store.getters来获取存放在state里面的数据。mut.
2021-05-21 20:51:01
120
原创 vue生命周期函数
我们每个vue文件，都可以看作成一个实例，从加载到销毁。下面我就简单的简述一下我们vue的一生，在那个时间段能做什么事情。我们vue的生命周期大致有8个分别是：实例创建前/后、组件挂载前/后、视图更新前/后、实例销毁前/后。一、实例创建之前/实例创建之后1、beforeCreate()我们vue实例创建之前执行的函数。这个时候只有一些实例本身的事件和生命周期函数2、created()vue实例创建之后执行的函数。是最早能使用data中数据和methods中方法的钩子函数。我们可以在这个钩
2021-05-20 21:51:37
151
原创 Vue组件通信
一.父组件传到子组件父组件代码<template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template> <script> import son from './Son' //引入
2021-05-20 08:02:12
136
原创 黑马优购项目总结
文章目录1、准备工作。2、封装一些公共的组件3、请求接口渲染页面4、列表页面渲染5、详细列表下拉刷新，上拉加载6、详情页7、购物车页面8、我的页面1、准备工作。我们先把wx.request封装好。然后我们去配置路由。把尾部的导航配置出来。就是我们的首页、分类、购物车、还有我的。在全局的app.json中配置。{ "pages": [ // 这个是我们的配置页面，类似我们的vue路由 "pages/index/index", "pages/category/...
2021-05-18 07:52:54
1316
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人