星辰tsy-优快云博客

原创 web常见的攻击方式

针对第一个要素，我们在用户输入的过程中，过滤掉用户输入的恶劣代码，然后提交给后端，但是如果攻击者绕开前端请求，直接构造请求就不能预防了。CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目。恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。对于GET请求，Token将附在请求地址之后。

2025-03-09 21:35:53 631

原创如何大文件断点续传

如果中途上传中断过，下次上传的时候根据当前临时文件大小，作为在客户端读取文件的偏移量，从此位置继续读取文件数据块，上传到服务器从此偏移量继续写入文件即可。整体思路比较简单，拿到文件，保存文件唯一性标识，切割文件，分段上传，每次上传一段，根据唯一性标识判断文件上传进度，直到文件的全部片段上传完毕。分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传。上传过程中将文件在服务器写为临时文件，等全部写完了（文件上传完），将此临时文件重命名为正式文件即可。

2025-03-09 21:22:15 164

原创如何判断一个元素在可视区域内

Intersection Observer 即重叠观察者，从这个命名就可以看出它用于判断两个元素是否重叠，因为不用进行事件的监听，性能方面相比getBoundingClientRect会好很多。通过上述方式，可以看到可视区域颜色会变成黄色了，但是可以明显看到有卡顿的现象，原因在于我们绑定了scroll事件，scroll事件伴随了大量的计算，会造成资源方面的浪费。然后开始监听scroll事件，判断页面上哪些元素在可视区域中，如果在可视区域中则将背景颜色设置为yellow。

2025-03-08 13:00:00 1034

原创函数式编程

相比命令式编程，函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而非设计一个复杂的执行过程。可以看到compose实现一个简单的功能：形成了一个新的函数，而这个函数就是一条从 bfn -> afn 的流水线。纯函数是对给定的输入返还相同输出的函数，并且要求你所有的数据都是不可变的，即纯函数=无状态+数据不可变。组合函数与管道函数的意义在于：可以把很多小函数组合起来完成更复杂的逻辑。高级函数，就是以函数作为输入或者输出的函数被称为高阶函数。

2025-03-08 08:15:42 447

原创 JS内存泄漏问题

如果id为Node的元素从DOM中移除，该定时器仍会存在，同时，因为回调函数中包含对someResource的引用，定时器外面的someResource也不会被释放。语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉。通过设置arr为null，就解除了对数组[1,2,3,4]的引用，引用次数变为 0，就被垃圾回收了。

2025-03-08 08:04:57 407

原创什么是尾递归

下面实现一个函数 pow(x, n)，它可以计算 x 的 n 次方尾递归，即在函数尾位置调用自身（或是一个尾调用本身的其他函数等等）。尾递归也是递归的一种特殊情形。尾递归是一种特殊的尾调用，即在尾部直接调用自身的递归函数。在递归调用的过程当中系统为每一层的返回点、局部量等开辟了栈来存储，递归次数过多容易造成栈溢出这时候，我们就可以使用尾递归，即一个函数中所有递归形式的调用都出现在函数的末尾，对于尾递归来说，由于只存在一个调用记录，所以永远不会发生"栈溢出"错误。

2025-03-08 07:59:29 135

原创前端请求方式

直译是异步JS和XML（XML类似HTML，但是设计宗旨就为了传输数据，现已被JSON代替），解释一下就是说以XML作为数据传输格式发送JS异步请求。，拿来跟ajax对比是完全不合理的，它们完全不是一个概念的东西，适合拿来和fetch对比的其实是xhr，也就是上面封装ajax请求的代码里的XMLHttpRequest，这两都是JS自带的发请求的方法，而。axios利用xhr进行了二次封装的请求库，xhr只是axios中的其中一个请求适配器，axios在nodejs端还有个http的请求适配器；

2025-03-06 13:57:28 589

原创 JavaScript脚本延迟加载的方式

JavaScript脚本的延迟加载（也称为懒加载）是指在网页的主要内容已经加载并显示给用户之后，再加载或执行额外的JavaScript代码。这样做可以加快页面的初始加载速度，改善用户体验，并减少服务器的压力。

2025-03-06 09:46:57 225

原创 Meida-Query 媒体查询

媒体查询是 CSS3 的一个新的技术，它使我们可以针对不同的设备（或者说，不同的屏幕尺寸和分辨率）来应用不同的样式。

2025-02-27 14:12:40 904

原创 vue项目本地开发完成后部署到服务器后报404是什么原因

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中，因此对于服务端来说，即使没有配置location，也不会返回404错误。可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login。当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404，

2025-02-27 10:52:24 438

原创什么是SSR

