自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(44)
  • 收藏
  • 关注

原创 学习node.js 十五,短链接,单设备登录,扫码登录

短链接是一种缩短长网址的方法,将原始的长网址转换为更短的形式。它通常由一系列的字母、数字和特殊字符组成,比起原始的长网址,短链接更加简洁、易于记忆和分享。短链接的主要用途之一是在社交媒体平台进行链接分享。由于这些平台对字符数量有限制,长网址可能会占用大量的空间,因此使用短链接可以节省字符数,并且更方便在推特、短信等限制字数的场景下使用。另外,短链接还可以用于跟踪和统计链接的点击量。通过在短链接中嵌入跟踪代码,网站管理员可以获得关于点击链接的详细统计数据,包括访问量、来源、地理位置等信息。

2024-09-09 16:23:03 1329

原创 前端面试实录,(回答均为个人见解)

用于协调异步任务的顺序,传递信息以及处理用户交互。由调用栈,执行队列,事件循环,三部分组成。当主线程的同步代码执行完毕后,事件循环会开始工作。它首先检查微任务队列,如果有微任务,则依次执行微任务队列中的所有任务,直到微任务队列为空。然后,事件循环会从宏任务队列中取出第一个宏任务执行。每个宏任务执行完毕后,会再次清空微任务队列,并继续执行下一个宏任务,如此循环往复。node的事件循环与浏览器上面的事件循环有什么区别实现方式不同node.js。

2024-09-08 15:52:12 1665

原创 学习react二,babel,swc

SWC 既可用于编译,也可用于打包。对于编译,它使用现代 JavaScript 功能获取 JavaScript / TypeScript 文件并输出所有主流浏览器支持的有效代码。我们可以发现,对于数组的新特性,没有进行编译,我们要支持新特性例如 Object.assign Array.prototype.find 等。转换代码,只需要调用bebel的transform函数,将code和option传入即可。,提供了JavaScript的编译过程,能够将源代码转换为目标代码。简单点来说swc实现了和。

2024-09-08 15:44:06 1502

原创 学习node.js 十四,http强缓存与协商缓存

