- 博客(44)
- 收藏
- 关注
RSS订阅原创 学习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 一 模块化，全局变量，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 六，兄弟组件传参，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学习笔记(三) 生成虚拟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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人