ay的博客

# 条件渲染下子组件内部的 hook 重置 当父组件使用条件渲染（例如通过一个状态或属性决定是否渲染某个子组件）时，如果条件从 true 变为 false ，然后又变回 true ，这个过程确实会导致 React 重新创建该子组件实例。这意味着子组件内部的 useState （以及其他钩子的状态）将会被重置，因为每次条件为真且子组件被重新挂载时，都会初始化一个新的状态。 例子 function ParentComponent() { const [showChild, setShowChild] = useState(true); return (...

# 准备工作 首先将 Cypress 安装到前端作为开发依赖项 npm install --save-dev cypress 然后在 package.json 中添加 scripts 字段，用于运行测试 "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite...

# 测试前的准备 使用 Vitest 作为测试框架 安装 Vitest 和模拟 Web 浏览器的 jsdom 库 npm install --save-vitest vitest jsdom 还需要另一个测试库来帮助我们渲染组件进行测试。 react-testing-library npm install --save-dev @testing-library/react @testing-library/jest-dom 在 package.json 中添加一个脚本来运行测试 { "scripts": { // ......

# 密钥认证 # 安装库 现在我们将在后端实现基于令牌的认证 首先，我们需要安装一个用于生成令牌的库，这里我们使用 jsonwebtoken 。 安装 npm install jsonwebtoken# 登录功能 登录功能写在 controllers/login.js 中如下 const jwt = require('jsonwebtoken')const bcrypt = require('bcrypt')const loginRouter = require('express').Router()const User =...

# 使用 Mongo 进行用户管理 在这个博客应用中，用户和博客之间是一对多的关系 我们使用 mongoose 包来定义用户模型和路由 # 创建用户模型 在 modules/user.js 中定义用户模型 const mongoose = require('mongoose');const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true }, name: String,...

# 测试后端应用 # 准备工作 更改 package.json 文件，添加 jest 依赖 "scripts": { "start": "cross-env NODE_ENV=production node index.js", "dev": "cross-env NODE_ENV=development nodemon index.js", "test": "cross-env NODE_ENV=test jest --verbose...

# node 的自动化测试 Node 有有一个内置的测试库 node:test 测试执行命令： npm script test 编写测试脚本让命令更简洁： "scripts": { "start": "node index.js", "dev": "nodemon index.js", "test": "node --test" // 添加这个命令 },并创建一个 .test.js 文件，内容类似于： const...

# 这是针对 Node.js 后端项目的工具类模块 # 让我们先总结 目录结构： /project-root |-- controllers | |-- blogs.js |-- models | |-- blog.js |-- node_modules |-- requests | |-- create_note.rest |-- utils | |-- config.js | |-- logger.js | |-- middleware.js |-- .env |-- .gitignore |-- app.js |-- index.js |-- package-lock.json |--...

# 准备 # 安装 node # 初始化 创建一个新的模板 npm init进入到 json 文件，对 scripts 进行改动 "scripts": { "start": "node index.js", // 添加 "test": "echo \"Error: no test specified\" && exit 1" },在根目录创建 index.js...

# Axios 四种常见操作总结 Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 发起请求。以下是 put 、 post 、 get 和 delete 四种常见的操作方式。 # GET 请求 用于从服务器获取资源。 axios.get('/user?ID=12345') .then(function (response) { console.log(response.data); // 服务器返回的数据 console.log(response.status); // 状态码 })...