强缓存之后则不需要向服务器发送请求,而是从浏览器缓存读取分为(内存缓存)| (硬盘缓存memory cache(内存缓存)内存缓存存储在浏览器内存当中,一般刷新网页的时候会发现很多内存缓存disk cache(硬盘缓存)硬盘缓存是存储在计算机硬盘中,空间大,但是读取效率比内存缓存慢当涉及到缓存机制时,强缓存优先于协商缓存。当资源的强缓存生效时,客户端可以直接从本地缓存中获取资源,而无需与服务器进行通信。强缓存的判断是通过缓存头部字段来完成的,例如设置了合适的和Expires字段。

2024-09-06 14:57:12 1141

原创 学习react一,环境搭建,基础语法

public 公共目录srcassets 静态资源App.css 根组件样式App.tsx 根组件index.css 全局css文件main.tsx 全局tsx文件vite-env.d.ts 声明文件.eslintrc.cjs eslint配置文件.gitignore git忽略文件index.html 入口文件index.htmlpackage.json 项目依赖模块文件tsconfig.json ts配置文件。

2024-09-06 14:31:29 1049

原创 学习node.js十三,文件的上传于下载

第二步:将这些分片的文件片,编入编号和文件名后以formData的格式上传,并且将结果放入promise.all这个方法中,如果全部成功的化,那么就调用合并函数,将这个视频进行合并。获取到文件的信息之后,利用file原型上面的 blob对象的slice方法来进行分割。下载是一种通过将文件内容以流的形式发送给客户端,实现文件下载的方法。合并文件:先读取分片文件的文件名,然后把这些文件重新的进行排序,合成一个新的文件。// 4. 设置a标签的href属性为blob地址。放到接口上面,就可以将分完片的文件上传。

2024-09-05 15:35:21 1532

原创 学习node.js 十二 net模块,puppeteer的使用

Puppeteer是一个由Google开发和维护的Node.js库,它提供了一个高级的API,用于通过Headless Chrome或Chromium控制和自动化网页操作。它可以模拟用户在浏览器中的交互行为,例如点击、填写表单、截屏、生成PDF等,同时还能够获取网页的内容和执行JavaScript代码。自动化浏览器操作:Puppeteer可以以无头模式运行Chrome或Chromium,实现对网页的自动化操作,包括加载页面、点击、表单填写、提交等。if(text === (te || '前端')){

2024-09-02 09:23:02 746

原创 学习node.js 十一 使用node.js操作redis和自动任务

定时任务是指在预定的时间点或时间间隔内执行的任务或操作。它们是自动化执行特定逻辑的一种方式,可用于执行重复性的、周期性的或计划性的任务。执行后台任务:定时任务可用于自动执行后台任务,如数据备份、日志清理、缓存刷新等。通过设定适当的时间点或时间间隔,可以确保这些任务按计划进行,而无需手动干预。执行定期操作:定时任务可用于执行定期操作,如发送电子邮件提醒、生成报告、更新数据等。通过设定适当的时间点,可以自动触发这些操作,提高效率并减少人工操作的需求。

2024-08-25 16:08:49 1032

原创 学习node.js 十 redis的基本语法

Redis(Remote Dictionary Server)是一个开源的内存数据结构存储系统,它提供了一个高效的键值存储解决方案,并支持多种数据结构,如字符串(Strings)、哈希(Hashes)、列表(Lists)、集合(Sets)和有序集合(Sorted Sets)等。在哈希表中,键和值都是存储的数据项,并通过哈希函数将键映射到特定的存储位置,从而实现快速的数据访问和查找。LPUSH key element1 element2 …:将一个或多个元素从列表的左侧插入,即将元素依次插入列表的头部。

2024-08-25 10:11:41 1001

原创 学习node.js 九 ORM knex,prisma

Prisma 是一个现代化的数据库工具套件,用于简化和改进应用程序与数据库之间的交互。它提供了一个类型安全的查询构建器和一个强大的 ORM(对象关系映射)层,使开发人员能够以声明性的方式操作数据库。Prisma 支持多种主流数据库,包括 PostgreSQL、MySQL 和 SQLite,它通过生成标准的数据库模型来与这些数据库进行交互。使用 Prisma,开发人员可以定义数据库模型并生成类型安全的查询构建器,这些构建器提供了一套直观的方法来创建、更新、删除和查询数据库中的数据。

2024-08-24 11:06:37 1624

原创 学习node.js 八 express

后端可以设置响应头并且抛出,前端即可使用res.json({code: 200})})前端读取:console.log(headers.get('count')) //读取自定义响应头。

2024-08-21 15:30:15 721

原创 学习node.js 七 http 模块

它基于一个简单的原则:将动态生成的内容(如动态网页、API请求)与静态资源(如HTML、CSS、JavaScript、图像文件)分开处理和分发。通过将动态内容和静态资源存储在不同的服务器或服务上,并使用不同的处理机制,可以提高网站的处理效率和响应速度。模式,它充当服务器和客户端之间的中介,将客户端的请求转发到一个或多个后端服务器,并将后端服务器的响应返回给客户端。可以引入node的url库,可以帮我们去解析路由和拿到get请求的参数。所以我们自己去写,就需要很多的判断,所以就需要一个额外的库。

2024-08-20 16:28:08 1305

原创 学习 node.js 六 Markdown 转为 html,zlib

3. browserSync 一个强大的开发工具,它可以帮助您实时预览和同步您的网页更改。当您对Markdown文件进行编辑并将其转换为HTML时,BrowserSync可以自动刷新您的浏览器,使您能够即时查看转换后的结果。Marked是一个功能强大且易于使用的库,它为您提供了丰富的选项和扩展功能,以满足各种转换需求。和解压缩的功能,以便在应用程序中减少数据的传输大小和提高性能。即变量如果包含 ‘<’、‘>’、'&'等HTML字符,会被转义成字符实体,像。里面可以写任意的 js,用于流程控制,无任何输出。

