cles's blog

CSRF和XSSCSRFCross Site Request Forgery跨站请求伪造 本质是：恶意网站把正常用户作为媒介，通过模拟正常用户的操作，攻击其登录过的站点 原理如下： 用户访问正常站点，登录后，获取到正常站点的令牌，以cookie的形式保存 用户访问恶意站点，恶意站点通过某种形式去请求了正常站点(请求伪造)，迫使正常用户把令牌传递到正常站点，完成攻击 防御方式1：Cookie限制Cookie的SameSite，禁止跨域附带Cookie，只需要把Cookie设置的SameSite设置为Strict即可 SameSite可以取下面的值 Strict：严格模式，所有跨站请求都不要附带Cookie Lax：宽松模式，所有跨站的超链接，get请求的表单，预加载连接时会发送Cookie，其他情况不发生 None：无限制 缺点：只能浏览器端使用，并且低版本不支持 方式2：非Cookie令牌在验证请求合法性的时候，在请求头里面或者请求体里附带一个token 方式3：验证referer和Origin页面中的二次请求都会附带referer或者origin请求头，向服务器表示该 ...

http请求概述http是基于 请求-响应 的方式完成通信的，每一次通信都是由客户端向服务端发出请求，传递一些消息过去，然后经过服务器处理程序处理后，响应给客户端一些消息。 http协议规定： 每次 请求-响应 都是独立的，相互之间互不干扰，这种模式的协议我们称之为 无状态协议。 每次 请求-响应 传递的消息都是**纯文本(字符串)**，而且文本格式必须按照http协议规定的格式书写。 请求的消息格式请求消息格式有三部分组成 请求行：高度概括了客户端想要干什么 请求头：描述了请求的一些额外信息 请求体：包含了要给服务器传递的正文数据。请求体是可以省略的 请求行请求行是整个http报文的第一行字符串，它包含三个部分：请求方法 路径+参数+hash 协议和版本 重点关注的是请求方法 get获取资源 post提交消息 put修改数据 delete删除数据 其中get和delete请求不能有请求体，而post和put请求可以有请求体 浏览器遵循了上面的规范，这带来了get和post的诸多区别。比如，由于get请求没有请求体，所以要传递数据只能把数据放到url的参数中 在浏览器中 ...

概述Promise,要我解释它是个什么东西，我一时间还真的不能好好组织语言，在我的理解里，Promise，字面意思他是一个承诺，而在JavaScript里面他是一种异步操作、任务的解决方案。 同步与异步的理解同步是一种阻塞的任务，异步是非阻塞式的任务 异步例子： 早上起来赶着去上课，买了早饭，可以一边赶路一边吃。 同步例子： 早上起来赶着去上课，买了早饭，我们得先赶去教室再吃早饭，也可以先吃早饭再赶去教室。 同步强调赶路和吃早饭这两个任务不能同时进行，在同一时间，要么吃早饭要么赶路。不管是同步还有异步，都是合理的。因为最终都指向了一个结果：到教室上课 显然同步的方式会产生额外的时间消耗，在计算机编程语言里面，显然是不合理的。在计算机的世界中，这样发生阻塞是非常致命的。通常会导致渲染线程(主线程)阻塞。界面卡在某一个地方。对于异步任务的执行，现如今使用的最多的方案是多线程和异步。 在JavaScript中使用的是异步的方式进行解决。 Promise在JavaScript里面，Promise描述了一个异步操作类，他在编程语言里被抽象成一个类，每个实例化的Promise就代表具体的异 ...

概述本文为一个搭建vue3+ts+less+webpack项目的一个笔记向的文章，记录了各种一个vue项目搭建的最基本的开发配置。 依赖node版本为v18.20.2npm版本10.5.0 初始化git本地仓库与package.json文件新建文件夹并且初始化git仓库,创建.gitignore文件 注意这几行命令无法在cmd中运行，只能在powershell和linux的终端环境中运行 123456mkdir your_project_name #创建项目目录cd your_project_name #进入项目目录git init #创建本地git仓库echo '/node_modules' >> .gitignore #将node_modules写入该忽略文件npm init -y#tsc --init # 前提要先全局安装tsc 开发时依赖项目开发需要使用到各种工具，分为开发时依赖，运行时依赖。这里说一下这两个依赖的区别，像webpack，当项目部署上线的时候，部署的是js、css、html、图片等文件，webpack只是我们构建项目的一个工 ...

