- 博客(203)
- 收藏
- 关注
RSS订阅原创 【NestJS】异常 & 过滤器
# 异常## 基础异常类NestJS 中 `HttpException` 为基础异常类。我们可以在应用程序中通过 `new HttpException(响应体, HTTP 状态码)` 创建该异常并抛出。这里的 `HTTP 状态码` 可以从 NestJS 内置的 `HttpStatus` 枚举中获取。```typescript@Get()findAll() { throw new HttpException('Forbidden', HttpStatus.FORBIDDEN);
2023-04-08 16:31:21
1450
原创 【NestJS】JWT 鉴权
[Passport](https://www.passportjs.org/) 是一个 NodeJS 鉴权库JWT 认证的交互流程：浏览器发起请求，服务端对用户名和密码进行验证。如果身份验证通过，服务端会基于用户信息生成 token 字符串，并将其响应给浏览器。浏览器会将 token 字符串存储起来。往后的每次请求，浏览器都会以请求头的形式带上 token 字符串。服务端收到请求后，会解析 token 字符串。如果 token 验证通过，则正常返回数据，否则抛出错误。
2023-02-23 00:14:07
2087
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
1008
原创 【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
952
原创 【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
1143
原创 【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
892
原创 【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
446
原创 【Vue3】如何使用插槽
# 默认插槽插槽可以让父组件给子组件传递模板片段1. 在父组件中，在组件内编写模板片段传递给子组件2. 在子组件中，编写 `slot` 元素，指定模板片段输出的位置- 插槽内容可以访问到父组件的数据，但无法访问到子组件的数据。因为插槽本身是在父组件模板中定义的- 可以在子组件的 `slot` 标签内设置插槽的默认内容。当父组件没有提供任何插槽内容时，子组件会渲染默认内容```html
2023-02-02 11:09:57
1376
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
753
原创 【Vue】依赖注入
# Vue2 写法用于祖先组件给后代组件传递数据：① 在祖先组件中配置 `provide`，指定需要传递的数据（`provide` 用法类比 `data`）② 在后代组件中配置 `inject`，并接收数据（`inject` 用法类比 `props`）- `provide` 有两种写法： 对象式写法：只能传递静态信息，不能获取 `this` 函数式写法：可以获取并传递 `this` 的信息，`this` 指向当前组件实例- `provide` 会被代理成 `_provi
2023-02-01 16:26:03
683
原创 【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
6697
原创 【Node】事件循环机制
# Node 中的异步 API1. 定时器：`setTimeout`、`setInterval`2. I/O 操作：文件读写、数据库操作、网络请求...3. Node 独有的 API：`process.nextTick`、`setImmediate`# 事件循环的流程- Node 的事件循环分为 6 个阶段，这 6 个阶段会按顺序反复运行- 运行到某个阶段时，都会从该阶段对应的回调队列中取出函数执行- 当队列为空或者执行的回调函数数量达到系统设定的阈值，就
2023-01-08 17:01:07
2150
原创 模块化方案：CommonJs & ESModule
# CommonJs (cjs)- cjs 是 Node 的模块化规范，使用 **`require`** & **`exports`** 进行导入导出- cjs 可作用于 **node** 环境 & **webpack** 环境，但不可作用浏览器- 如果前端项目在 webpack 中，也可以理解为浏览器和 Node 都支持 有些模块只支持 cjs，比如 ms，但并不影响它在前端项目中使用 ( 通过 webpack ) 但是，如果通过 cdn 的方式直接在浏览器中引入，则会出问题``
2022-09-17 22:16:48
917
原创 【Browser】浏览器缓存
用于维持 HTTP 请求之间的关系：浏览器向服务器发送请求，服务器可以把用户信息存放到响应头set-cookie上。浏览器接收到响应后，会读取set-cookie并更新 Cookie。随后浏览器发起的所有请求，都会把当前域名下所有未过期的 Cookie 存放到请求头cookie上。服务器接收到请求后，可以解析请求头cookie，以获取用户信息。这样，请求之间就关联起来了。
2022-09-04 15:02:44
1042
原创 【Ts】约束对象、函数的正确姿势
# 约束对象- 一般使用 **[字面量]** 约束变量的类型为对象```typescriptlet obj1: {}; // 约束该变量的类型为对象let obj2: { name: string }; // 约束该变量的类型为 [有且只有 name 属性的] 对象, 且 name 的属性值的类型必须是 string```- 可以直接给变量赋值，TS 会自动识别类型，并对变量进行约束```typescriptlet obj = { width: 200 }; // 此时 ob
2022-08-21 21:21:55
4377
原创 【pnpm】从了解到应用
# 包管理器简史## npm 3 之前node_modules 结构是有序的假设有如下的依赖项：```.├── package-a│ └── lodash├── package-b│ └── lodash├── package-c│ └── lodash└── package-d └── lodash```node_modules 结构如下：```node_modules├── package-a│ └── node_modules
2022-08-14 12:25:55
4418
原创 【Vue3】Vue3 vs Vue2
Teleport用于将组件的 HTML 结构移动到指定位置用法：① 用 Teleport 标签将需要移动的 HTML 结构包裹住② 设置 属性，属性值为 ，以指定移动到的位置默认情况下，子组件的 HTML 结构会显示到父组件的 HTML 结构里面；使用 Teleport 标签包裹子组件的 HTML 标签，则能将该 HTML 结构显示到指定的位置Suspense等待异步组件时，渲染一些额外的内容，提升用户体验感用法：① 在父组件中，异步引入组件：defineAsyncCompon
2022-08-11 22:40:46
359
原创 【Vue3】响应性数据_2
# [**【Vue3】响应性数据_1**](https://blog.csdn.net/Superman_H/article/details/122951571?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22122951571%22,%22source%22:%22Superman_H%22%7D&ctrtid=Qa1d8)# `readonly` & `sh
2022-08-10 23:41:30
434
原创 【TS】接口
# 约束对象的结构```tsinterface MyInterface { name: string; age: number;}const obj: MyInterface = { name: "superman", age: 21 };```# 约束函数的结构```tsinterface MyInterface { (num1: number, num2: number): number;}const fun: MyInterfa
2022-07-19 12:41:24
519
原创 【TS】初识 TypeScript
# TS 初体验1. 下载、安装 Node2. 全局安装 typescript 依赖包：`npm i typescript -g`3. 创建、编写 .ts 文件（TS 支持 JS 语法，所以可以在 .ts 文件里面写 JS 代码）## 编译 TS 文件1. 执行 `tsc ./XXX.ts` 编译 .ts 文件。编译成功后，即能生成对应的 .js 文件- 如果同时打开 TS 文件及其编译出来的 JS 文件，会抛出 "同名变量冲突" 的错误。原因：在 Node 环境中，如
2022-07-19 12:26:31
539
原创 【Vue2】组件通信 之 其他方法
# 全局事件总线- 事件总线可实现任意组件之间的数据传输- 条件：① 所有组件都能访问、② 身上有 `$on` `$off` `$emit` 方法 方法：① 设置在 Vue.prototype 上、② 值为 Vue 实例- **全局事件总线的本质，其实就是自定义事件**1. 修改入口文件 main.js：创建全局事件总线 $Bus `Vue.prototype.$Bus = this````jsimport Vue from 'vue';import App
2022-07-16 15:14:53
388
原创 【Vue2】组件通信 之 props
在子组件中 修改父组件传递过来的数据：控制台抛出警告、子组件的数据可以被成功修改、重新渲染子组件参与子组件数据显示的方法 ，在页面完成时被调用一次；子组件修改数据后，重新渲染子组件，被调用一次此时我们再在父组件中修改原数据，则子组件的数据也会被修改，就是说，子组件之前修改的数据会被覆盖参与页面数据显示的方法 、，在页面完成时依次被调用一次；父组件修改数据后，页面重新渲染，再依次被调用一次此时，子组件渲染的是 data 中的数据 更新子组件 data 中的数据，子组件会被重新渲染、 被调用更新父组件
2022-07-16 14:08:38
13391
原创 【Vue3】computed & watch
# computed- 在组合式 API 中，计算属性 computed 是一个函数1. 完整写法 - 接收一个 [配置对象] 作为参数：`computed( { get(){ return X }, set(val){ } } )` 配置对象有 2 个配置项：getter、setter； getter：获取当前计算属性时触发；返回一个 ref 对象； setter：修改当前计算属性时触发；新值会作为参数传入； computed 会自动追踪响应
2022-06-14 18:26:31
1112
原创 【node.js】express
express基于 Node.js 平台的 Web 开发框架，能更便捷地搭建服务器安装 node（官网下载，无脑安装即可）进行项目初始化 npm init -y安装 express 模块：npm i express通过 express 部署服务端// 1. 引入 express 模块const express = require('express');// 2. 创建核心对象 applet app = express();// 3. 监听端口、启动服务器app.listen
2022-05-27 10:12:20
337
原创 【node.js】MongoDB
MongoDB非关系型数据库，存储的数据都是 key-value 的形式安装数据库官网下载，然后配置环境变量即可可在小黑屏输入 mongo 连接数据库，以查看是否安装成功我们可以自己手动开关数据库：window + r → 输入 services.msc 打开任务管理器 → 找到 MongoDB 数据库，右键 启动 / 停止基本概念数据库，可以理解为一个对象表：也叫 “集合”，就是数据库对象的属性文档：就是表中的数据，即数组的一项常用命令show dbs：查询所
2022-05-26 16:36:01
385
原创 【Node】npm 的使用
安装 Node 的时候，会一并安装好 npm。可以在命令行执行 `npm -v` 查看 npm 的版本。# 配置 npm1. `npm config ls`：查看 npm 的配置信息；为 `npm config list` 的简写 `npm config ls -l`：查看 npm 的详细配置信息2. `npm config get `：查看 npm 指定配置项的信息 eg：`npm config get registry`-
2022-05-24 09:44:47
1180
原创 【node.js】Buffer
Buffer 简介结构上，Buffer 和 Array 很像但 Array 不能存储二进制文件（图片、视频、音乐），而 Buffer 可以在 Buffer 中，存储的都是 2 进制数据，但都用 16 进制数字显示Buffer 中的内存不是通过 JS 分配的，是在底层通过 C++ 申请的，我们可以直接通过 Buffer 来创建内存中的空间Buffer 的 1 个元素占 1 byte（8bit → 0~255 → 00~ff）创建 Buffer 实例Buffer 不需要引入模块，可以直接使用，
2022-05-23 11:20:07
381
原创 【node.js】处理 URL 地址
URL 类new URL(input[, base])input：要解析的 [绝对] / [相对] 的输入网址。如果 input 是相对的，则需要 base，如果 input 是绝对的，则忽略 basebase：如果 input 不是绝对的，则为要解析的基本网址const myURL = new URL('/Superman_H', 'https://blog.csdn.net');console.log(myURL.href); // https://blog.csdn.net/Superm
2022-05-21 12:30:16
663
原创 【Vue】混入 & 插件 & 插槽
# 混入 (混合)- 用于代码的复用，分为：局部混合 & 全局混合- 一个 [混入对象] 可以包含任意组件选项- 当组件使用 [混入对象] 时，所有 [混入对象] 的选项将被 “混合” 进入该组件本身的选项## 局部混合> #### 第一步：定义 js 文件- 创建 mixin 文件夹、创建 index.js 文件；在 JS 文件中，定义需要复用的数据，并暴露出去```jsexport const mixMethods = { methods: {
2022-04-14 15:04:49
535
1
原创 【Node】CommonJs（cjs）
# CommonJs- CommonJs 是 Node 的模块化规范- 在 Node 中，每个文件都是独立的模块- 在 Node 中，有一个全局**对象** global (与网页中的 window 类似) 全局作用域下创建的变量，会成为 global 的属性 全局作用域下创建的函数，会成为 global 的方法- 模块内的变量不在全局作用域中，模块存在自己的作用域(相当于在一个函数内)，所以不能随意调用模块之间的变量```jslet num = 0;console.log(nu
2022-04-06 02:49:55
2020
原创 【Vue】生命周期
# 生命周期1. **`setup`**：组合式 API 中，`setup()` 钩子会在所有选项式 API 钩子之前调用2. `beforeCreate`：在组件实例初始化完成后调用3. `created`：在组件实例处理完所有与状态相关的选项后调用4. `beforeMount`：在组件被挂载之前调用5. `mounted`：在组件被挂载之后调用6. `beforeUpdate`：在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用7. `updated`：在组件因为一个响应式
2022-03-27 14:25:59
786
原创 【Vue】数据代理
# Vue2 的响应式实现原理：- 数组：通过重写 [更新方法] 来实现拦截- 对象：通过 `Object.defineProperty()` 对属性的读取、修改进行拦截data 属性中，只有属性描述符 configurable 为 true 的属性才可以被 VueJS 进行依赖收集。VueJS 会在 data 属性中的每个属性上调用 `Object.defineProperty()` 方法，为它们添加 getter 和 setter。这样，当你访问或修改 data 属性中
2022-03-23 17:14:54
1733
原创 【Vue2】计算属性 computed & 侦听器 watch
计算属性 `computed`gettergetter - 获取计算属性时调用 {{ reMsg }} let vm = new Vue({ el: '#app', data: { msg: "superman" }, // 设置 computed computed: { // 设置计算属性 reMsg reMsg: { // 设置 getter
2022-03-20 17:26:33
2543
原创 【node.js】http 模块
http 模块简介核心模块 http 是 node.js 网络的关键模块，用于搭建服务器、接受请求、响应内容const http = require('http'); // 引入 http 模块http.createServer ( )创建服务器对象 - http.Server 实例：http.createServer()接收一个回调函数，回调函数带有 req、res 2 个参数：req - [请求对象]，它包含了与 [客户端] 相关的数据和属性（http.ServerResponse 实例
2022-03-16 02:25:03
1456
原创 【JavaScript】Promise 的使用
Promise 是一套处理异步场景的规范，能避免回调地狱的产生，使代码更清晰简洁。这套规范最早诞生于前端社区，并被命名为 Promise A+ 规范。参数executor称为执行器，为一回调函数调用resolve，Promise 实例的状态会从 pending 变为 fulfilled；调用reject，Promise 实例的状态会从 pending 变为 rejected；如果不调用resolvereject，则 Promise 实例的状态将一直是 pending。调用resolve。
2022-03-16 02:07:55
4497
原创 【Ajax】Axios 的使用
# Axios 简介Axios 是一个基于 promise 的网络请求库，可作用于 node.js 和浏览器中> #### 特性1. 支持 Promise API2. 客户端支持防御 XSRF - Cross-site request forgery - 跨站请求伪造3. 在服务端，它基于 node.js 的 `http` 模块；而在客户端 (浏览器)，则基于 `XMLHttpRequests`> #### 使用1. node：下载 axios 并导入 `npm i axios`
2022-03-05 15:32:10
2164
原创 【小程序】组件之间的数据传递
① 给子组件设置属性：用于子组件获取父组件的数据子组件修改数据不会同步到父组件！在页面中使用组件，并给组件设置自定义属性，属性值为需要传递的数据<my-po pageNum="{{18}}"></my-po>在组件中，需要设置 properties 接收数据Component({ // 组件的属性列表：接收外部传入的数据 properties: { // 写法 1 : 接收传入的数据，并且指定传入值的类型为 String pageNum: Str
2022-03-01 09:42:29
2167
原创 【小程序】条件渲染 & 列表渲染
条件渲染可以使用 wx:if="" 来控制组件的渲染<view wx:if="{{flag}}">不渲染（变量）</view><view wx:if="flag">渲染（字符串）</view><view wx:if="">不渲染（空字符串）</view><view wx:if=" ">渲染（空格字符串）</view>data: { flag: false },可以搭配 wx:elif、 w
2022-02-28 22:49:05
521
原创 【小程序】项目结构解析
项目结构讲解pages 文件夹：存放页面；一个页面对应一个文件夹页面文件夹包含 4 个基础文件：.js、.json、.wxml、.wxss.json：当前页面的配置文件，优先级比全局配置文件高uitls 文件夹：存放工具类 JS 文件。里面默认存放着 uitls.js，用于格式化时间.eslintrc.js：项目默认配置，不要轻易更改app.js：小程序入口文件app.json：小程序的全局配置文件包括：小程序所有的页面路径、界面表现、网络超时时间、底部 tab…app.wxss：
2022-02-28 22:12:15
910
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人