2024-08-20 10:50:20 855

原创 学习node.js 五 fs模块,crypto

读取文件 readFile 读一个参数 读取的路径, 第二个参数是个配置项encoding 支持各种编码 utf-8之类的flag'a': 打开文件进行追加。如果文件不存在,则创建该文件。'ax': 类似于'a'但如果路径存在则失败。'a+': 打开文件进行读取和追加。如果文件不存在,则创建该文件。'ax+': 类似于'a+'但如果路径存在则失败。'as': 以同步模式打开文件进行追加。如果文件不存在,则创建该文件。'as+': 以同步模式打开文件进行读取和追加。如果文件不存在,则创建该文件。'r'

2024-08-19 15:34:22 1008

原创 学习node.js 四 ffmpeg,events,util

FFmpeg全称为Fast Forward Moving Picture Experts Group,于2000年诞生,是一款免费,开源的音视频编解码工具及开发套件。核心 API 都是采用异步事件驱动架构,简单来说就是通过有效的方法来监听事件状态的变化,并在变化的时候做出相应的动作。在events里,说过,node.js 核心 API 都是采用异步事件驱动架构,遵循回调的模式去写的。FFmpeg 本身是一个庞大的项目,包含许多组件和库文件,最常用的是它的命令行工具。里会有三个exe文件,复制此时的地址。

2024-08-19 10:53:23 851

原创 学习node.js 三 child_process 子进程

1. spawn 用于执行一些实时获取的信息因为spawn返回的是流边执行边返回,exec是返回一个完整的buffer,buffer的大小是200k,如果超出会报错,而spawn是无上限的。execFile 适合执行可执行文件,例如执行一个node脚本,或者shell文件,windows可以编写cmd脚本,posix,可以编写sh脚本。子进程是Nodejs核心API,可以写一些shell命令或者编写前端工程化工具之类的,他也有很大的用处,以及处理CPU密集型应用。execFileSync 则使用的较少。

2024-08-18 15:51:50 750

原创 学习node.js 二 path模块,os模块,process

和之前的os.arch一样。

2024-08-16 09:58:58 1127

原创 学习node.js 一 模块化,全局变量,SSR,CSR

服务端渲染请求数据和拼装都在服务端完成,而我们的Vue,react 等框架这里不谈(nuxtjs,nextjs),是在客户端完成渲染拼接的属于CSR。也是支持commonJs导入的集中格式文件,需要注意的是,esm并不能解析json文件,所以需要高版本的node采用特殊方式。都在window,nodejs在global,不同的环境还需要判断,于是在ECMAScript 2020 出现了一个。在node.js中定义全局变量,需要使用global可以在引入的文件中也可以访问到该变量,例如。

2024-08-15 15:22:22 1184

原创 学习 Vue Router 三 元信息,过渡功效,滚动行为,动态路由

它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push() 或 router.replace() 来手动导航,才能显示该新路由。使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。1. 通过添加一个名称冲突的路由。上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡,你可以将。想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用。中访问路由的元信息数据。它可以指定滚轮的高度。

2024-08-14 13:50:54 581

原创 学习vue Router 二 嵌套路由,命名视图,重定向,导航守卫(登录案例,loadingBar案例)

命名视图可以在同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示。命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。命名视图的概念非常类似于“具名插槽”,并且视图的默认名称也是 default。一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。形式配置,访问/ 重定向到 /user (地址栏显示/,内容为/user路由的内容)你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受。登录校验,如果登录了就可到index页面,没有登录那么就先登录。

2024-08-14 09:54:41 700

原创 学习vue Router 一 起步,编程式导航,历史记录,路由传参

这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为。1为history模式,原理是调用h5的history方法,2为hash模式,原理为调用location.hash进行跳转。query 传参配置的是 path,而 params 传参配置的是name,在 params中配置 path 无效。,但是在history中其不会重复保存记录,而是替换原有的vue组件;

