From 32bfed8f446a1601f571e42b727ece2ce0809825 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E4=BE=9D=E6=AC=A3?= <2986589005@qq.com>
Date: Fri, 23 May 2025 17:00:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E5=9B=9B=E5=91=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...06\347\246\273\351\241\271\347\233\256.md" | 36 ++++++++++
 ...26\350\276\221\345\212\237\350\203\275.md" | 71 +++++++++++++++++++
 ...--\347\273\204\344\273\266\345\272\223.md" | 45 ++++++++++++
 3 files changed, 152 insertions(+)
 create mode 100644 "\351\231\210\344\276\235\346\254\243/20250519--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"
 create mode 100644 "\351\231\210\344\276\235\346\254\243/20250520--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\344\271\213\346\226\260\345\242\236\347\274\226\350\276\221\345\212\237\350\203\275.md"
 create mode 100644 "\351\231\210\344\276\235\346\254\243/20250521--\347\273\204\344\273\266\345\272\223.md"

diff --git "a/\351\231\210\344\276\235\346\254\243/20250519--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md" "b/\351\231\210\344\276\235\346\254\243/20250519--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"
new file mode 100644
index 0000000..fe79a24
--- /dev/null
+++ "b/\351\231\210\344\276\235\346\254\243/20250519--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"
@@ -0,0 +1,36 @@
+### Vue 响应式数据管理与生命周期函数
+1. 响应式数据管理
+    - 在 Vue 中，可以通过 ` reactive` 或 ` ref` 来创建响应式数据。
+    - ` reactive` 用于创建一个响应式的对象，而 ` ref` 用于创建一个响应式的引用。
+    - 在模板中使用 ` v-model` 指令可以实现双向数据绑定。
+
+2. 生命周期函数
+    - ` onMounted` 是 Vue 的生命周期函数之一，用于在组件挂载后执行初始化操作。
+    - 通常在 ` onMounted` 中调用 API 获取数据并更新响应式数据。
+
+
+3. 路由跳转
+- 使用 ` useRouter` 从 ` vue-router` 中获取路由器实例。
+- 在 ` btnEdit` 和 ` btnAdd` 函数中，通过 ` router.push` 实现页面跳转。
+
+
+### 后端代码
+
+#### 1. 数据库连接与模型定义
+    - 使用 ` Sequelize` 连接 MySQL 数据库
+    - 定义 ` Book` 模型，包含 ` bookname` 和 ` author` 字段
+    - 使用 ` sync` 方法同步模型到数据库，并使用 ` bulkCreate` 插入初始数据
+
+#### 2. 路由与控制器逻辑
+- 定义路由处理函数，分别处理获取书籍列表、获取单个书籍、添加书籍、删除书籍和更新书籍的请求。
+- 在每个路由处理函数中，根据请求参数执行相应的数据库操作，并返回结果。
+
+
+### Vue 数组变化侦测
+
+#### 1. 变更方法
+- Vue 能够侦听数组的变更方法，如 ` push`、` pop`、` shift`、` unshift`、` splice`、` sort` 和 ` reverse`，并在它们被调用时触发相关的更新。
+
+#### 2. 替换一个数组
+- 对于不可变方法（如 ` filter`、` concat` 和 ` slice`），需要将旧数组替换为新数组。
+
diff --git "a/\351\231\210\344\276\235\346\254\243/20250520--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\344\271\213\346\226\260\345\242\236\347\274\226\350\276\221\345\212\237\350\203\275.md" "b/\351\231\210\344\276\235\346\254\243/20250520--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\344\271\213\346\226\260\345\242\236\347\274\226\350\276\221\345\212\237\350\203\275.md"
new file mode 100644
index 0000000..c5418d9
--- /dev/null
+++ "b/\351\231\210\344\276\235\346\254\243/20250520--\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\344\271\213\346\226\260\345\242\236\347\274\226\350\276\221\345\212\237\350\203\275.md"
@@ -0,0 +1,71 @@
+### Vue.js 前端开发笔记：图书添加与编辑功能
+1. 响应式数据管理
+    - 使用 ` reactive` 创建响应式对象，用于管理表单数据。
+    - 在模板中使用 ` v-model` 实现双向数据绑定，确保用户输入能够实时更新响应式数据。
+
+2. API 调用
+    - 使用 Axios 进行 HTTP 请求，调用后端 API 实现图书的添加和更新。
+    - 在保存成功后，通过路由跳转返回到主页面。
+
+#### 前端代码要点
+```vue
+<template>
+    <input type="text" v-model="obj.bookname">
+    <input type="text" v-model="obj.author">
+</template>
+
+<script setup>
+import { onMounted, reactive } from "vue";
+import { getItem, putItem, addItem, getId } from '@/api/api.js';
+import { useRouter, useRoute } from "vue-router";
+
+let route = useRoute();
+let router = useRouter();
+
+let obj = reactive({
+    author: '',
+    bookname: ''
+});
+
+onMounted(async () => {
+    let id = route.params.id || 0;
+    if (id) {
+        let res = await getId(id);
+        Object.assign(obj, res.data);
+    }
+});
+
+async function btnSave() {
+    let id = route.params.id;
+    let res;
+    if (id) {
+        res = await putItem(id, obj);
+    } else {
+        res = await addItem(obj);
+    }
+    if (res.code === 1000) {
+        router.push('/');
+    } else {
+        console.log(res.msg);
+    }
+}
+</script>
+```
+
+#### 后端代码要点
+```javascript
+export const getId = async (id) => {
+    let data = await axios.get(`http://localhost:8000/books/${id}`);
+    return data.data;
+};
+
+export const addItem = async (obj) => {
+    let data = await axios.post(`http://localhost:8000/books`, obj);
+    return data.data;
+};
+
+export const putItem = async (id, obj) => {
+    let data = await axios.put(`http://localhost:8000/books/${id}`, obj);
+    return data.data;
+};
+```
diff --git "a/\351\231\210\344\276\235\346\254\243/20250521--\347\273\204\344\273\266\345\272\223.md" "b/\351\231\210\344\276\235\346\254\243/20250521--\347\273\204\344\273\266\345\272\223.md"
new file mode 100644
index 0000000..e9a130a
--- /dev/null
+++ "b/\351\231\210\344\276\235\346\254\243/20250521--\347\273\204\344\273\266\345\272\223.md"
@@ -0,0 +1,45 @@
+- **基础用法示例**：
+  - 创建一个两列布局，第一列占 4 份，第二列占 10 份，并偏移 4 份：
+    ```html
+    <var-row>
+      <var-col span="4">span: 4</var-col>
+      <var-col span="10" offset="4">offset: 4, span: 10</var-col>
+    </var-row>
+    ```
+  - 创建一个单列布局，偏移 12 份，占 12 份：
+    ```html
+    <var-row>
+      <var-col offset="12" span="12">offset: 12, span: 12</var-col>
+    </var-row>
+    ```
+
+- **设置列元素间距**：通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。例如，设置列间距为 20 像素：
+  ```html
+  <var-row gutter="20">
+    <var-col span="8">span: 8</var-col>
+    <var-col span="8">span: 8</var-col>
+    <var-col span="8">span: 8</var-col>
+  </var-row>
+  ```
+
+- **响应式布局**：可以使用 `lg`、`md`、`sm`、`xs` 等属性来设置不同屏幕尺寸下的布局方式，以实现响应式布局。例如，在大屏幕上显示 8 份宽的列，在小屏幕上显示 12 份宽的列：
+  ```html
+  <var-row>
+    <var-col lg="8" sm="12">响应式布局示例</var-col>
+  </var-row>
+  ```
+
+- **布局属性说明**：
+  - `span`：设置列所占的宽度百分比，范围为 0 到 24。
+  - `offset`：设置列的偏移宽度，范围为 0 到 24。
+  - `gutter`：设置列元素之间的间距，可以是固定值或对象（包含 `horizontal` 和 `vertical` 属性）。
+  - `lg`、`md`、`sm`、`xs`：分别对应大屏幕、中等屏幕、小屏幕和超小屏幕的布局设置。
+
+- **其他布局方式**：除了使用 `span` 和 `offset` 属性外，还可以使用 `flex` 布局方式来实现更复杂的布局需求。例如，创建一个两列布局，第一列占 8 份宽，第二列占 4 份宽，并且第二列居中对齐：
+  ```html
+  <var-row justify="center">
+    <var-col span="8">span: 8</var-col>
+    <var-col span="4">span: 4</var-col>
+  </var-row>
+  ```
+
-- 
Gitee