From e5b91ca44b4b794b73230611a3cb0cf91ed63bb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=81=BF?= <2262917336@qq.com> Date: Mon, 19 May 2025 11:22:04 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=89=8D=E7=AB=AFCRUD=EF=BC=88=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E3=80=81=E6=9F=A5=E6=89=BE=E3=80=81=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...47\253\257CRUD\347\225\214\351\235\242.md" | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 "\345\210\230\347\201\277/20250519-\345\211\215\347\253\257CRUD\347\225\214\351\235\242.md" 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 0000000..77ea393 --- /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 -- Gitee From 2c6ac0c1fc3f687c824380d7b3a59b9d4472ace7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=81=BF?= <2262917336@qq.com> Date: Tue, 20 May 2025 10:21:06 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E5=A2=9E=E3=80=81=E6=94=B9=E5=8A=9F=E8=83=BD=EF=BC=8C=E7=BB=93?= =?UTF-8?q?=E6=9D=9F=E5=89=8D=E5=90=8E=E7=AB=AF=E5=88=86=E7=A6=BB=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...36\346\224\271\345\212\237\350\203\275.md" | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 "\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" 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 0000000..c6c30c1 --- /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 -- Gitee From abd048987b9ef909772fa2cb671062a8f1677183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=81=BF?= <2262917336@qq.com> Date: Fri, 23 May 2025 17:08:26 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...1-\347\273\204\344\273\266\345\272\223.md" | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 "\345\210\230\347\201\277/20250521-\347\273\204\344\273\266\345\272\223.md" 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 0000000..157075e --- /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 + +``` \ No newline at end of file -- Gitee