2024-08-13 11:18:03 1119

原创 学习pinia

storeToRefs原理: 像使用toRaw将proxy对象转换为原对象,然后通过循环给属性都调用toRefs方法将属性都转为ref对象,这样解构出来的属性值就是响应式的了。$patch传入一个回调,进行修改,回调上面有一个参数state,公告state去修改,主要的目的就是为了带一下条件的去修改值。在vue中需要调用导出的pinia 调用这个useStore函数,拿到他的返回值对象即可进行使用。类似于Vuex 的abscribe 只要有state 的变化就会走这个函数。修改state值的方式。

2024-08-12 16:09:58 625

原创 学习vue 九 nextTick 函数式编程 编译宏 环境变量

所有的同步任务都是在主进程执行的形成一个执行栈,主线程之外,还存在一个"任务队列",异步任务执行队列中先执行宏任务,然后清空当次宏任务中的所有微任务,然后进行下一个tick如此形成循环。主要使用h函数去写模板,为什么要使用h函数,因为h函数会直接调用createVNode函数,生成虚拟dom性能上面会有所提升。创建 .env.production 在执行npm run build 的时候他会自己加载这个文件。因为这些环境变量在打包的时候是通过硬编码通过Json.stringify的方式注入到浏览器的。

2024-08-12 10:00:52 898

原创 学习vue3 八 全局函数和变量,编写插件,scoped,样式穿透,vue3新增的css特性

因为vue3没有prototype属性所以要使用 app.config.globalProperties 来在全局绑定函数或者变量vue2的用法vue3的用法在main.ts内return '加上' + str需要声明文件declare module 在组件中使用时,才会有提示在组件中使用,模板中直接插值语法,setup中需要使用getCurrentInstance获取当前实例,然后通过当前实例的props属性找到.proxy?

2024-08-09 15:22:04 810

原创 学习vue3 七 v-model用于组件通信,自定义指令,自定义hooks

请输入:提交

2024-08-08 15:29:31 1086

原创 学习vue3 六,兄弟组件传参,provide/inject

中$on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了。通常父组件给子组件传递数据时,使用props的方式,如果是比较深得组件嵌套的话,就需要逐层的进行传递,这样的话,可能会比较麻烦。给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide。A组件提交一个事件用来传递参数,父组件接受这个事件拿到值,通过props的方式再转给B组件。也可以通过on('*')的方式监控所有组件。

2024-08-07 14:15:47 688

原创 学习vue3 五,传送,缓存组件以及过渡和过渡列表

在这些props后接要自定义的名字即可换成自己想要的,相当于起别名也可以指定过渡时间可以分别指定,离开和进入的时间自定义class只要是可以和css的动画库进行连用案例:我们以animate.css为例安装:npm install animate.css -S引入:在main.ts中 import "animate.css"

2024-08-06 14:44:24 1051

原创 学习vue3四 (全局,局部,递归,动态组件 和 插槽)

表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的

2024-08-05 14:19:20 957

原创 学习vue3 三,组件基础,父子组件传值

通过defineProps方法,参数传一个对象,将要接受的数据通过属性的方式写入,如果要进行一些配置也可以使用对象的形式进行配置,如title。注意需要在onMounted里打印的原因是,setup的生命周期早于子组件挂载,也就是子组件还没有挂载就打印输出所以会是undefined。是通过defineEmits派发一个事件,绑定一个自定义事件,通过一些vue有的事件去触发这个emit从而达到传值的目的。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

2024-08-05 09:50:07 763

原创 学习vue3二 computed,watch,watchEffect

就是当依赖的属性的值发生变化的时候,才会触发他的更改,如果依赖的值,不发生变化的时候,使用的是缓存中的属性值。他们的区别是:函数模式只可以读取计算属性,对象模式可以对计算属性的值进行修改。也就是在函数里面用到的一些数据都会对其进行监听。使用reactive监听深层对象开启和不开启deep 效果一样。也会变成一个proxy数组,按照监听源数组的顺序进行排列。也是不能深层监听的,也就是用到哪个数据就监听哪个数据。在触发监听之前会调用一个函数可以处理你的逻辑例如。监听一个数据源,并执行相关回调函数。

