JWT
JWT 通常由三部分组成：Header（头部）、Payload（有效载荷）和 Signature（签名）。
jwt.sign 用于生成（签发）JSON Web Token (JWT)。它接受一个有效载荷（payload）、一个密钥（secret），以及可选的配置参数，最终返回一个签名的 JWT 字符串。
一般我的payload会传入用户名和密码这个对象，secret是自己设置的，配置参数写'1d token时长一天。
vite
http://localhost:5173/
快速启动、按需打包、模块热替换、支持多种框架
npm create vite@latest
npm install
vite做反向代理 vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:5000', // 目标服务器的地址
changeOrigin: true, // 是否更改请求源
rewrite: (path) => path.replace(/^\/api/, ''), // 可选，重写路径
},
},
},
});
vite中配置 环境变量 ：创建环境变量文件 .env.development ，import.meta.env
跨域
CORS（跨域资源共享）
Vite、webpack 代理
jsonp 由于 <script> 标签不受同源策略限制，可以跨域请求。但这种方法仅支持 GET 请求，且已逐渐被 CORS 取代。
使用 Nginx 反向代理
同源策略是浏览器的一个重要安全特性，保护用户的数据和隐私。在同源策略中，“同源”是指两个 URL 具有相同的协议（如 HTTP、HTTPS）、相同的域名（如 example.com），以及相同的端口（如 80、443）。只有在这三个条件都相同的情况下，两个资源才被认为是同源的。
nginx
Nginx（发音为 “engine-x”）是一个高性能的开源 Web 服务器和反向代理服务器，广泛用于处理 HTTP 和 HTTPS 请求。它也可以作为负载均衡器、缓存服务器和邮件代理等使用。
部署
在阿里云购买云服务器，Xshell7远程连接
node部署（user/local/node） 本地下载安装包，xftp。tar -vxf node-xxxx。配置环境变量，软连接 node npm pnpm。把express上传,pnpm i + 启动。npm start app.js
pm2包 PM2 是一个功能强大的 Node.js 进程管理器，旨在帮助开发者管理和监控 Node.js 应用程序。它提供了许多实用的功能，使得应用的部署、管理和监控变得更加容易和高效。
npm i pm2 -g 之后，软连接。
mongodb
bin目录下，./mongob启动mongo数据库，出现下面的waiting for connection就是启动成功。连接数据库。
nginx ./configure; make; make instal
部署问题
node版本和centos7不匹配
阿里云端口号没有开启
mongodb数据库，无法连接数据库，且没有权限
mongodb配置环境变量出错了，p mongod 都能启动数据库，在任意路径下输入 mongosh 都能连接数据库。Mongodb后台服务，启动 MongoDB 数据库服务
linux 常见命令
rz
tar -vxf : v显示解压过程中的文件列表,解压缩,处理的归档文件名
mkdir
ln -s [源文件或目录] [目标文件或目录] 类似于 Windows 中的快捷方式，
apt install（zip）
unzip
chmod 755 读（r）：4 写（w）：2 执行（x）：1
vi profile
axios二次封装
axios.create
baseURL 是一个非常有用的配置选项，它允许你为所有请求设置一个基础 URL。这使得在进行多个请求时
请求拦截器 响应拦截器，
config.headers.Authorization = `Bearer ${userStore.token}`
promise
Promise 是 JavaScript 中用于处理异步操作的对象
Promise 有三种状态：
Pending（待定）：初始状态，既不是成功，也不是失败。
Fulfilled（已兑现）：操作成功完成。
Rejected（已拒绝）：操作失败。
使用 .then() 和 .catch() 方法来处理 Promise 的结果。
支持链式调用，可以将多个异步操作串联起来。
mongodb
数据库（database） 数据库是一个数据仓库，数据库服务下可以创建很多数据库，数据库中可以存放很多集合
集合（collection） 集合类似于 JS 中的数组，在集合中可以存放很多文档
文档（document） 文档是数据库中的最小单位，类似于 JS 中的对象
mongoese
Mongoose 基于模式的解决方案以定义 MongoDB 集合中文档的结构。以下是 Mongoose 的一些关键特性和概念：
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true }
});
const User = mongoose.model('User', userSchema);
const user = new User({ name: 'John Doe', email: 'john.doe@example.com', password: 'securepassword' });
http
- HTTP状态码
1xx：信息性状态码
2xx：成功状态码
3xx：重定向状态码，资源位置发生变动，需要客户端重新发送请求
4xx：客户端错误状态码
5xx：服务器错误状态码
200 OK: 请求成功并返回所请求的数据。
201 Created: 请求成功，并创建了新的资源。
301 Moved Permanently: 请求的资源已被永久移动到新位置。
302 Found: 请求的资源临时被移到另一个 URL。
304 客户端的缓存资源仍然有效，无需重新下载。
403 表示服务器理解请求，但拒绝执行
权限问题 跨域请求
http请求
restful api
TOP(I- H)C
HEAD：类似GET，只要求服务器返回头部信息，不返回实际的资源内容。
1. TRACE：⽤于测试。要求⽬标服务器返回原始的HTTP请求内容
2. OPTIONS：⽤于获取服务器⽀持的HTTP⽅法列表，以及针对指定资源⽀持的⽅法
3. PATCH： ⽤于对资源进⾏部分更新。
4. CONNECT：⽤于代理服务器
RESTful API 需要遵循统一的接口，使得不同客户端能够以标准方式访问资源。
网络
vue
- vue2vue3
- proxy使用
const target = {
message: "Hello"
};
const handler = {
get: function(target, prop) {
console.log(`Getting property: ${prop}`);
return target[prop];
},
set: function(target, prop, value) {
console.log(`Setting property: ${prop} to ${value}`);
target[prop] = value;
return true; // 返回 true 表示设置成功
}
};
const proxy = new Proxy(target, handler);
// 使用代理访问和修改属性
console.log(proxy.message); // 输出: Getting property: message
// Hello
proxy.message = "Hi"; // 输出: Setting property: message to Hi
console.log(proxy.message); // 输出: Getting property: message
// Hi
- reactive & ref
reactive：用于创建一个响应式的对象，适用于复杂的数据结构，如对象和数组。
ref：用于基本数据类型（如 string、number、boolean）
reactive：是深度响应的，这意味着它会递归地让嵌套的对象属性都变成响应式的。
ref：只会对 .value 进行响应式处理，如果 ref 的值是一个对象，那么对象本身的属性将不会被深度响应，需要使用 reactive 进行处理。
- 生命周期
创建阶段
beforeCreate 在组件实例被创建之前调用。在这个阶段，数据观测、事件和生命周期的逻辑尚未设置。
created 在组件实例创建后立即调用。此时，组件的数据已经初始化，观察者已经设置，可以访问 data 和 computed，但 DOM 还没有挂载。
挂载阶段
beforeMount 在挂载开始之前被调用，即在虚拟 DOM 被渲染到真实 DOM 之前。
mounted 组件挂载后调用，此时可以访问真实 DOM，也可以进行 AJAX 请求等操作。
更新阶段
beforeUpdate 在数据更新时，被调用之前。这时，虚拟 DOM 已经在更新，但还没有被应用到真正的 DOM。
updated 数据更新后调用。此时，组件的 DOM 也已经更新，可以执行基于最新 DOM 的操作。
销毁阶段
beforeUnmount 在组件实例卸载或销毁之前调用。这是清理工作、移除事件监听器的好时机。
unmounted 在组件实例卸载后调用。此时，所有的计时器、事件监听器等都已经被清理。
-
v-if v-show
元素则从 DOM 中移除。
CSS 的 display 属性来控制元素的显示与隐藏 -
vue router
在 src/router/index.js 文件中，创建路由
路由懒加载：使用 import() 动态导入组件： -
路由守卫
全局守卫（在路由实例上使用），路由独享守卫（在路由配置中定义），组件内守卫（在组件中定义）。
示例：使用全局守卫进行用户身份验证 -
插槽
-
父子组件通信
props
$emit
pinia -
pinia Vue 3 的状态管理库
创建文件夹 /src/store/index.ts
let pinia = createPinia()
export default pinia
在入口文件main.ts引入
import pinia from './store'
app.use(pinia)
用户仓库
// 创建用户相关的小仓库
import {defineStore} from 'pinia'
let useUserStore = defineStore('User', {略})
// 对外暴露获取小仓库的方法
export default useUserStore
state 是 Pinia store 中用于存储应用状态的地方。它通常是一个函数，返回一个包含状态属性的对象。这些属性可以是任何 JavaScript 数据类型，比如字符串、数字、数组、对象等。
Actions:包含业务逻辑和 API 调用
- Scss
全局变量
嵌套样式
在styles/variable.scss创建一个variable.scss文件！在vite.config.ts文件配置 - eslint和prettier使用
eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，package.json lint fix
prettier属于格式化工具，它看不惯格式不统一 tabWidth semi
css
- 居中
display:flex
.parent {
position: relative;
height: 200px; /* 父元素高度 */
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 其他样式 */
}
- flex
flex-direction 设置主轴的方向（即项目的排列方向）。
justify-content 设置主轴上的子元素排列方式。
space-between：两端对齐，元素之间的间隔相等。
space-around：每个元素两侧的间隔相等。
space-evenly：每个间隔都相等（包括两端）。
align-content 设置侧轴上的子元素排列方式（针对多行）
flex-start：在侧轴的起点对齐。
flex-end：在侧轴的终点对齐。
- 盒模型
JS
- 闭包
- 原型原型链
1．原型：函数都有prototype属性，称之为原型，也称为原型对象
原型可以放一些属性和方法，共享给实例对象使用
原型可以做继承
2．原型链：查找一个对象的属性和方法的时候，先在自身找，找不到则沿着__proto__向上查找，我们把__proto__形成的链条关系称原型链
__proto__属性是每一个对象以及函数都有的一个属性。__proto__属性指向的是创建他的构造函数的prototype。原型链就是通过这个属性构件的。
- 模块化
拆分出来每个文件就是一个模块，模块中的数据都是私有的，模块之间互相隔离
CommonJS、ES6模块化
①分别导出
②统一导出
③默认导出 - 节流防抖
node
- express
app.use((req,res,next)
全局中间件的注册顺序很重要，因为它们是按照注册的顺序依次执行的。
Services层封装了业务逻辑，使得controller层不需要关心具体的业务实现细节。访问数据库。
Controller层是应用程序中处理HTTP请求和响应的入口点。 - require
它用于加载模块和文件。 - npm pnpm 包管理工具
扫一扫
1315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
