前端
文章平均质量分 51
牧羊狼爱学习
这个作者很懒,什么都没留下…
展开
-
nodejs 中间件
以上列举了一些常见的 Node.js 中间件类型及其对应的库。实际应用中,根据项目需求可能会选用更多特定功能的中间件,如速率限制、API 版本控制、请求验证(如校验 JSON Schema)、数据库连接管理、模板引擎支持等。Node.js 中间件通常是指用于 Web 应用开发框架(如 Express、Koa、Hapi、Fastify 等)中,对 HTTP 请求生命周期进行拦截、处理和传递的一系列可复用函数。原创 2024-04-23 17:51:15 · 1336 阅读 · 1 评论 -
uniapp 微信小程序 输入框跟随手机键盘弹起
需求:手机键盘弹起后,页面底部的输入框跟随弹起,且页面不被顶上去。原创 2024-03-29 11:59:13 · 1594 阅读 · 0 评论 -
uniapp中使用u-popup组件导致的弹框下面的页面可滑动现象
【代码】uniapp中使用u-popup组件导致的弹框下面的页面可滑动现象。原创 2024-03-29 11:48:16 · 865 阅读 · 0 评论 -
uniapp 微信小程序 前端登录流程
3. 用 session_key 对 步骤1中获取到的encryptedData、iv 进行解密,本案例中解密后可从后端获取用户手机号phoneNum。2. 调用 uni.login() 获取 wx code,然后用wx code 获取session_key,unionid 等信息。1. 从uniapp button 中通过 getphonenumber 获取 encryptedData、iv。4. 获取到手机号后,用 union_id和 phoneNum 进行登录。原创 2024-03-29 11:24:10 · 1174 阅读 · 1 评论 -
http1 http2 http3的区别
HTTP/3还采用了TLS 1.3作为默认的安全层协议,提供了更强的安全性。HTTP/2:HTTP/2是HTTP/1.1的升级版本,引入了一些新的特性来提高性能。此外,HTTP/2还引入了头部压缩,减少了传输的数据量,提高了效率。此外,HTTP/1.1没有对头部压缩和请求优先级的支持,这导致了较低的性能和效率。总结起来,HTTP/2和HTTP/3相较于HTTP/1.1在性能和效率方面有显著的改进。HTTP/1.1、HTTP/2和HTTP/3是HTTP协议的不同版本,它们在性能、效率和安全性方面有一些区别。原创 2024-01-09 15:45:50 · 813 阅读 · 0 评论 -
三次握手四次挥手
第二次握手:服务器接收到客户端的请求后,确认连接请求,并发送一个同样带有特殊标志(SYN)和确认序列号(Ack)的数据包作为回应,同时也设置自己的初始序列号。第三次握手:客户端接收到服务器的回应后,再次确认连接请求,并发送一个带有确认序列号的数据包给服务器。第四次挥手:客户端接收到服务器的关闭请求后,发送一个确认数据包(ACK)作为回应,告诉服务器已收到关闭请求。此时,连接关闭完成。第二次挥手:服务器接收到客户端的关闭请求后,发送一个确认数据包(ACK)作为回应,告诉客户端已收到关闭请求。原创 2024-01-09 15:27:50 · 420 阅读 · 0 评论 -
浏览器缓存
浏览器缓存是指浏览器在访问网页时将一些资源(如 HTML、CSS、JavaScript、图像等)保存在本地存储器中,以便在后续的请求中直接使用这些资源,而无需再次从服务器下载。头字段,将上次缓存的资源的最后修改时间或 ETag 值发送给服务器。在后续的请求中,如果浏览器发现已经有缓存的资源,并且缓存仍然有效(根据缓存相关的字段判断),浏览器会直接从缓存中加载资源,而不必再次向服务器发送请求。当浏览器首次请求一个网页时,服务器会返回该网页的资源,并在响应头中设置一些缓存相关的字段,如。原创 2024-01-09 15:21:01 · 403 阅读 · 0 评论 -
three.js 轨道控制器
【代码】three.js 轨道控制器。原创 2023-05-08 22:59:22 · 259 阅读 · 1 评论 -
three.js 运行环境
命令,会自动启动一个本地 localhost:8080的服务器。方式二:在全局环境安装 liver-server 本地服务器。方式一:搭建node.js环境 (npm init -y)安装好后,在项目所在的目录运行。原创 2023-05-08 22:38:45 · 181 阅读 · 0 评论 -
three.js 基础入门
【代码】three.js 基础入门。原创 2023-05-08 14:37:44 · 795 阅读 · 0 评论 -
Vue.$nextTick
我们都知道大多数情况下 Vue 数据变化后,相应的 html 也随着发生变化。事实上,当数据发生改变后,对应的 html/DOM 并没有立即重新渲染,而是开启一个队列,并将改变的数据缓存在同一事件循环中,当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。如果同一个 watcher 被多次触发,或者如果你用一个for循环来动态改变数据100次,那么这些变化只会被推入到队列中一次。这种在缓存时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要,否则将是一个很大的开销。为了原创 2022-02-22 15:45:16 · 107 阅读 · 0 评论 -
前端 知识点-03(CSS)
rem布局关键点:1. vw 随不同屏幕大小px值变化 2. rem 单位根据页面根元素大小变化iPhone6下屏幕宽度是375px, iPhone7下屏幕宽度是414px:100vw相当于占整个屏幕宽度的100%,所以iPhone6下100vw相当于375px,如果想要根元素font-size是100px, 就要计算出一个对应的根元素的 vw,计算公式:100vw / 375 = a / 100 => a = 26.6667vw所以,当根元素font-siz.原创 2022-02-22 15:06:46 · 358 阅读 · 0 评论 -
前端 知识点-02(浏览器)
diff算法 与 虚拟domnextTick原创 2022-02-22 11:27:35 · 291 阅读 · 0 评论 -
Vue底层原理
Observer (数据劫持)核心是通过Obeject.defineProperty()来监听数据的变动,这个函数内部可以定义setter和getter。每当数据发生变化,就会触发setter()。这时候 Observer 就要通过 Dep 通知 Watcher 订阅者。Dep (发布者)有 addWatcher() 和 notify() 两个方法,(收集 Watcher 依赖,并通知依赖变更)。Dep 保存多个 Watcher,当 Dep 发现 Observer有更新时,Dep ...原创 2022-02-11 10:52:52 · 3971 阅读 · 1 评论 -
keep-alive
app.vue:需求一: 所有页面跳转到首页时,首页一律用缓存(不重新加载)router/index.js:需求二:list 跳转到首页时,首页重新加载;about跳转到首页时,首页不重新加载【实现步骤】:1. 首页的路由:去掉写死的meta.keepAlive;2. 在其他的页面组件内部:在页面离开时的导航守卫中,动态添加目标页面的keepAlive的值router/index.js:list.vue:about.vue:现在,我们来验...原创 2022-02-09 15:16:07 · 411 阅读 · 0 评论 -
Object.defineProperty() - VS - new Proxy()
底层数据响应原理vue2 Object.defineProperty()vue3 new Proxy()new Proxy() 把目标对象变成代理对象参数1: user -----> target目标对象参数2: handler --> 处理器对象,用来监视数据,及数据的操作 const user = { name: 'wang', age: 18, wife: { name: 'xiao', age:...原创 2022-02-08 13:30:13 · 859 阅读 · 0 评论 -
Vue3 学习 (胖哥教程学习笔记)
引入 ref引入 reactive原创 2022-01-20 10:32:31 · 431 阅读 · 0 评论 -
wxml2canvas
detail.jsutil.js/** * 获取字符的长度,full为true时,一个汉字算两个长度 * @param {String} str * @param {Boolean} full */function getTextLength (str, full) { let len = 0; for (let i = 0; i < str.length; i++) { let c = str.charCodeAt(i); ..原创 2022-01-18 16:18:43 · 4753 阅读 · 1 评论 -
CSRF、XSS 科普与防御
CSRF (Cross Site Request Forgery) 跨站请求伪造攻击案例演示:防御解决方案:1. 尽量使用 POST ;2. 加入验证码;3. 验证 Referer原创 2022-01-04 10:20:56 · 2897 阅读 · 0 评论 -
http、https
非对称加密1. 任何经过 A 的公钥进行过加密的信息,只有 A 的私钥才能解密;2. 任何有公钥的人可以确认对方发送的信息是被私钥加密过的。...原创 2021-12-29 17:00:35 · 1107 阅读 · 0 评论 -
前端 知识点-01(js)
var1. 声明提升(赋值不提升)2. 作用域为该语句所在的函数内判断是数组还是对象Object.prototype.toString.call(a)a instanceof xxx (返回值:布尔值)可以判断是否为数组,但是不可以判断是数组还是对象:typeof a (返回值:字符串) ,同样也不能判断是数组还是对象:Array.isArray(a) 可以判断是否为数组:深拷贝1. JSON.parse(JSON.s...原创 2021-12-28 13:31:52 · 356 阅读 · 0 评论 -
防抖、节流
场景:防抖当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。场景:input 表单验证(如果用户每输入一次就请求一次接口,就会造成接口请求太频繁)箭头函数写法: function debounce(func, delay) { var timer = 0 return function(e) { // console.log('timer', timer,原创 2021-12-27 14:06:19 · 218 阅读 · 0 评论 -
云服务器安装并配置nginx
初次购买完云服务器,通过 ssh 连接到远程云服务器时,如果在浏览器直接访问,会访问无效,情况如下:所以我们需要给云服务器安装 web 服务器:然后依次运行如下命令:makemake install至此 nginx 已安装完毕。下面我们进入 nginx 然后将它开启:至此,nginx 已开启。现在回到浏览器,访问云服务器地址:...原创 2021-12-26 13:55:10 · 3669 阅读 · 0 评论 -
vue.config.js —— vue/cli 3 脚手架的 webpack 配置文件
vue/cli 3 的脚手架去掉了vue-cli 2 的 webpack.dev.config.js 的 webpack 配置文件,如果想要在 vue/cli3 中配置 webpack,就需要在项目的根目录下添加 vue.config.js 配置文件。下面将devServer:前端在vue-cli项目开发中,启动脚手架后,默认访问地址为http://localhost:8080,如果这时候要请求一个获取商品列表的接口,请求接口的地址为(举例):https://huodong.fanli.c.原创 2021-12-26 10:23:02 · 1362 阅读 · 0 评论 -
ant design vue中的modal弹框样式修改无效问题
:getContainer="()=>$refs.paymodal"原创 2021-12-22 11:39:24 · 883 阅读 · 0 评论 -
js 题目 —— console.log()
1. 函数、变量 作用域(1) Foo() function Foo () { console.log(this.getName()) } var getName = function () { console.log(4) } Foo() function getName () { console.log(5) } Foo()(2) Foo() function Foo () { getName =.原创 2021-12-20 11:14:02 · 424 阅读 · 0 评论 -
冒泡排序,插入排序
var arr = [ 5,9,1,66,33,42,90,7 ] function bubbleFn (arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j+1]) { var temp = arr[j] arr[j] = a.原创 2021-12-19 22:37:50 · 185 阅读 · 0 评论 -
Webpack 懂的都懂系列
webpack.config.js:const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const CssMinimizePlugin = require('css-minimizer-webpack-plugin')module.exports = {原创 2021-12-16 15:02:37 · 199 阅读 · 0 评论 -
前端-倒计时:
html:<div class="btn-box J_btn"> <div class="time-counter"></div> <div class="btn">{$data.button_start}</div> <div class="subscribe-counter"></div></div>js:var differTime = $("#J_time_sta原创 2021-10-14 14:19:15 · 70 阅读 · 0 评论 -
input 输入框数字金额输入正则
let price = e.detail.value; price = price.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符 price = price.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的 price = price.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); price = price.replace(...原创 2021-11-15 19:25:56 · 1085 阅读 · 0 评论 -
swiper.js 实现弹幕效果
setTimeout(function() { new Swiper('.comment-swiper-container', { autoplay: { disableOnInteraction: false, delay: 0 }, autoplayDisableOnInter...原创 2021-12-10 12:11:35 · 886 阅读 · 0 评论 -
Vue directive 自定义指令
Vue自定义指令一共有5个钩子函数,分别是:bind、inserted、update、componentUpdate 、unbindbind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详原创 2021-12-15 13:52:06 · 1388 阅读 · 0 评论