- 博客(189)
- 收藏
- 关注
RSS订阅原创 【JavaScript】包装类
# 包装类JS 提供了三个主要的包装类：`String`、`Number`、`Boolean`。如果尝试把原始类型（`string`、`number`、`boolean`）数据当成对象使用，JS 会自动将其转换为对应包装类的实例。我们先来看一下 "基本类型数据" 及 "其包装类的实例" 之间的异同：```jsconst strPrimitive = "I am a string";const strObject = new String("I am a string");console.
2024-07-13 16:20:06
321
原创 【Vite】构建完成后自动生成压缩包
有时候我们需要在项目构建完成后自动生成一个压缩包，以便于我们将构建后的文件方便地分享给他人。这时候我们可以使用 vite-plugin-zip-pack 插件来实现这个功能。我们可以这样配置 vite.config.js：```jsimport { defineConfig } from 'vite';import zipPack from 'vite-plugin-zip-pack';import { name as packageName } from '../package.json';
2024-07-10 21:52:26
235
1
原创 【Vite】修改构建后的 index.html 文件名
在 Vite 项目中，默认构建 `index.html` 。但有时候我们需要修改 `index.html` 为其他文件名，比如 `index-{时间戳}.html` 。我们可以这样配置 vite.config.js：```jsimport { defineConfig } from 'vite';import type { PluginOption } from 'vite';// 自定义插件type RenameHtmlPlugin = () => PluginOption;cons
2024-07-10 21:46:40
225
1
原创 【Vite】控制打包结构
配置 vite.config.json 文件：```tsimport { defineConfig } from 'vite';export default defineConfig({ build: { rollupOptions: { output: { assetFileNames(chunkInfo) { // css 文件 if
2024-06-23 20:33:50
338
2
原创 移动端适配方案
# 移动端适配方案 1：rem + html font-size方案 2：vw# rem + html font-sizerem 是相对于 html 元素的 font-size 来设置的单位，通过在不同屏幕尺寸下动态修改 html 元素的 font-size 可达到适配效果在开发中，我们只需要考虑两个问题：1. 针对不同的屏幕尺寸设置不同的 html font-size2. 将元素尺寸单位转为 rem## 动态设置 html font-siz
2024-04-30 11:26:03
1490
原创 重构文件上传行为
目标：将 [前端 → 后端] 改成 [前端 → 中间层 → 后端]**第一步：自定义上传行为（ElementPlus）**```html
2024-03-25 14:58:59
378
原创 【Network】加密方式
# 对称加密① 客户端生成密钥、② 客户端将密钥发送给服务端、③ 请求：客户端使用密钥加密数据并请求服务端，服务端使用密钥解密数据并处理；响应：服务端使用密钥加密数据并响应，客户端使用密钥解密数据并处理对称加密的问题：在 ② 中，可能会被中间人拦截并获取密钥，即可直接窃取、篡改数据。# 非对称加密① 服务端生成公钥和私钥、② 服务端将公钥发送给客户端、③ 请求：客户端使用公钥加密数据并请求服务端，服务端使用私钥解密数据并处理；响应：服务端使用私钥加密数据并响应，客户端使用
2024-03-03 21:10:04
777
原创 【NodeJS】fs 模块 (2)
# 流式文件写入 & 读取流式文件写入 / 读取适合操作**大文件**## 流式写入**① 创建可写流：`fs.createWriteStream(path[, options])`**1. `path`：文件路径2. `options`：配置对象 - `flags`：文件系统标志，默认值为 `'w'` - `encoding`：数据的编码格式，默认为 `utf8`- 返回值：WriteStream 对象```jsconst fs = requir
2024-02-03 22:59:10
927
原创 在 EggJS 中实现 Redis 上锁
访问 https://github.com/microsoftarchive/redis/releases 选择版本进行下载 - 勾选 [配置到环境变量] - 无脑下一步并安装查看已安装的 Redis 版本，能成功查看就表示安装成功啦~
2024-01-20 23:30:40
818
原创 【JavaScript】history 对象
# history 对象history 提供与当前窗口的会话历史记录相关的 API。# 常用属性1. `length`：一个整数，表示会话历史的数目。2. `scrollRestoration`：允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。 1. `auto`：恢复到用户已滚动到的页面上的位置。 2. `manual`：不恢复位置。3. `state`：一个任意值，表示历史堆栈顶部的状态。这是一种不必等待 popstate 事件而查看状态
2023-12-16 14:33:33
181
原创 【CSS】样式的计算过程
# 标签的 CSS 样式我们先来了解一下浏览器处理文件的标准流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。1. 浏览器载入 HTML 文件（比如从网络上获取）。2. 将 HTML 文件转化成一个 DOM，DOM 是文件在计算机内存中的表现形式。3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。4. 浏览器拉取到 CSS 之后会进行解析，根据选
2023-11-01 17:54:44
612
原创 【JavaScript】script 标签的使用
# script 标签script 标签之间共享顶层对象。```html var a = 1; console.log(a); // 1```但是全局变量作用域的提升机制在这些边界中不适用：```html foo(); function foo() { console.log('foo'); }
2023-10-31 22:10:32
924
1
原创 【JavaScript】控制台 API
# console.logconsole.log 会将参数转为字符串 并输出到控制台。它会在参数之间输出空格，并在输出所有参数后重新开始一行。console.debug、console.info、console.warn、console.error 与 console.log 几乎相同。在 Node 中，console.error 将其输出发送到标准错误流，而不是标准输出流。除此之外的其他函数都是 console.log 的别名。在浏览器中，这几个函数生成的输出消息前面可能会带一个图标，表示
2023-08-01 10:55:06
220
原创 【JavaScript】数组方法 (ES6)
# 实例方法## find`arr.find(callback)` 用于获取第 1 个符合要求的元素：1. `callback`：`(item, index, arr) => boolean` `item`-当前值、`index`-当前索引、`arr`-当前数组- 返回值：`callback` 第一次返回 `true` 的对应 `item`；如果没有符合的元素，则返回 `undefined````jsconst arr = [50, 10, 201, 103, 62, 8
2023-07-31 21:17:12
716
原创 【Ajax】Ajax 简介
# Ajax 简介Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它通过使用 JavaScript、XML（现在更常用的是 JSON）和异步通信来实现在不重新加载整个页面的情况下与服务器进行数据交换。## Ajax 的优点1. 异步通信：Ajax 使用异步方式与服务器进行通信，不需要刷新整个页面，减少了不必要的数据传输和页面加载时间。2. 用户体验：通过部分更新页面内容，实现动态加载数据和实时更新，提升用户体验和交互
2023-07-28 16:44:52
976
2
原创 【CSS】margin 的使用
# margin 的使用margin 用于设置元素的外边距。margin 是一个简写属性，包括以下 4 个子属性：- margin-top：上外边距。- margin-right：右外边距。- margin-bottom：下外边距。- margin-left：左外边距。margin 可以设置 1 ~ 4 个属性值：1. 一个属性值：一起设置上下左右。2. 两个属性值：分别设置上下、左右。3. 三个属性值：分别设置上、左右、下。4. 四个
2023-07-10 18:16:54
6174
原创 【CSS】盒模型
# 盒模型box-sizing 用于定义盒模型的计算方式。有以下 2 种取值：1. content-box：默认值。元素的宽度和高度只包含了内容。如果给元素设置了 padding 和 border，那么它们会被加到元素的实际宽高上，导致元素的实际尺寸比设定的尺寸要大。2. border-box：元素的宽度和高度包含了内容、padding 和 border。如果给元素设置了 padding 和 border，那么它们会从元素的内容区域中减去，使得元素的实际尺寸与设定的尺寸相同。
2023-07-10 18:13:56
507
原创 【CSS】CSS 常用单位
# 大小单位- 大小单位：`px`。- 字体相对单位：`em`、`rem`；根据 [font-size] 进行计算。- 视窗相对单位：`vm`、`vh`、`vmax`、`vmin`；根据 [视窗大小] 进行计算。## em、rem- `em`：相对于元素本身的 `font-size` 值。如果元素本身没有设置 `font-size`，会继承父元素的 `font-size`。- `rem`：相对于根元素（`html` 元素）的 `font-size` 值。
2023-07-10 18:02:49
521
原创 图片优化技术
# Data URLData URL 是一种将小型文件嵌入到网页中的方法。Data URL 的格式：```data: [][; base64], ```- `` 是媒体类型，例如图片可以是 `image/png`、`image/jpeg` 等，CSS 可以是 `text/css`，JavaScript 可以是 `application/javascript` 等。如果不指定媒体类型，则默认为 `text/plain`
2023-07-09 22:22:51
350
原创 【CSS】float 的使用
# float 的使用float 用于指定元素应沿其容器的左侧或右侧放置。1. 开启浮后，元素会变成行内块元素，即 `display: inline-block`。2. float 不会解析标签元素之间的空格。```html123``````cssdiv { float: left; /* 开启浮动 */ width: 100px; height: 100px;
2023-07-05 18:02:03
856
原创 【Node】介绍一下 package.json
- package.json 用于记录一些项目信息，比如项目名、版本号、项目描述、依赖包...- package.json 必须是一个合法的 JSON 文件，不能使用注释或者尾逗号等非标准语法- package.json 必须包含 name 和 version 字段，它们组成项目的唯一标识在日常开发中，项目的依赖包会被存放到 node_modules 目录下，因此 node_modules 文件夹的体积会很大，不方便团队之间的传输。通常我们会把 node_modules 目录配置到
2023-06-19 10:58:47
1552
原创 【Vite】对 CSS 处理
Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件Vite 解析 CSS 文件的过程：① 使用 fs 模块读取 .css 文件的内容② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内③ 将 style 标签插入到 index.html 的 head 标签中④ 将该 .css 文件的内容替换为 Js 脚本，以便于 CSS 模块化 & 热更新# CSS 模块化 (CSS Module)在协同开发时，可能会出现
2023-04-15 19:42:25
2117
1
原创 【NestJS】资源的上传和下载
# 上传资源multer 是一个基于 Express 的中间件，用于处理 `multipart/form-data` 格式的数据，主要用于上传文件。NestJS 内置了 multer，可以使用 @nestjs/platform-express 包中导出的 `FileInterceptor`、`FilesInterceptor` 等拦截器来使用 multer 的功能。1. **`npm i multer`、`npm i @types/multer -D`**2. **`nest g res use
2023-04-15 16:17:27
2064
2
原创 【Vite】环境变量的配置与使用
# 构建模式`defineConfig` 接收参数 `{ mode }`，这里的 `mode` 就是构建的模式```javascriptimport { defineConfig } from 'vite';export default defineConfig(({ mode }) => { console.log('mode', mode);});"scripts": { "dev": "vite", // 执行 `vite`, mode 为 development
2023-04-08 19:22:46
2247
原创 【NestJS】环境变量的配置与使用
# @nestjs/configNestJS 内置了 dotenv，并将其封装到 @nestjs/config 里面了1. `npm i @nestjs/config`2. 在 .env 文件中编写环境变量：```typescriptTOKEN_SECRET = 'superman'DB = 'mysql'DB_HOST = '127.0.0.1'```3. 在 app.module.ts 文件中全局配置 `ConfigModule`：```typescriptimport
2023-04-08 17:14:35
1970
原创 【NestJS】异常 & 过滤器
# 异常## 基础异常类NestJS 中 `HttpException` 为基础异常类。我们可以在应用程序中通过 `new HttpException(响应体, HTTP 状态码)` 创建该异常并抛出。这里的 `HTTP 状态码` 可以从 NestJS 内置的 `HttpStatus` 枚举中获取。```typescript@Get()findAll() { throw new HttpException('Forbidden', HttpStatus.FORBIDDEN);
2023-04-08 16:31:21
948
原创 【NestJS】JWT 鉴权
[Passport](https://www.passportjs.org/) 是一个 NodeJS 鉴权库JWT 认证的交互流程：浏览器发起请求，服务端对用户名和密码进行验证。如果身份验证通过，服务端会基于用户信息生成 token 字符串，并将其响应给浏览器。浏览器会将 token 字符串存储起来。往后的每次请求，浏览器都会以请求头的形式带上 token 字符串。服务端收到请求后，会解析 token 字符串。如果 token 验证通过，则正常返回数据，否则抛出错误。
2023-02-23 00:14:07
1463
1
原创 【NestJS】Guard 守卫
守卫一般用于授权处理，判断当前请求是否能放行给路由处理程序。执行顺序：中间件 - 守卫 - 拦截器 / 管道# 使用守卫1. 创建 CRUD 模板：`nest g res cus-guard`2. 创建守卫：`nest g gu cus-guard````typescriptimport { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';import { Observa
2023-02-22 22:16:30
588
原创 【NestJS】模块
脚手架中，可以执行 `nest g mo XXX` 创建模块。通过脚手架命令创建的模块，会自动被导入至根模块注册。注意：项目中的模块都需要导入到根模块中注册一下才能被使用。# 共享模块`nest g res boy`、`nest g res girl`如果希望在 `girl` 模块中使用 `boy` 模块，需要先在 `boy` 模块将其 service 导出```typescriptimport { Module } from '@nestjs/common';i
2023-02-20 11:30:48
734
原创 【NestJS】中间件
中间件是在路由处理程序之前调用的函数，所以在中间件函数中可以访问请求和响应。中间件函数需要执行 `next()` 将控制传递给下一个中间件函数，否则请求会被挂起。可以使用 `nest g mi XXX` 创建中间件。# 局部中间件1. `nest g res user`2. `nest g mi ajax`、编写中间件代码```typescriptimport { Injectable, NestMiddleware } from '@nestjs/common'
2023-02-19 23:45:53
884
原创 【NestJS】装饰器
装饰器是一种特殊的类型声明，可以用来修饰：① 类、 ② 属性、 ③ 方法、 ④ 参数搭建项目：1. `yarn init -y` 初始化项目2. `yarn add ts-node typescript -D` 下载依赖包3. `tsc --init` 初始化 Ts 配置文件4. 使用装饰器需要配置 tsconig.json 中的 `experimentalDecorators` 为 `true`# 类装饰器装饰器其实就是一函数，接收 cla
2023-02-18 10:50:44
661
原创 【NestJS】IOC & DI
- Inversion Of Control (控制反转)，可以理解为一种思想，就是把创建对象的主动权交给外层环境- Dependency Injection (依赖注入)，就是 IOC 的落地实现。假设我们需要实现一个 "学生打游戏" 的 demo：```typescript/** * 学生打游戏, 需要通过手机打 */class Phone { name: string; constructor(name: string) { this.
2023-02-15 00:33:07
258
原创 【Vue3】如何使用插槽
# 默认插槽插槽可以让父组件给子组件传递模板片段1. 在父组件中，在组件内编写模板片段传递给子组件2. 在子组件中，编写 `slot` 元素，指定模板片段输出的位置- 插槽内容可以访问到父组件的数据，但无法访问到子组件的数据。因为插槽本身是在父组件模板中定义的- 可以在子组件的 `slot` 标签内设置插槽的默认内容。当父组件没有提供任何插槽内容时，子组件会渲染默认内容```html
2023-02-02 11:09:57
1085
2
原创 【Vue3】如何使用 ref attribute
# 模版引用`ref` 用于注册元素或子组件的引用在组合式 API 中，引用将存储在与名字一样的 `ref` 里```html helloimport { ref, onMounted } from 'vue';const myDom = ref();onMounted(() => { console.log('myDom', myDo
2023-02-01 21:00:59
572
原创 【Vue】依赖注入
# Vue2 写法用于祖先组件给后代组件传递数据：① 在祖先组件中配置 `provide`，指定需要传递的数据（`provide` 用法类比 `data`）② 在后代组件中配置 `inject`，并接收数据（`inject` 用法类比 `props`）- `provide` 有两种写法： 对象式写法：只能传递静态信息，不能获取 `this` 函数式写法：可以获取并传递 `this` 的信息，`this` 指向当前组件实例- `provide` 会被代理成 `_provi
2023-02-01 16:26:03
499
原创 【Vue】v-model 的使用
# 双向绑定 v-model- `v-model:value="值"` 可简写为 `v-model="值"`，用于**双向绑定** \[表单元素] 的信息- 双向绑定：表单元素的 `value` attribute 的值 ↔ data 中对应的值- 本质上，v-model 是由 v-bind 配合 input 事件实现的 ① v-bind 绑定 value 属性、② 在 input 事件的回调函数中更新 value 的值## 文本 input [text]`
2023-02-01 15:06:40
5243
原创 【Node】事件循环机制
# Node 中的异步 API1. 定时器：`setTimeout`、`setInterval`2. I/O 操作：文件读写、数据库操作、网络请求...3. Node 独有的 API：`process.nextTick`、`setImmediate`# 事件循环的流程- Node 的事件循环分为 6 个阶段，这 6 个阶段会按顺序反复运行- 运行到某个阶段时，都会从该阶段对应的回调队列中取出函数执行- 当队列为空或者执行的回调函数数量达到系统设定的阈值，就
2023-01-08 17:01:07
1849
原创 模块化方案：CommonJs & ESModule
# CommonJs (cjs)- cjs 是 Node 的模块化规范，使用 **`require`** & **`exports`** 进行导入导出- cjs 可作用于 **node** 环境 & **webpack** 环境，但不可作用浏览器- 如果前端项目在 webpack 中，也可以理解为浏览器和 Node 都支持 有些模块只支持 cjs，比如 ms，但并不影响它在前端项目中使用 ( 通过 webpack ) 但是，如果通过 cdn 的方式直接在浏览器中引入，则会出问题``
2022-09-17 22:16:48
715
原创 【Browser】浏览器缓存
用于维持 HTTP 请求之间的关系：浏览器向服务器发送请求，服务器可以把用户信息存放到响应头set-cookie上。浏览器接收到响应后，会读取set-cookie并更新 Cookie。随后浏览器发起的所有请求，都会把当前域名下所有未过期的 Cookie 存放到请求头cookie上。服务器接收到请求后，可以解析请求头cookie，以获取用户信息。这样，请求之间就关联起来了。
2022-09-04 15:02:44
878
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人