diff --git "a/\345\210\230\347\201\277/20250519-\345\211\215\347\253\257CRUD\347\225\214\351\235\242.md" "b/\345\210\230\347\201\277/20250519-\345\211\215\347\253\257CRUD\347\225\214\351\235\242.md"
new file mode 100644
index 0000000000000000000000000000000000000000..77ea3937cf847bbc8a7fbed4695d80b0db6d5c91
--- /dev/null
+++ "b/\345\210\230\347\201\277/20250519-\345\211\215\347\253\257CRUD\347\225\214\351\235\242.md"
@@ -0,0 +1,67 @@
+## 1. 创建生命周期钩子
+组件挂载后自动调用对应方法，使用axios向后端请求数据，获取书籍列表
+- 调用 getAll() 获取全部书籍数据
+- 将返回的书籍数组解构后添加到 books 中
+
+> books 更新触发 DOM 自动重渲染
+```js
+onMounted(async () => {
+    let data = await getAll();
+    books.push(...data.data)
+})
+```
+
+### api请求逻辑
+1. getAll 函数：获取图书列表
+    - 根据是否有 keyword 发送不同请求
+    - 返回格式需符合 { code, data, msg } 结构
+```js
+export const getAll = async (keyword) => {
+    let data;
+    if (keyword) { data = await axios.get(`http://localhost:3000/book?keyword=${keyword}`)
+    } else {  data = await axios.get(`http://localhost:3000/book`)}
+    return data.data;
+}
+```
+
+2. delItem 函数：删除对应图书
+    - 发送 DELETE 请求到 /book/:id
+    - 返回操作结果（成功 / 失败）
+```js
+export const delItem = async (id) => {
+    let data = await axios.delete(`http://localhost:3000/book/${id}`)
+    return data.data;
+}
+```
+
+## 查找对应图书
+1. 获取并处理搜索关键字（去除首尾空格）
+2. 调用 getAll(keyword) 发送搜索请求
+3. 清空当前 books 数组
+4. 将搜索结果添加到 books 中（触发 DOM 更新）
+```js
+async function btnQuery() {
+    let trimKeyword = keyword.value.trim();
+    let data = await getAll(trimKeyword);
+    books.splice(0);
+    books.push(...data.data);
+}
+```
+
+## 删除图书
+1. 弹出确认对话框
+2. 确认后调用 delItem(id) 发送删除请求
+3. 根据返回状态码（code === 1000）判断操作结果
+4. 成功则从 books 中移除对应项（触发 DOM 更新）
+5. 失败则打印错误信息
+```js
+async function btnDel(id) {
+    if (confirm('真的要删除吗?')) {
+        let res = await delItem(id);
+        if (res.code === 1000) {
+            let index = books.findIndex(item => item.id === id);
+            books.splice(index, 1);
+        } else {    console.log(res.msg);    }
+    }
+}
+```
\ No newline at end of file
diff --git "a/\345\210\230\347\201\277/20250520-\345\256\214\346\210\220\345\211\215\347\253\257\345\242\236\346\224\271\345\212\237\350\203\275.md" "b/\345\210\230\347\201\277/20250520-\345\256\214\346\210\220\345\211\215\347\253\257\345\242\236\346\224\271\345\212\237\350\203\275.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c6c30c155f6263b6e53f74c81c3142b5abf70762
--- /dev/null
+++ "b/\345\210\230\347\201\277/20250520-\345\256\214\346\210\220\345\211\215\347\253\257\345\242\236\346\224\271\345\212\237\350\203\275.md"
@@ -0,0 +1,55 @@
+## 1. api模块
+所有方法都使用 axios 发送 HTTP 请求，并返回后端数据
+
+1. getById：通过 ID 获取单个图书信息（GET 请求）
+2. addItem：创建新图书（POST 请求）
+3. editItem：更新已有图书（PUT 请求）
+```js
+// 查找单个数据
+export const getById = async (id) => {
+    let data = await axios.get(`${url}/book/${id}`)
+    return data.data
+}
+// 新增数据
+export const addItem = async (obj) => {
+    let data = await axios.post(`${url}/book`,obj)
+    return data.data
+}
+// 编辑数据
+export const editItem = async (id,obj) => {
+    let data = await axios.put(`${url}/book/${id}`,obj)
+    return data.data
+}
+```
+
+## 2. 生命周期钩子
+1. 获取 URL 中的id参数
+2. 如果id存在，调用 `getById方法` 获取图书详情
+3. 使用Object.assign将返回的数据合并到响应式对象obj中，自动更新表单显示
+```js
+onMounted(async () => {
+    let id = route.params.id || 0
+    let data = await getById(id)
+    Object.assign(obj,data.data)
+})
+```
+
+## 3. 新增和编辑
+1. 获取 URL 参数中的id，判断是新增还是编辑操作
+2. 调用对应的 API 方法：editItem（编辑）或addItem（新增）
+3. 根据返回结果判断操作是否成功：
+    - 成功（code 为 1000）：跳转到图书列表页
+    - 失败：打印错误信息到控制台
+```js
+async function btnSave(){
+    let id = route.params.id || 0
+    let data
+    if(id){
+        data = await editItem(id,obj)
+    }else{
+        data = await addItem(obj)
+    }
+    if(data.code === 1000){    router.push('/book')
+    }else{    console.log(data.msg);}
+}
+```
\ No newline at end of file
diff --git "a/\345\210\230\347\201\277/20250521-\347\273\204\344\273\266\345\272\223.md" "b/\345\210\230\347\201\277/20250521-\347\273\204\344\273\266\345\272\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..157075ee969652ddbf528e410796f26bc6ea616c
--- /dev/null
+++ "b/\345\210\230\347\201\277/20250521-\347\273\204\344\273\266\345\272\223.md"
@@ -0,0 +1,33 @@
+## 组件库Vant
+
+### 安装
+```bash
+# 通过 yarn 安装
+yarn add vant
+```
+
+### 引入组件
+- 常规用法：
+引入需要的组件和组件样式，然后注册组件。例如：
+```js
+import { createApp } from 'vue';
+import { Button } from 'vant';
+import 'vant/lib/index.css';
+
+const app = createApp();
+app.use(Button);
+```
+
+- 按需引入组件样式：
+在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中，可以使用unplugin-vue-components插件配合@vant/auto-import-resolver解析器来按需引入组件样式。首先安装插件：
+```bash
+npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D
+```
+
+### 使用组件
+Vue 项目：在组件模板中直接使用 Vant 组件标签即可。例如：
+```vue
+<template>
+  <van-button type="primary">主要按钮</van-button>
+</template>
+```
\ No newline at end of file