cookie技术背景http协议是一个无状态的协议，无状态就意味着服务器不知道这次请求的人，跟之前请求的人是否是同一个。 所以cookie出现的主要应用于记录用户的部分信息，这部分信息让客户端存储起来，然后每次请求的时候将这部分信息带给服务端，这样服务端就能区分用户的神分信息，还有一些偏好设置。 场景假设服务器有一个接口，通过请求这个接口，可以添加一个系统管理员，但是，并不是系统中的用户都有权力进行这个操作，由于http协议无状态的特性，所以就需要用到一种身份验证的解决方案。这个解决方案就是cookie 具体方案 客户端登录成功之后，服务器会颁发一个令牌给客户端 后续客户端每次请求，都需要携带这个令牌 cookie的组成cookie是浏览器中特有的一个概念，他就像浏览器的专属卡包，管理着各个网站的身份信息。每一个cookie就相当于是某个网站的一个令牌，它记录了这么些信息： key：键，比如 身份编号 value：值，可以是任何信息 domin：域，表达这个cookie所属的网站，比如clesbit.top,表示这个cookie是属于clesbit.top这个网站的。 pat ...

小程序学习打卡最近在学习移动端的开发，发现了uniapp这个框架，可以一套代码多端运行，这个框架的学习成本很低，因为它是基于vue的，所以对于vue的开发者来说，学习成本几乎为0。几天下来的体验，发现uniapp的开发体验还是很不错的，但是也有一些坑。生态方面不如肯定是大大不如react、vue这些框架，但是对于一些小型项目来说，uniapp还是很不错的选择。 而且有一个一整套的开发工具，Dcloud也稍微体验了一下，可以脱离后端开发一个小项目。 有些比较麻烦的点，要是微信、支付宝、抖音、头条等等的小程序都要适配，这个就有点麻烦了，因为每个端的api有些不一样，有些功能也不一样，所以要是要适配的话，就要写一些平台相关的代码，这个就有点麻烦了。 网络请求api接触小程序网络请求这块的时候，发现aioxs这个库在小程序端是不支持的，uniapp官方推荐使用uni.request这个api，但是这个api的使用方式和aioxs还是有一些差别的，所以我就封装了一个网络请求的库，方便以后的使用。 12345678910111213141516171819202122232425262728293 ...

为什么需要状态管理通常在一个复杂的应用当中，不妨想象一下:组件A是一个导航条，上面有一个部分展示了用户的用户名，组件B是用于用户详细资料展示的组件(通常是可以修改的).如果此时用户修改了自己的用户名，那那意味着导航条上的用户名是不是也要跟着更改，并且其中会涉及异步操作。(因为修改用户资料肯定是要先向服务端发送修改的请求，然后再根据请求的返回结果去同步数据) 这个时候客户端要怎么去更新所有组件中用到“用户”相关的数据。 那就硬着头皮写呗，一顿操作下来就会发现，在不同的组件里面写了很多很多类似的数据同步的代码。而且一旦项目大了起来，就容易逻辑紊乱，出现一些奇奇怪怪的bug 数据流向无法掌控 没有办法很好的调试 如何解决这就可以扯到一个状态管理模式，让数据单向流动，也就是常说的 单项数据流 vuex的文档解释的非常清楚了。通过一个全局的应用的单例，并且遵循一定的规则，项目的代码结构将会更加清晰并且更易于维护。 vuexvuex,大名鼎鼎的vuex。这部分好像没有啥要记录的，vue2和vue3的写法不大一样而已。 实际上在简单的应用上没必要上vuex进行状态管理,vue3之后可以自己用pr ...

组合式函数在vue3中，不同的组件有时候会存在一些相同的逻辑和，比如一些特定的字符串转换操作，数据的清洗。这个时候我们通常会将这一部分的逻辑封装成一个函数或者工具类，以便后续开发的对齐进行一个复用。以下是一个简单的日期格式化函数示例 12345// dateFormatter.jsexport function formatDate(date, format) { const options = {year: 'numeric', month: '2-digit', day: '2-digit'}; return new Date(date).toLocaleDateString(undefined, options);} 在vue组件中使用这个函数： 1234567891011121314151617181920212223//vue<template> <div>{{formattedDate}}</ ...

响应式api响应式api相关知识复习。 ref()这个api会返回一个代理对象，通过.value去获取值。该api的设计主要是为了弥补reactive()无法代理数字、字符串类型。当传入一个对象的时候，ref内部实际上调用的是reactive()这个api。 ref嵌套场景 123456789import {ref, shallowRef} from "vue"// 使用 refconst deepRef = ref({a: ref({b: 2}), c: "c"});console.log(deepRef.value.a.b); // 输出 2// 使用 shallowRefconst shallow = shallowRef({a: ref({b: 2}), c: "c"});console.log(shallow.value.a.value.b); // 输出 2 当存在嵌套的时候，使用vue会自动把内层的ref进行 ...

vue2和vue3的一些区别为什么vue3中去掉了vue构造函数？在过去，如果遇到一个页面中有多个vue应用的时候，往往会遇到一些问题,像这样 vue1234567891011121314<!--vue2--><div id="app1"></div><div id="app2"></div><script> Vue.use(...) // 会影响所有的vue实例 Vue.mixin(...) // 会影响所有的vue实例 Vue.component(...) // 会影响所有的vue实例 new Vue({ // 配置项}).$mount("#app1") new Vue({ // 配置项}).$mount("#app2")</script> 在vue3中，我们可以这样做 vue12345678910111213<!--vue3--& ...