From 42253299fe84f3c5df652cc81f418d2b4bab6597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E7=A3=8A?= <2466435919@qq.com>
Date: Sun, 19 May 2024 20:58:28 +0800
Subject: [PATCH] vue

---
 "\346\236\227\347\243\212/2024-05-13.md" | 103 +++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 "\346\236\227\347\243\212/2024-05-13.md"

diff --git "a/\346\236\227\347\243\212/2024-05-13.md" "b/\346\236\227\347\243\212/2024-05-13.md"
new file mode 100644
index 0000000..e81138a
--- /dev/null
+++ "b/\346\236\227\347\243\212/2024-05-13.md"
@@ -0,0 +1,103 @@
+## 考试代码
+
+<script setup lang="ts">
+import axios from 'axios';
+import { onMounted, reactive, ref } from 'vue'
+
+let renderArr = reactive([])
+let formData = reactive({
+  title: null,
+  author: null,
+  content: null,
+})
+
+// 1. 定义默认渲染数组renderArr，发送get请求获取数据，将数据赋值到rednerArr
+onMounted(async () => {
+  const { data } = await axios.get('http://localhost:3000/blod')
+  Object.assign(renderArr, data)
+})
+
+// 5. 删除链接，发送delete请求，传递id参数，从rednderArr删除id数据
+async function btnDel(id: number) {
+  if (confirm('确认删除')) {
+    await axios.delete(`http://localhost:3000/blod/${id}`)
+    const { data } = await axios.get('http://localhost:3000/blod')
+    renderArr.splice(0,renderArr.length)
+    Object.assign(renderArr, data)
+  }
+}
+async function btnAdd() {
+  await axios.post('http://localhost:3000/blod', formData)
+  window.location.reload()
+  
+}
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>标题</th>
+        <th>作者</th>
+        <th>内容</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+<!-- 2. 页面中渲染renderArr -->
+      <tr v-for="item in renderArr" :key="item.id">
+        <td>{{ item.title }}</td>
+        <td>{{ item.author }}</td>
+        <td>{{ item.content }}</td>
+        <td>
+          <button>编辑</button>
+          <RouterLink @click="btnDel(item.id)" to="/home">删除</RouterLink>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <hr>
+  <table>
+    <tr>
+      <td>标题</td>
+      <td><input type="text" v-model="formData.title"></td>
+    </tr>
+    <tr>
+      <td>作者</td>
+      <td><input type="text" v-model="formData.author"></td>
+    </tr>
+    <tr>
+      <td>内容</td>
+      <td><input type="text" v-model="formData.content"></td>
+    </tr>
+    <tr>
+      <td></td>
+      <td>
+        <button @click="btnAdd">提交</button>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<!-- <style scoped>
+table {
+  text-align: left;
+  ;
+  border-collapse: collapse;
+}
+
+thead {
+  height: 30px;
+  background-color: rgb(49, 113, 232);
+  color: #fff;
+}
+
+tr {
+  border-bottom: 1px solid rgb(101, 99, 99);
+}
+
+th,
+td {
+  height: 30px;
+}
+</style> -->
-- 
Gitee