- 博客(49)
- 收藏
- 关注
RSS订阅原创 Vue 项目进行 SEO 优化
如果是则将搜索引擎的爬虫请求转发到一个 node server，再通过 PhantomJS 来解析完整的 HTML，返回给爬虫。预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)关于服务器渲染：Vue 官网介绍 ，对 Vue 版本有要求，对服务器也有一定要求，需要支持 nodejs 环境。/users/:id。服务端渲染, 在服务端 html 页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构。(不影响用户的访问)
2023-10-24 21:13:10
985
原创 强缓存和协商缓存
last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内均有效。强缓存不过服务器，协商缓存需要过服务器，协商缓存返回的状态码是304。当执行强缓存时，如若缓存命中，则直接使用缓存数据库中的数据，不再进行缓存协商。
2023-10-13 09:04:10
687
原创 get和post的区别
请求方式GETPOST参数位置参数拼接到url的后面参数在请求体中参数大小受限于浏览器url大小，一般不超过32K1G服务器数据接收接收1次根据数据大小，可分多次接收适用场景从服务器端获取数据向服务器提交数据安全性参数携带在url中，安全性低相对于GET请求，安全性更高
2023-10-12 21:02:56
200
原创 XSS、CSRF、sql注入
CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。”,”’”等字符做过滤；服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
2023-10-12 20:43:55
308
1
原创 三次挥手和四次握手
第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；经过DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接。
2023-10-12 20:26:01
147
原创 浏览器响应过程
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。6、服务器处理请求，浏览器接收HTTP响应。1、浏览器的地址栏输入URL并按下回车。4、根据IP建立TCP连接（三次握手）。3、DNS解析URL对应的IP。8、关闭TCP连接（四次挥手）。7、渲染页面，构建DOM树。5、HTTP发起请求。
2023-10-12 20:12:38
43
原创 路由守卫及参数
回调函数, 表示是否允许路由跳转, 调用允许, 不调用则禁止(: 表示路由跳转的目标信息对象 (到哪儿去): 表示路由跳转的来源信息对象(从哪儿来)
2023-10-10 20:49:33
60
原创 Es6新增语法
2.异步函数 async 函数调用，跟普通函数调用方式一样，在一个函数前面加上 async，变成 async 函数，异步函数，return ，打印返回值 3.返回值是 promise 成功的对象。2.const 声明的是个只读常量，在声明时就需要赋值，如果 const 是个对象，对象所包含的值是可以被修改的。对象的解构赋值和数组的解构赋值其实类似，但数组的数组成员是有序的，而对象的属性则是无序的，所以对象的解构赋值简单理解就是等号左边的左边的和右边的解构相同。解决层层嵌套的回调函数，回掉地狱的问题。
2023-10-08 13:57:49
35
原创 v3+vant图片上传
的对象，再通过append方法将传入过来的file（类型为File的图片）推入。格式，在函数中使用new构造一个。此处接口需要请求的数据为。
2023-10-07 22:08:00
215
原创 v3+vant简单支付
通常在点击立即支付后，并不会直接进行支付操作，会先根据订单信息生成预支付信息，再预支付信息中包含订单ID，预支付页面选择支付方式并点击支付后，才会将订单ID和支付方式发送给后台等待返回支付地址，也就是我们常说的收银台。在支付失败时，可以在路由处设置独享守卫。
2023-10-07 22:07:30
117
原创 token详解
Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。◾ 拿着这个token，可以在当前登录的账号下进行请求业务，发送请求时，token会放在请求头里，服务器收到这个业务请求，验证token，成功就允许这个请求获取数据。6️⃣服务端收到请求，然后去验证客户端请求里面带着token，如果验证成功，就向客户端返回请求的数据。◾ token可以设置失效期。
2023-09-27 20:26:01
131
原创 promise方法
Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected。Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态。reject函数的作用：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。resolve函数的作用：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；2）fulfilled 成功状态。
2023-09-27 19:12:30
33
原创 VUE性能优化
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if。使用 Chrome Performance 查找性能瓶颈。computed 和 watch 区分使用场景。v-if 和 v-show 区分使用场景。减少 ES6 转为 ES5 的冗余代码。服务端渲染 SSR or 预渲染。Webpack 对图片进行压缩。优化 SourceMap。Vue 项目的编译优化。第三方插件的按需引入。开启 gzip 压缩。
2023-09-27 18:43:33
40
原创 移动端适配
在不同尺寸的屏幕下，动态的改变页面的html的font-size的大小，页面的元素是以rem为单位的，相应也会发生改变，就可以实现移动端的适配。1、通过媒体查询，实现响应式布局，通过@media实现一套html配合多套css实现适配。为了让页面在不同尺寸的屏幕下兼容行的显示和运行，使页面内容动态的改变。2、通过rem或者vw,vh等实现不同的设备按照相同的比例适配；3、使用插件，例如postcss-px-to-viewport。
2023-09-26 21:27:56
38
原创 vue3双向绑定原理
get有三个参数，target是代理的对象，prop是代理的目标的属性，receiver是proxy或者继承proxy的对象，通常是proxy。proxy有两个参数，target是要代理的目标对象，可以是任意类型的是对象，handler是一个函数，表示在执行各种操作时代理的行为。handler有两个方法，get和set，表示在读取和修改该对象时触发的函数。对proxy的修改会触发get和set劫持，但是对obj的修改并不会被监听到。set有四个参数，其中三个与get相同，value是给属性设定的新值。
2023-09-26 21:03:41
758
原创 http和https
2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。4、http连接时无状态的，https是由ssl+http协议构建的加密传输、身份认证的网络协议，安全性高于http。1、http是超文本传输协议，信息明文传输，https是具有安全性的ssl加密传输协议。
2023-09-26 20:33:03
27
原创 常见的http状态码
304 Not Modified,代表上次的文档已经被缓存了,还可以继续使用。如果你不想使用本地缓存可以用Ctrl+F5 强制刷新页面。401当前请求需要用户验证（一般是tooken失效）403请求已发送，但服务器拒绝执行。1xx表示客户端应该继续发送请求。400语义有误，服务器无法理解。404请求的地址未找到。2xx表示成功的请求。4xx表示客户端错误。5xx表示服务器错误。
2023-09-26 20:02:24
22
原创 虚拟dom
对dom元素的操作是非常消耗性能的，使用vue中的虚拟dom可以极大的减少dom的重复操作，节省性能，同时借助diff算法，在对多个dom元素修改时，会将修改的dom元素先存在本地的一个js对象中，最后将所有修改的dom一次性的attach到dom树上，有效的避免了大量的无谓计算。
2023-09-26 19:47:08
27
原创 数组排序方法
原理：将一个数组的排序问题看成是两个小数组的排序问题，以一个数为基准(中间的数)，比基准小的放到左边，比基准大的放到右边，而每个小的数组又可以继续看成更小的两个数组，一直递归下去，直到数组长度大小最大为2。原理：依次比较相邻两个数的大小，将较大数移动到右边，将较小数移动到左边。
2023-09-25 19:36:29
21
原创 判断数据类型
可以判断除了null以外的基本数据类型和function引用数据类型。除了null和undefined以外都可以判断。只可以判断引用数据类型。所有数据类型都可以判断。
2023-09-24 22:01:13
14
原创 js深浅拷贝
深浅拷贝是针对引用数据类型的，浅拷贝指挥拷贝引用数据类型的指向地址的指针，对新对象的值的改变会影响到旧对象的值。深拷贝是将对象的每一个属性的值赋值给一个新的地址，新对象值得改变不会影响旧对象的值。
2023-09-24 21:57:12
12
原创 js数据类型
基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object、Array、 function、Date、RegExp。在栈中存储的时基本数据类型和引用数据类型的指针，指针 指向引用数据类型的地址。除了+号外的的运算符号，均会将数据转换为number数据类型。字符串+变量，得出的数据会被隐式转换为字符串类型。堆中存储的是引用数据类型的值。
2023-09-24 21:49:51
12
原创 事件循环与异步任务
js是单线程语言，会先从上至下执行代码，当遇到异步代码时，会将其放入任务队列，并不会阻塞页面的加载。当主页面加载完毕，开始查询任务队列中得异步任务，当所有异步任务执行完毕，又会再次循环以前的步骤。在异步任务队列中，微任务的优先级要高于宏任务，因为微任务时ES6新增的，而宏任务时浏览器规定的。可以看出，ES6新增的异步任务都为微任务。
2023-09-22 17:14:56
19
原创 垃圾回收机制和内存泄露
如果同一个值又被赋给另一个变量，则该值的引用次数加 1。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记（闭包）。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。当变量不被继续使用时，就会被浏览器的垃圾回收机制回收，释放其占用的内存空间，全局作用域内的变量不会被垃圾回收机制回收。到目前为止，IE9+、Firefox、Opera、Chrome、Safari 的 JS 实现使用的都是标记清除的垃圾回收策略,只不过垃圾收集的时间间隔互不相同。
2023-09-21 20:01:44
41
原创 闭包及this指向
bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。闭包简单来说就是函数的嵌套，也是函数作用域的嵌套，通过闭包可以访问到外层函数的局部变量。 对象名称.函数名称.apply（需要指向的新对象，[实参1，实参2…… 对象名称.函数名称.bind（需要指向的新对象，实参1，实参2。 对象名称.函数名称.call（需要指向的新对象，实参1，实参2。2、对象中的函数中的this，指向对象。
2023-09-21 19:40:57
266
原创 作用域及变量提升
JS代码的预解析阶段会发生变量提升，会将var和function提升至最前端，并且function的优先级高于var。当需要访问一个变量时，会现在自身的作用域内查找，如果找不到，会逐级向上进行查找，最高找到全局作用域，形成作用域链。ES6新规定的let和const声明的变量具有块级作用域，因此其存在暂时性死区，不存在变量提升。作用域简单来说就是变量生效的范围，可以分为：全局作用域、函数作用域、块级作用域。函数内部的变量具有函数作用域，只可以在函数内部进行读写。声明在全局作用域的变量，全局范围内都可以读写。
2023-09-21 19:09:22
25
原创 原型和原型链
对象都会有⼀个属性proto， 指向构造函数的prototype原型对象，被称为隐式原型， 之所以我们对象可以使⽤构造函数prototype原型对象的⽅法，就是因为对象有 proto 的存在， __ proto __⾮标准属性 ，尽量不要去修改它 否则影响性能。每个原型对象⾥⾯都有个constructor属性(constructor构造函数) ，该属性指向该原型对象的构造函数。js规定，每⼀个构造函数都有⼀个prototype属性，指向另⼀个对象，我们称为原型对象，被称为显示原型。
2023-09-20 20:19:27
50
1
原创 css3和h5新特性
⑤增加了多个语法以及函数用于页面元素的计算，例如渐变、过度、变形、动画等。②扩展了css2的属性取值范围，例如粘性定位。①增加了弹性盒子、多列布局、动画等属性。④增加了取值单位，例如颜色相关单位。③增加了样式选择符，例如伪元素。
2023-09-20 19:30:47
59
1
原创 cssHack
hack本意是修改，css的hack就是对css的修改，为什么要修改呢，因为不同的浏览器在不同的版本对css的解析认知不一样，造成相同的代码，出现不同的效果，为了对此做出适配，就需要针对不同浏览器的不同版本写出不一样的css，就是cssHack。“和星号” * “，IE7能识别星号” * “，但不能识别下划线”html .class{}，IE7能识别。
2023-09-19 19:39:14
24
原创 href和src的区别
href是超文本引用，用来建立当前元素和文档之间的链接，例如link、a等，当他引用资源时，浏览器会将其识别为css文档，并行下载资源并且不会停止对当前文档的处理。
2023-09-19 19:22:42
20
原创 圣杯布局和双飞翼布局
两侧宽度固定，中间自适应，中间盒子放到最前，最先渲染。两侧宽度固定，中间自适应，中间盒子放到最前，最先渲染。左侧元素浮动，固定宽度，右侧元素设置。触发BFC，实现宽度自适应。
2023-09-19 18:53:34
24
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人