diff --git "a/\351\231\210\346\231\272\350\264\244/20260601-\345\256\211\350\243\205SDK.md" "b/\351\231\210\346\231\272\350\264\244/20260601-\345\256\211\350\243\205SDK.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8a75d9bcbad195f9edcd310bf31c981d03b89946
--- /dev/null
+++ "b/\351\231\210\346\231\272\350\264\244/20260601-\345\256\211\350\243\205SDK.md"
@@ -0,0 +1,65 @@
+# WAPITI 安装精简笔记
+
+## 📌 **WAPITI 是什么**
+
+基于 Python 的命令行 Web 漏洞扫描器，支持 SQL 注入、XSS、文件包含等检测。
+
+## 🔧 **环境要求**
+
+- Python 2.6+ 或 Python 3.x
+
+## 📦 **安装步骤**
+
+### 方案一：源码安装（推荐）
+
+```bash
+# 下载源码
+git clone https://github.com/wapiti-scanner/wapiti
+cd wapiti
+
+# 安装依赖
+pip install -r requirements.txt
+
+# 执行构建安装
+python setup.py install
+```
+
+### 方案二：pip 安装
+
+```bash
+pip install wapiti3
+```
+
+### 方案三：Kali Linux 内置
+
+```bash
+sudo apt update && sudo apt install wapiti
+```
+
+## 🔍 **验证安装**
+
+```bash
+wapiti --version
+```
+
+## 💡 **基本使用**
+
+```bash
+# 扫描目标网站
+wapiti -u https://example.com
+
+# 更多选项
+wapiti -u https://example.com -n 10 -b folder -v 1 -f html -o /tmp/report
+```
+
+- `-n`: 限制扫描URL数量
+- `-b`: 设定扫描范围
+- `-v`: 详细程度
+- `-f`: 报告格式（html/json/txt）
+- `-o`: 报告输出目录
+
+## ⚠️ **注意事项**
+
+- 仅用于**授权测试**，未经许可扫描他人网站属违法行为
+- 建议使用 Python 3 环境
+- 扫描前确认目标网络策略允许
diff --git "a/\351\231\210\346\231\272\350\264\244/20260603-\345\210\233\345\273\272\351\241\271\347\233\256.md" "b/\351\231\210\346\231\272\350\264\244/20260603-\345\210\233\345\273\272\351\241\271\347\233\256.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d17c1a28c985a027bbd7689df4922f1845f90bc7
--- /dev/null
+++ "b/\351\231\210\346\231\272\350\264\244/20260603-\345\210\233\345\273\272\351\241\271\347\233\256.md"
@@ -0,0 +1,31 @@
+# Webati 创建项目笔记
+
+> Webati 是一家专业的网站设计开发机构。要创建新网站项目，需执行以下流程。
+
+## 🚀 一、项目规划与准备
+
+- **明确需求**：与 **Webati** 共同确定网站目标、受众、核心功能与品牌信息，客户需全程参与。
+- **准备材料**：业务内容、品牌标识(Logo)、文案、图片视频等素材。
+- **确定范围**：商定核心页面，**Webati** 将据此创建 **站点地图 (Site Map)**，清晰展示页面布局、层级与关联。
+
+## 📂 二、使用 SDK 搭建项目结构
+
+ **前置**：需已完成 Webati SDK 的安装配置。
+
+1. **创建目录**：在终端执行 `mkdir my-web-project` 创建项目目录，并用 `cd my-web-project` 进入。
+2. **初始化配置**：运行 `webati-sdk init`。根据提示填入项目名称、类型及上一步确定的需求。
+3. **安装依赖**：执行 `npm install` 安装必要的项目依赖。
+
+## ⚙️ 三、核心开发与配置
+
+- **数据结构设计**：规划后台 **数据库 (Database)**，这是承载网站动态内容（如产品、文章）的核心，正确设计能支撑未来扩展。
+- **内容开发**：在 SDK 的 `/content` 目录下，使用 HTML/Markdown 等，将准备好的文案和图片素材构建到页面中。
+- **视觉实现**：在 `/assets` 目录内放置 CSS/JS 文件，并将页面布局与**设计的视觉稿 (Mock Layout)** 进行比对，确保功能与设计一致。
+
+## 🌐 四、启动与发布
+
+1. 在项目根目录执行 `npm run dev` 启动开发服务器预览。
+2. 完成开发后，执行 `npm run build` 打包生产版本。
+3. 将生成的 `/dist` 目录上传至您的网站服务器（如 Apache/Nginx）。
+
+**总结**：核心是 **前期规划** 明确方向，再通过 **SDK** 有序搭建设计与功能。
diff --git "a/\351\231\210\346\231\272\350\264\244/20260604-\350\243\205\345\214\205\344\270\216\345\267\245\345\205\267.md" "b/\351\231\210\346\231\272\350\264\244/20260604-\350\243\205\345\214\205\344\270\216\345\267\245\345\205\267.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4032ac7070164c74d64002f5fccf9d25c28c1724
--- /dev/null
+++ "b/\351\231\210\346\231\272\350\264\244/20260604-\350\243\205\345\214\205\344\270\216\345\267\245\345\205\267.md"
@@ -0,0 +1,26 @@
+# Web 开发：装包与工具精简笔记
+
+## 🚀 环境准备：安装 Node.js 与 npm
+
+* **下载安装**：访问 Node.js 官网下载并安装，npm 会随 Node.js 一同被自动安装。
+* **验证环境**：安装完成后，打开终端输入 `node -v` 和 `npm -v`，出现版本号即表示安装成功。
+
+## 🛠️ 项目初始化与安装
+
+| **操作阶段**   | **命令详解**                                                                                                                |
+| :------------- | :-------------------------------------------------------------------------------------------------------------------------- |
+| **初始化项目** | `npm init -y`：在当前目录快速创建一个包含默认配置的 `package.json` 文件，作为管理项目的配置文件。                           |
+| **生产依赖**   | `npm install <包名>` / `npm i <包名>`：下载并安装包到 `node_modules` 目录，并写入 `package.json` 中的 `dependencies` 字段。 |
+| **开发依赖**   | `npm install <包名> --save-dev` / `npm i <包名> -D`：安装仅在开发阶段需要使用的工具包，并记录在 `devDependencies` 字段中。  |
+| **全局安装**   | `npm install -g <包名>`：将包安装到系统全局，使其可在终端中作为命令行工具直接使用。                                         |
+
+## 💡 核心开发工具
+
+* **`webpack` & `webpack-cli`**：一个现代 JavaScript 应用程序的**静态模块打包器**。它们处理项目中复杂的依赖关系，将代码、图片、字体等资源打包成浏览器可高效加载的文件，是现代前端工程化的基石。
+* **`webpack-dev-server`**：提供了一个快速的开发服务器，并能实现实时重载，让你在修改代码后能即时在浏览器中看到效果。
+* **`create-react-app`**：一个用于快速搭建 **React** 项目环境的官方脚手架工具，通过一行命令即可帮你自动配置好 Webpack、Babel 等繁杂的开发环境。
+* **IDE 支持**：
+  * **WebStorm (内置 Terminal)**：可以直接在 WebStorm 的**内置终端**中执行安装命令，方便地进行包的管理与更新，无需切换窗口。
+  * **WebStorm (图形界面安装)**：也可以通过 WebStorm 的包管理工具界面，可视化的搜索、安装和管理项目依赖。
+  
+* **`bower install`**：一种较老的前端包管理器，WebStorm IDE 同样支持对其包进行图形化安装与管理。
diff --git "a/\351\231\210\346\231\272\350\264\244/20260605-CRUD\346\224\271\351\200\240.md" "b/\351\231\210\346\231\272\350\264\244/20260605-CRUD\346\224\271\351\200\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7310fab83ceeb3832a76b16a8ee313beea25da5b
--- /dev/null
+++ "b/\351\231\210\346\231\272\350\264\244/20260605-CRUD\346\224\271\351\200\240.md"
@@ -0,0 +1,126 @@
+# Vue.js生命周期函数笔记
+
+## 一、生命周期图示（简要）
+
+```vue
+创建 → 挂载 → 更新 → 销毁
+```
+
+## 二、各阶段钩子函数
+
+### 1. 创建阶段
+
+```javascript
+// 实例初始化前（data、methods不可用）
+beforeCreate() {
+  console.log('不能访问data');
+}
+
+// 实例创建完成（可访问data、methods，但未挂载DOM）
+created() {
+  console.log('可访问数据', this.message);
+  // 常用于：API请求、数据初始化
+}
+```
+
+### 2. 挂载阶段
+
+```javascript
+// 挂载前（模板编译完成，但未渲染DOM）
+beforeMount() {
+  console.log('el还未替换');
+}
+
+// 挂载完成（DOM已渲染，可访问真实DOM）
+mounted() {
+  console.log('DOM已挂载', this.$el);
+  // 常用于：操作DOM、初始化第三方库
+}
+```
+
+### 3. 更新阶段
+
+```javascript
+// 数据更新前（组件重新渲染前）
+beforeUpdate() {
+  console.log('DOM未更新', this.$el.innerHTML);
+}
+
+// 数据更新后（DOM已重新渲染）
+updated() {
+  console.log('DOM已更新');
+  // 注意：避免在此修改数据，防止死循环
+}
+```
+
+### 4. 销毁阶段
+
+```javascript
+// 实例销毁前（仍可访问数据）
+beforeUnmount() {
+  console.log('即将销毁');
+  // 常用于：清理定时器、取消事件监听
+}
+
+// 实例销毁后
+unmounted() {
+  console.log('已销毁');
+}
+```
+
+## 三、特殊钩子（内置组件）
+
+```javascript
+// 被keep-alive缓存时激活
+activated() {
+  console.log('组件激活');
+}
+
+// 被keep-alive缓存时失活
+deactivated() {
+  console.log('组件失活');
+}
+```
+
+## 四、常用场景速查
+
+```javascript
+export default {
+  // 1. 请求初始化数据
+  created() {
+    this.fetchData();
+  },
+  
+  // 2. DOM操作/三方库初始化
+  mounted() {
+    this.initChart();
+  },
+  
+  // 3. 清理工作
+  beforeUnmount() {
+    clearInterval(this.timer);
+    this.offEventListener();
+  }
+}
+```
+
+## 五、Vue3与Vue2对照
+
+| Vue3 | Vue2 |
+|------|------|
+
+| beforeCreate | beforeCreate |
+| created | created |
+| beforeMount | beforeMount |
+| mounted | mounted |
+| beforeUpdate | beforeUpdate |
+| updated | updated |
+| beforeUnmount | beforeDestroy |
+| unmounted | destroyed |
+
+**核心要点：**
+
+- `created`：发请求、初始化数据
+- `mounted`：操作DOM
+- `beforeUnmount`：清理副作用
+- 避免在`updated`中修改数据
diff --git "a/\351\231\210\346\231\272\350\264\244/20260608-\344\270\200\345\257\271\345\244\232\345\257\274\350\210\252\345\261\236\346\200\247.md" "b/\351\231\210\346\231\272\350\264\244/20260608-\344\270\200\345\257\271\345\244\232\345\257\274\350\210\252\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..515446820478bd7aaa0e8999d3f11d7356d622c7
--- /dev/null
+++ "b/\351\231\210\346\231\272\350\264\244/20260608-\344\270\200\345\257\271\345\244\232\345\257\274\350\210\252\345\261\236\346\200\247.md"
@@ -0,0 +1,109 @@
+# Web API 一对多导航属性精简笔记
+
+> **后续笔记一律精简要求，将严格遵循此格式。** 本笔记主要记录 ASP.NET Core / EF Core 中一对多关系的配置与使用。
+
+## 🧩 导航属性是什么
+
+导航属性是 EF Core 在实体类中定义的**特殊属性**，用于在对象层面表示表间关系（外键），让开发者用“对象点属性”的方式操作关系数据，无需手写 SQL JOIN。导航有两种形式：**集合导航**（List/ICollection< T >，关系中的“多”方）和**引用导航**（单一对象引用，关系中的“一”方）。
+
+### 📌 代码定义示例
+
+```csharp
+// 主体实体（“一”端）
+public class Blog
+{
+    public int Id { get; set; }
+    // 集合导航：一个 Blog 有多个 Post
+    public ICollection<Post> Posts { get; set; } = new List<Post>();
+}
+
+// 依赖实体（“多”端）
+public class Post
+{
+    public int Id { get; set; }
+    public int BlogId { get; set; }  // 外键属性
+    // 引用导航：一个 Post 属于一个 Blog
+    public Blog Blog { get; set; } = null!;
+}
+```
+
+- `Blog.Posts` 为集合导航，表示“一个博客下有多个文章”；
+- `Post.Blog` 为引用导航，表示“每篇文章属于一个博客”。
+- 外键 `Post.BlogId` + 引用导航 `Post.Blog` 共同建立了关系约束。
+
+### 🔧 关系配置方式
+
+EF Core 默认**约定大于配置**。以下面的实体为例，EF 能自动推断这是一对多关系：
+
+```csharp
+public class Article { 
+    public long Id { get; set; } 
+    public List<Comment> Comments { get; set; } 
+}
+public class Comment { 
+    public long Id { get; set; } 
+    public long ArticleId { get; set; } 
+    public Article Article { get; set; } 
+}
+```
+
+如果需要更明确的控制，或在约定不成立时手动配置，可以使用 **Fluent API**：
+
+```csharp
+protected override void OnModelCreating(ModelBuilder modelBuilder)
+{
+    modelBuilder.Entity<Article>()
+        .HasMany(a => a.Comments)     // Article 有多个 Comments
+        .WithOne(c => c.Article)      // Comment 有一个 Article
+        .HasForeignKey(c => c.ArticleId);
+}
+```
+
+- `HasMany()` + `WithOne()` 组合定义一对多；
+- 需先用 `Has` 方向确定主体，再用 `With` 方向确认依赖；
+- 最后 `HasForeignKey()` 指定外键字段。
+
+### ⚡ 数据加载策略
+
+导航属性默认**不自动加载**，EF Core 提供三种加载策略：
+
+1. **贪婪加载 (Eager Loading)**：一次性加载主体与所有关联数据
+
+   ```csharp
+   var blogs = context.Blogs
+        .Include(b => b.Posts)     // 加载集合导航
+        .ThenInclude(p => p.Comments) // 继续深层加载
+        .ToList();
+   ```
+
+   `Include()` 减少后续 SQL 请求，**显著提升查询性能**；深层嵌套时使用 `ThenInclude()`。
+
+2. **显式加载 (Explicit Loading)**：按需手动加载
+
+   ```csharp
+   context.Entry(blog).Collection(b => b.Posts).Load();
+   ```
+
+3. **延迟加载 (Lazy Loading)**：访问时自动触发（需安装 `Microsoft.EntityFrameworkCore.Proxies`，配置
+
+`UseLazyLoadingProxies`，导航属性设为 `virtual`）
+
+```csharp
+protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
+{
+    optionsBuilder.UseLazyLoadingProxies();
+}
+```
+
+### ✅ 最佳实践
+
+- 优先使用**贪婪加载**主动加载必要数据（避免 N+1 查询）；
+- 复杂关联查询优先 **EF Core + Include** 而不是 C# 侧手写循环；
+- 注意**双向导航的序列化循环**（Blog ↔ Posts），返回 DTO/Json 时避免循环引用；
+- 合理利用 **ThenInclude** 控制深层数据加载范围。
+
+### ⚠️ 常见问题
+
+- 忘记 `Include` → 访问导航属性时返回 null；
+- 深层 `Include` → 生成复杂 JOIN，可能拉取大量冗余数据，影响性能；
+- `WithMany()` 后不调用 `HasForeignKey()` 时，EF 会按默认命名规则自动映射外键，当实体间字段命名不规范时务必手动配置。