然而，也可以将同一个组件渲染为服务器端的 HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染，打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容。指由服务端完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。网页内容在服务端渲染完成，⼀次性传输到浏览器，打开页面查看源码，浏览器拿到的是全部的dom结构。

2025-02-27 10:43:46 308

原创 keep-alive

keep-alive可以设置以下props属性：关于keep-alive的基本用法：使用includes和exclude：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：说明：onActivated 和 onDeactivated是 Vue 3 的setup语法中，与 keep-ali

2025-02-27 10:27:32 386

原创 vue中key的理解

如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed。当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染。渲染错误：如果列表项的顺序发生变化，Vue。

2025-02-27 10:08:57 272

原创 Vue.observable

Observable 翻译过来我们可以理解成可观察的。Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器其作用等同于在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。

2025-02-27 10:01:48 137

原创 Vue中mixin的理解

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来。

2025-02-26 13:56:03 276

原创 Vue组件间通信的方式

在 Vue 3 中，$attrs 和 $listeners 的使用有一些变化，特别是在 $listeners 的处理上。这意味着在 Vue 3 中，你需要通过 $attrs 来传递所有的属性和事件监听器。事件监听器传递：爷爷组件绑定了一些事件监听器到父组件，父组件通过 $listeners 将这些监听器传递给孙子组件。属性传递：爷爷组件将一些属性传递给父组件，父组件通过 $attrs 将这些属性传递给孙子组件。在祖先组件定义provide属性，返回传递的值。在后代组件通过inject接收组件传递过来的值。

2025-02-26 10:49:40 816

原创 Vue2为什么data属性是一个函数而不是对象

vue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染。产生这样的原因这是两者共用了同一个内存地址，componentA修改的内容，同样对componentB产生了影响。修改componentA组件data属性的值，componentB中的值也发生了改变。在我们定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例。修改componentA组件data属性的值，componentB中的值不受影响。

2025-02-26 10:11:20 236

原创 Vue2给对象添加新属性界面不刷新

如果为对象添加少量的新属性，可以直接采用Vue.set()如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式。

2025-02-26 10:06:54 220

原创 HTML篇

● 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。在 SVG 中，每个被绘制的图形均被视为对象。

2025-02-25 10:08:21 1009

原创 webSocket

因此，在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。3. 客户端接收到服务端发送的新的Sec-WebSocket-Accept参数后，使用原来的随机密钥和新的Sec-WebSocket-Accept参数共同生成一个新的Sec-WebSocket-Key参数，用于加密数据传输。事实上这是为了保持长连接，至于这个包的内容，是没有什么特别规定的，不过一般都是很小的包，或者只包含包头的一个空包。

2025-02-20 19:49:10 1177

原创 Vue组件间传参

然后重点来了：我们此时不需要使用自定义事件"father"在子组件接收数据，而是直接在子组件引用的孙组件上面绑定v-on=“$listeners”，在这里此段代码就像导管一样，直接将数据传给了父组件。然后重点来了：我们此时不需要使用props在子组件接收数据，而是直接在子组件引用的孙组件上面绑定v-bind=“$attrs”，在这里此段代码就像导管一样，直接将数据传给了孙组件。首先我们需要先在父组件引用的子组件上使用自定义属性，将值先传给子组件，这里我们定义自定义属性:grandson。

2025-01-03 10:01:22 313

原创 Vue前端路由跳转

vue-router是vue的一个插件库，专门用来实现SPA应用SPA：1.单页Web应用（single page web application）2.整个应用只有一个完整的页面3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新4.数据需要通过api接口请求获取一个路由就是一组映射关系（key-value）key为路径，value可能是function或component。

2025-01-02 14:54:50 463

原创事件总线 - EventBus

eventBus是一个很简单但是也很实用的方案，适合组件跨级传递消息，我也经常在项目中使用这种方式，推荐一下，大家可以去了解一下这种方式。【需要注意的是：使用事件总线eventBus，使用不恰当的话，有可能会出现事件多次执行。在 Vue3 中，关于事件总线模式可以被替换为使用外部的、实现了事件触发器接口的库，例如。off 和 $once 方法；并且没有提供兼容的功能。在 Vue3.0+ 的版本中，Vue 移除了。方式二、将事件总线挂载到全局实例app上。，这是官方推荐的事件总线替换方案。

2025-01-02 14:33:19 420

原创单页面应用（SPA）

单页面应用的核心理念是使用JavaScript动态地更改HTML文档的内容，而无需重新加载整个页面。这种模式可以显著提高Web应用的性能和用户体验，特别是在那些需要频繁用户交互的应用中。

2024-12-24 19:04:43 414

原创 VUE的SEO优化

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

2024-12-24 18:47:32 390

原创 vue2和vue3的差异