2024-08-04 10:32:58 268

原创 对于vue3ref和reactive的学习笔记

也是只能对浅层次的数据做一个响应式,只能相应到obj.xxx如果xxx属性是一个对象的话,就没有响应式了,但是它也和shallowRef一样,如果reactive一起使用的话,也会收到reactive的影响导致视图进行更新,更新的为最新数据。是一个浅层次的响应式,也就是它只能检测到vuale的变化,不能检测到value下的属性的变化。拷贝一份对象为仅读,但是原reactive的修改也会引起他的变化。注意,不可以和ref对象的值写在一起,否则也会触发更新。如果原始对象是响应式的是会更新视图并且改变数据的。

2024-08-03 16:24:08 503

原创 学习typeScriprt基础语法二(类型,class)

但是并不会发生修改,也可以将let类型断言为const类型。类型断言,可以指定数据的具体类型,但是也仅仅是让ts编译器知道该类型。静态方法不可以调用非静态成员,非静态方法可以调用静态方法和属性。交叉类型,相当于多继承,即可以合并两个接口的所有类型约束。抽象类不可以被实例化,可有有抽象方法,继承他的类必要实现。1. class 的基本用法 继承 和 类型约束。联合类型,即我们可以指定一个变量的值是多个类型。继承,修饰符,super的用法。3. super 原理。

2024-07-30 10:41:32 117

原创 学习typeScriprt基础语法一(基本数据类型,引用数据类型)

如果AInterface 有name属性实现它的对象没有实现这个属性就会抛出异常,多或少都不可以。{} 空对像 所有原型上是object的都可以是该类型,但是这个的弊端是。Object 类型,所有原型上是object的都可以是该类型。1. 类型: [][] 2.Array如果gender属性可以不存在的话,可以在其后面加上一个?object 类型,只能是引用类型,不可以是基本类型。也可以进行函数重载,通过下面的例子可以生动的展示。也可以使用interface来指定数组的类型。

2024-07-30 10:30:05 284

原创 vue2源码学习笔记6 diff算法的实现

本笔记主要讲述diff算法

2024-05-01 15:56:49 985

原创 学习vue2源码笔记5

该部分写下计算属性的原理,watch的原理,以及数组的响应式的原理

2024-04-11 16:06:45 767 1

原创 手写vue二学习笔记4

关于vue的依赖收集也就是观察者模式的具体运用,

2024-04-05 17:42:57 1005 1

原创 手写vue2学习笔记(三) 生成虚拟dom并转换为真实dom

转换时需要区分,1. 是什么类型的子元素,上文中我们将ast语法树分为了元素类型和文本类型,那么我们需要分别对这两种类型进行处理,2. 如果是文本类型,含不含有大括号表达式,对于不含有和含有的分别要做不同的处理。VNode和ast语法树很类似,都是把语法或属性抽象为一个对象,不同的是ast描述的是语法本身而虚拟dom是描述的dom,可以增加一些自定义的属性。_c为元素,_v为文本,_s为变量也就是大括号表达式内得值,里面可以嵌套_c就也是其子元素。这个方法的作用就是,1.生成的函数执行得到虚拟DOM。

2024-03-10 16:50:49 1412 1

原创 手写vue2学习笔记(二)模板编译,ast语法树

上文中,我们已经实现了,数组的响应式和对象的响应式。接下来会学习到模板编译,ast语法树,虚拟DOM。

2024-01-16 16:48:22 505 1

原创 es6的新特性学习笔记

关于es6的学习体会

2023-12-17 17:10:36 458 1

原创 手写实现vue2学习笔记(一)对象和数组的响应式实现

关于vue源码的学习

2023-12-14 21:14:28 1125 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除