diff --git "a/\345\217\262\347\247\200\347\272\242/20240512_\347\273\203\344\271\240.md" "b/\345\217\262\347\247\200\347\272\242/20240512_\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a5d5a61a4e75a295eed00bb903a7a47634014fc0
--- /dev/null
+++ "b/\345\217\262\347\247\200\347\272\242/20240512_\347\273\203\344\271\240.md"
@@ -0,0 +1,135 @@
+### 代码
+
+<template>
+  <div class="top">
+    <input type="text" name="text" placeholder="请输入关键字" v-model="msg" />
+    <input type="button" value="查询" @click="Search" />
+    <input type="button" value="添加" @click="isShowFn" />
+  </div>
+  <table>
+    <tr>
+      <th>序号</th>
+      <th>id</th>
+      <th>标题</th>
+      <th>作者</th>
+      <th>标签</th>
+      <th>操作</th>
+    </tr>
+    <tr v-for="item in listArr">
+      <td>{{ i }}</td>
+      <td>{{ item.id }}</td>
+
+      <td v-if="item.noEdit">{{ item.title }}</td>
+      <td v-else><input type="text" v-model="item.title" /></td>
+
+      <td v-if="item.noEdit">{{ item.author }}</td>
+      <td v-else><input type="text" v-model="item.author" /></td>
+
+      <td v-if="item.noEdit">{{ item.flag }}</td>
+      <td v-else><input type="te xt" v-model="item.flag" /></td>
+
+      <td v-if="item.noEdit">
+        <input type="button" value="编辑" @click="Edit(item)" />
+        <input type="button" value="删除" @click="Dele(item.id)" />
+      </td>
+      <td v-else>
+        <input type="button" value="提交" @click="SubmitEdit(item)" />
+        <input type="button" value="取消" @click="Cancle" />
+      </td>
+    </tr>
+    <tr v-if="isShow">
+      <td></td>
+      <td><input type="text" v-model="obj.title" /></td>
+      <td><input type="text" v-model="obj.author" /></td>
+      <td><input type="text" v-model="obj.flag" /></td>
+      <td>
+        <input type="button" value="提交" @click="SubmitAdd" />
+        <input type="button" value="取消" @click="Cancle" />
+      </td>
+    </tr>
+
+  </table>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import axios from "axios";
+
+//初始化数据
+let listArr = reactive([]);
+let i=ref(1)
+let msg = ref("");
+let isShow = ref(false);
+let obj = reactive({ title: "", author: "", flag: "" });
+
+onMounted(() => {
+
+  axios.get("http://localhost:3000/blog").then((res) => {
+    res.data.data.forEach((item) => {
+      item.i
+      item.noEdit = true;
+    });
+    listArr.splice(0, listArr.length, ...res.data.data);
+  });
+});
+
+//
+function isShowFn() {
+  isShow.value = true;
+}
+
+//
+function Cancle() {
+  isShow.value = false;
+}
+
+//查询
+function Search() {
+  console.log(msg.value);
+  if (msg.value != null) {
+    axios.get(`http://localhost:3000/blog/${msg.value}`).then((res) => {
+      res.data.data.forEach(item=>{
+        item.noEdit=true
+      })
+      listArr.splice(0, listArr.length, ...res.data.data);
+    });
+  }
+}
+
+//添加
+function SubmitAdd() {
+  isShowFn();
+  axios.post("http://localhost:3000/blog", obj).then((res) => {
+    res.data.data.forEach((item) => {
+      item.noEdit = true;
+    });
+    listArr.splice(0, listArr.length, ...res.data.data);
+  });
+  isShow.value = false;
+  obj={ title: "", author: "", flag: "" }
+}
+//编辑
+function Edit(item) {
+  item.noEdit=false
+}
+
+
+function SubmitEdit(item) {
+  axios.put(`http://localhost:3000/blog/${item.id}`, item).then((res) => {
+    res.data.data.forEach((item) => {
+      item.noEdit = true;
+    });
+    listArr.splice(0, listArr.length, ...res.data.data);
+  });
+}
+
+//删除
+function Dele(id) {
+  axios.delete(`http://localhost:3000/blog/${id}`).then((res) => {
+    res.data.data.forEach((item) => {
+      item.noEdit = true;
+    });
+    listArr.splice(0, listArr.length, ...res.data.data);
+  });
+}
+</script>
diff --git "a/\345\217\262\347\247\200\347\272\242/\346\225\210\346\236\234\345\233\276.png" "b/\345\217\262\347\247\200\347\272\242/\346\225\210\346\236\234\345\233\276.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f2b42756a89afc297ecce8e171c6da5d3638e7fa
Binary files /dev/null and "b/\345\217\262\347\247\200\347\272\242/\346\225\210\346\236\234\345\233\276.png" differ