Vue 2 中，Mixins 是一种全局特性，可以在多个组件之间共享代码。你可以创建一个 Mixin 对象，然后在组件中通过 Mixins 选项引入这个对象，从而将 Mixin 中的属性和方法合并到组件中；如果多个 Mixins 中有相同的属性或方法，可能会导致命名冲突。Vue3的Hooks允许你将相关的逻辑组合到一起，形成一个逻辑单元，组件内部使用的，而不是全局的，这减少了命名冲突和耦合度。Pinia 更简洁和模块化，使用 defineStore 函数创建状态，避免了冗长的代码结构。

2024-12-24 18:38:13 286

原创什么是token？token是用来干嘛的？

token其实说的更通俗点可以叫暗号，在一些数据传输之前，要先进行暗号的核对，不同的暗号被授权不同的数据操作。Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。◾ 拿着这个token，可以在当前登录的账号下进行请求业务，发送请求时，token会放在请求头里，服务器收到这个业务请求，验证token，成功就允许这个请求获取数据。

2024-12-11 19:28:48 5656

原创 vue3 defineEmits/defineProps/defineModel 的用法

emits(‘update:sideCollapse’, 要变成的值)相当于多绑定了一个自定义事件 update:sideCollapse。父组件绑定在子组件中绑定自定义事件，子组件可用 emits 执行。当我们想把父组件传过来的参数变成双向绑定时，即可读也可写。父组件可直接向子组件传值（只读）

2024-12-11 18:18:22 329

原创 Nginx反向代理

Nginx 反向代理是一种服务，它接收客户端的请求，将请求转发到一个或多个后端服务器，获取响应，然后将服务器的响应返回给客户端。反向代理就是代理服务端，是客户感受不到的。说明：使用一台代理服务器（下图中的深色服务器）对底层的应用服务器（下图中的浅色服务器）进行代理。将他们的地址信息对客户端屏蔽，客户端只需要访问代理服务器即可，代理服务器会将请求转发给底层的真正起作用的应用服务器。但在客户端眼里，服务器只有唯一的一台，就是代理服务器。

2024-12-03 20:00:12 331

原创 Vue3中的toRef 与 toRefs

● toRefs 返回一个对象，该对象中的每个属性都是 ref 对象，通过该 ref 对象可以访问原始响应式对象的对应属性。● toRef 返回一个 ref 对象，可以通过该 ref 对象访问原始响应式对象的属性，修改 ref 对象的值会影响到原始对象。● toRefs 函数用于将一个响应式对象转换为一个包含多个属性的 ref 对象集合。● toRef 函数用于创建一个指定响应式对象的属性的可响应式引用 (ref)。● toRef 接收两个参数，一个是响应式对象，另一个是响应式对象上的属性名。

2024-11-06 18:40:26 357

原创 Vue3中的shallowReactive 与 shallowRef

● shallowRef 用于创建一个包含基本值或对象引用的 ref 对象，它也是浅的，只会监听到根属性的变化，并将变化通知给视图。● 当使用 shallowRef 包装一个对象时，对该对象内部属性的修改不会被监听，只有重新赋值整个对象的操作才会引起响应式更新。● shallowReactive 用于创建一个浅响应式对象，它只会对根属性进行响应式处理，而不会递归到对象的嵌套属性。● 当对浅响应式对象进行操作时，只有根属性的变化会触发视图更新，而嵌套属性的变化不会触发。

2024-11-06 16:28:09 224

原创 Vue路由跳转传参

params：跳转传递的参数，需要在路由文件的path中注明参数（比如：path:‘/pageB/:id’）params：跳转传递的参数，需要在路由文件的path中注明参数（比如：path:‘/pageB/:id’）跳转的页面使用this.$route.params接收参数。跳转的页面使用this.$route.query接收参数。name：跳转页面在路由文件中的name，不需要加"/"跳转的页面使用useRoute().params接收参数。path：跳转的页面的路径。path：跳转的页面的路径。

2024-11-06 16:20:17 809

原创单页面应用程序首屏优化（SPA）优化的方法

使用CDN分发静态资源，如JavaScript库和CSS文件，可以减少服务器负载并提供更快的加载速度。使用Webpack等模块打包器，通过代码分割技术将代码拆分为多个小块，只有需要的内容才会被下载。对CSS和JavaScript文件进行压缩，移除不必要的空格、注释和代码，以减少文件大小。对图片和视频进行压缩，使用适当的格式（如WebP），并提供不同分辨率和尺寸的版本。对于即将访问的页面或组件使用预加载，可以预先获取必要资源，以加快后续访问速度。，来缓存静态资源，减少重复请求。来优化连接和资源的预取。

2024-10-29 20:41:11 416

空空如也

空空如也