From c65300c5ff43c3d13bad463f5e797b30f9ca4c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E6=80=9D=E6=87=BF?= <1450276318@qq.com>
Date: Sun, 25 May 2025 16:36:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E5=8D=81=E5=9B=9B=E5=91=A8=E7=AC=94?=
 =?UTF-8?q?=E8=AE=B0=E4=BD=9C=E4=B8=9A=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...4\350\256\260+\344\275\234\344\270\232.md" | 109 ++++++++++++++
 ...4\350\256\260+\344\275\234\344\270\232.md" | 142 ++++++++++++++++++
 ...4\350\256\260+\344\275\234\344\270\232.md" |  21 +++
 3 files changed, 272 insertions(+)
 create mode 100644 "\345\215\242\346\200\235\346\207\277/20250519_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
 create mode 100644 "\345\215\242\346\200\235\346\207\277/20250520_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
 create mode 100644 "\345\215\242\346\200\235\346\207\277/20250521_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"

diff --git "a/\345\215\242\346\200\235\346\207\277/20250519_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\215\242\346\200\235\346\207\277/20250519_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..05e0c09
--- /dev/null
+++ "b/\345\215\242\346\200\235\346\207\277/20250519_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
@@ -0,0 +1,109 @@
+# 笔记
+## 完成后端的路由请求和数据库创建
+### 未封装路由
+```js
+import Koa from 'koa'
+import Router from 'koa-router'
+import bodyParser from 'koa-bodyparser'
+import cors from'@koa/cors'
+import { Sequelize, DataTypes, where, Op } from 'sequelize'
+const router = new Router()
+const app = new Koa()
+const port = 8080
+app.use(cors())
+app.use(bodyParser())
+// 建立数据库
+//1. 初始化
+let sequelize = new Sequelize('BookDB', 'root', '123456', {
+    dialect: "mysql",
+    host: 'localhost'
+})
+// 2. 创建表
+let Booktb = sequelize.define('bookdb', {
+    bookName: {
+        type: DataTypes.STRING,
+        allowNull: false
+    },
+    author: {
+        type: DataTypes.STRING,
+        allowNull: true
+    },
+    price: {
+        type: DataTypes.INTEGER,
+        allowNull: true
+    }
+})
+// 3. 运行
+await sequelize.sync()
+
+// -----------------------------------------------
+//查找,过滤
+router.get('/book', async (ctx, next) => {
+    let keyword =ctx.request.query.keyword || ''
+    let where =null
+    if(keyword.trim()){
+        where={
+            [Op.or]:{
+                bookName:{
+                    [Op.like]:`%${keyword}%`
+                },
+                author:{
+                    [Op.like]:`%${keyword}%`
+                }
+            }
+        }
+    }
+    const obj =await Booktb.findAll({where})
+    ctx.body = {
+        code: 888,
+        data: obj,
+        msg: 'success'
+    }
+})
+//单个对象
+router.get('/book/:id', async (ctx, next) => {
+    let id = ctx.params.id || 0
+    let obj = await Booktb.findByPk(id)
+    ctx.body = {
+        code: 888,
+        data: obj,
+        msg: 'success'
+    }
+})
+//新增
+router.post('/book', async (ctx, next) => {
+    let obj = ctx.request.body
+    let res = await Booktb.create(obj)
+    ctx.body = {
+        code: 888,
+        data: res,
+        msg: 'success'
+    }
+})
+//修改
+router.put('/book/:id', async (ctx, next) => {
+    let id = ctx.params.id||0
+    let obj = ctx.request.body
+    let res = await Booktb.update(obj, { where: { id } })
+    ctx.body = {
+        code: 888,
+        data: res,
+        msg: 'success'
+    }
+})
+//删除
+router.delete('/book/:id', async (ctx, next) => {
+    let id = ctx.params.id ||0
+    let res = await Booktb.destroy({where:{id}})
+    ctx.body = {
+        code: 888,
+        data: res,
+        msg: 'success'
+    }
+})
+// -----------------------------------------------
+app.use(router.routes())
+app.listen(port, () => {
+    console.log(`服务运行在：http://localhost:${port}`)
+})
+```
\ No newline at end of file
diff --git "a/\345\215\242\346\200\235\346\207\277/20250520_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\215\242\346\200\235\346\207\277/20250520_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..6811a2b
--- /dev/null
+++ "b/\345\215\242\346\200\235\346\207\277/20250520_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
@@ -0,0 +1,142 @@
+# 笔记
+## 完成前端页面设计和axios请求
+### 页面功能核心
+```js
+<----- 列表页------>
+<template>
+    <div>
+        <div><input type="text" placeholder="请输入关键词" v-model="keyword"><input type="button" value="查找" @click="btnsearch">
+            <input type="button" value="新增" @click="router.push('/book')"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Id</th>
+                    <th>书名</th>
+                    <th>作者</th>
+                    <th>价格</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in arr" :key="item.id">
+                    <td>{{ item.id }}</td> 
+                    <td>{{ item.bookName }}</td> 
+                    <td>{{ item.author }}</td> 
+                    <td>{{ item.price }}</td> 
+                    <td>
+                        <input type="button" value="编辑" @click="router.push(`/book/${item.id}`)">
+                        <input type="button" value="删除" @click="btndel(item.id)">
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+<script setup>
+import { useRouter,useRoute } from 'vue-router';
+import { onMounted,ref } from 'vue';
+import { fetchAllData ,fetchDelData} from '@/api/http';
+const router =useRouter()
+const route =useRoute()
+const arr =ref([])
+const keyword =ref('')
+// //获取数据
+onMounted(async ()=>{
+let data=await fetchAllData()
+arr.value=data.data
+})
+//查找过滤
+async function btnsearch(){
+    let data =await fetchAllData(keyword.value.trim())
+    arr.value.splice(0)
+    arr.value.push(...data.data)
+    keyword.value=''
+}
+//删除
+async function btndel(id){
+    if(confirm('你确定删除吗')){
+        await fetchDelData(id)
+        router.go(0)
+    }
+}
+</script>
+
+<------ 新增或编辑页 ------>
+<template>
+    <div>
+        <form>
+            <label for="bookName">书名:</label><input type="text" v-model="obj.bookname"><br>
+            <label for="author">作者:</label><input type="text" v-model="obj.author"><br>
+            <label for="price">价格:</label><input type="number" v-model="obj.price"><br>
+        </form>
+        <input type="button" value="确认" @click="submit(route.params.id)"><input type="button" value="取消"
+            @click="router.push('/')">
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import { fetchAddDate, fetchSingleData, fetchEditData } from '@/api/http';
+import { useRouter, useRoute } from 'vue-router';
+const router = useRouter()
+const route = useRoute()
+const obj = ref({})
+
+onMounted(async () => {
+        if (route.params.id) {
+        let id = route.params.id
+        let data = await fetchSingleData(id)
+        Object.assign(obj.value,data.data)
+        }
+})
+
+const submit = async (id) => {
+    if (id) {
+        await fetchEditData(id,obj)
+        alert('修改成功')
+    } else {
+        await fetchAddDate(obj)
+        alert('新增成功')
+    }
+    router.push('/')
+}
+</script>
+```
+### api功能接口
+```js
+const url = 'http://localhost:8080'
+import axios from "axios"
+//请求数据
+export const fetchAllData = async (keyword) => {
+  let data;
+  if (keyword) {
+    data = await axios.get(`${url}/book?keyword=${keyword}`)
+  }
+  else {
+    data = await axios.get(`${url}/book`)
+
+  }
+  return data.data
+}
+//请求单个数据
+export const fetchSingleData = async (id) => {
+  let data = await axios.get(`${url}/book/${id}`)
+  return data.data
+}
+//新增数据
+export const fetchAddDate = async (obj) => {
+  await axios.post(`${url}/book`,obj)
+}
+
+//修改数据
+export const fetchEditData = async (id, obj) => {
+  await axios.put(`${url}/book/${id}`, obj)
+}
+
+//删除数据
+export const fetchDelData = async (id) => {
+  await axios.delete(`${url}/book/${id}`)
+}
+```
+### 展示
+
+
diff --git "a/\345\215\242\346\200\235\346\207\277/20250521_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md" "b/\345\215\242\346\200\235\346\207\277/20250521_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..dbc1557
--- /dev/null
+++ "b/\345\215\242\346\200\235\346\207\277/20250521_\350\257\276\345\240\202\347\254\224\350\256\260+\344\275\234\344\270\232.md"
@@ -0,0 +1,21 @@
+# 笔记
+## 组件库Vant4
+#### 安装：npm install vant
+#### 引入注册：
+```js
+import {Button} from 'vant'
+app.use(Button)
+```
+#### 使用：
+```js
+<script>
+import {Button} from 'vant'
+</script>
+<template>
+<van-button type="primary">主要按钮</van-button>
+<van-button type="success">成功按钮</van-button>
+<van-button type="default">默认按钮</van-button>
+<van-button type="danger">危险按钮</van-button>
+<van-button type="warning">警告按钮</van-button>
+</template>
+```
-- 
Gitee