Vue3中常用的APIref、reactive Vue 3 的响应式系统是其能够自动更新视图的基石。当修改一个响应式数据时，Vue 能够追踪到这个变化，并自动重新渲染依赖于这个数据的组件部分。ref 和 reactive 就是创建这种响应式数据的两种主要方式
reactive
reactive() 是 Vue 3 提供的用于创建响应式对象的函数
它接收一个普通的 JavaScript 对象（或数组），并返回该对象的响应式代理（Proxy）
12345678910import { reactive } from 'vue';const state = reactive({ count: 0, user: { name: 'Alice', age: 30 }, hobbies: ['reading', 'music']});
现在，对 state 的任何修改都会触发响应式更新
1234// 所有这些都是响应式的state.co ...
懒加载（滚动加载）
在我们平常的开发中，我们会加载一些列表数据，这些数据的加载会影响到页面的加载速度，导致用户的等待时间变长，影响用户的体验
所以很多数据量比较大的列表数据都会有翻页的功能，但是翻页会让用户多一些操作，影响用户的体验
所以有一种懒加载的方式就是滚动加载，当用户滚动到列表的底部时，再加载下一页的数据，这样可以避免一次性加载所有数据，导致页面的加载速度变慢，同时也减少了用户的操作，提升了用户的交互体验
平时我常用的滚动加载主要是传统 scroll 监听，但是最近深入研究了一下这个，发现还有其他的方法来实现滚动加载
基本原理无论用哪种方法，逻辑都差不多：
监听滚动事件（scroll 或 IntersectionObserver）
判断是否接近底部
触发加载函数
请求数据并渲染
直到数据加载完成
两种常见实现方式方式一：传统 scroll 监听12345678910111213141516171819202122232425262728293031<div id="list" style="height: 400px; overflow ...
Express&Koa2ExpressExpress的基本使用1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071const express = require("express");// 1.创建express的服务器const app = express();/* express提供给我们的中间件 在客户端发送post请求时，会将数据放到body中 客户端可以通过json的方式传递，也可以通过form表单的方式传递 - x-www-form-urlencoded - 是一种在 HTTP 请求中用于编码表单数据的方式。它是默认的表单数据编码类型， 特别是在通过 HTML 表单提交数据时，如果表单的 enctype 属性没有被显式指定为其他值，那么就会使用 application/x-w ...
Content-Type的深度解析Content-Type 是 HTTP 协议中的核心头部字段，用于标识传输数据的媒体类型（MIME 类型），确保客户端和服务端能正确解析和处理数据。以下从定义、结构、类型、应用场景及最佳实践等方面系统性介绍：
一、基本概念与作用
定义Content-Type 遵循 MIME（Multipurpose Internet Mail Extensions）标准，最初用于电子邮件系统，后扩展至 HTTP 协议。其格式为 主类型/子类型; 参数，例如 text/html; charset=UTF-8。
核心作用• 请求端：告知服务器如何解析请求体的数据格式（如 JSON、表单数据等）。
• 响应端：指示客户端（如浏览器）如何解析返回的数据（如渲染 HTML、下载文件等）。
• 兼容性：通过标准化类型减少数据解析错误，提升跨平台兼容性。
二、语法结构与参数
语法规则
1Content-Type: type/subtype ;parameter=value
• 主类型（type）：大类标识，如 text、image、application。
• 子类型 ...
Picgo与MinIO搭建图床
此篇文章需要先搭建MinIO服务，若是还没搭建此服务，可以参考笔者往期的文章。
PicGo 是一款开源免费的桌面工具，能快速将本地图片上传到云图床（如GitHub、七牛云等），并自动生成网络链接，支持拖拽、剪贴板上传，兼容Windows/macOS/Linux，可与Typora等编辑器无缝集成，大幅简化写作、博客等场景的图片插入流程。
1.下载Picgo并安装
Picgo是一款开源的工具，所以我们可以直接访问相应的 GitHub 地址进行下载 Molunerfinn/PicGo: :rocket:A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder ，这里我是下载的最新版，如果想要稳定，可以下载相对老的一些版本。
下载完成后进行安装，安装过程中没有什么需要配置的地方，无脑下一步即可。
2.下载Node环境PicGo 是基于 electron 开发的图片上传工具，它内置插件系统以提供更强大的功能 ...
Minio 部署
MinIO 是一款开源的高性能分布式对象存储系统，专为云原生环境设计，完美兼容 Amazon S3 API，支持存储图片、视频、日志等非结构化数据（单对象最大 5TB）。其核心优势包括：
极简部署：单节点仅需 512MB 内存，支持 Docker 一键部署，30 秒内可快速搭建私有云存储；
企业级可靠性：通过纠删码技术实现数据冗余（允许半数节点故障自动修复），并具备 Bitrot 保护机制实时检测/修复数据损坏；
生态融合：无缝集成 Kubernetes、Spark 等工具，且提供细粒度权限控制与审计日志，适用于 AI/ML 训练、数据湖、灾备等场景。作为轻量级 S3 替代方案，MinIO 在标准硬件上可达 183GB/s 的读写性能，是构建混合云存储的理想选择。
当然，笔者部署Minio是为了替代OSS服务来支持我的图床服务，由于我的服务器配置比较低（2核2g），所以这里就不展示使用Docker的部署方案了。
1.创建文件目录首先在 /home 文件夹下创建一个 project 文件夹，然后在此文件夹下继续创建一个名叫 min ...
Git
安装无脑下一步
配置name和email
12git config --global user.name "earstrive"git config --global user.email "1491157227@qq.com"
使用git
查看当前仓库状态
1git status
初始化仓库
1git init
文件状态
未跟踪
刚刚添加到项目中的文件处于未跟踪状态
已跟踪
暂存
未修改
已修改
未跟踪 —> 暂存
12git add <filename> # 将文件切换到暂存状态git add * # 将所有已修改（未跟踪）的文件暂存
暂存 —> 未修改
12git commit -m "xxxx" # 将暂存的文件存储到仓库中git commit -a -m "xxxx" # 提交所有已修改文件（未跟踪的文件不会提交）
未修改 —> 修改
修改代码后，文件会变为修改状态
查看记录
1git log
Git提交的常 ...
Cesium开始
创建Vue项目
安装Cesium：npm install cesium
将node_modules中的cesium目录下的Build/Cesium中4个目录拷贝到public中
组件中编写代码
1234567891011121314151617181920212223242526272829303132333435<script setup>import * as Cesium from "cesium";import "cesium/Build/Cesium/Widgets/widgets.css";import { onMounted } from "vue";// 设置cesium tokenCesium.Ion.defaultAccessToken ="你的token";// 设置cesium静态资源目录window.CESIUM_BASE_URL = "lib/cesium";onMounted(() => ...
TypeScript常用类型类型注解TS是JS的超级，所有JS代码都是合法的TS代码
通过类型注解可以为变量设置类型
123456789101112131415let a: string = "hello";let b: number = 123;let c: boolean = false;function greet(name: string, times: number): string { const str = `你好${name}`; for (let i = 0; i < times; i++) { console.log(str); } return str;}greet("孙悟空", 5);
类型推断当我们没有明确指定一个变量的类型时，TS会自动对变量的类型进行推断，所以，通常情况下我们不需要为变量设置类型注解，都交给TS自动推断
1234let a: string = "hello"; // str ...
