From 05e94f373db03136f3b04cac9b128f37d89ebb75 Mon Sep 17 00:00:00 2001
From: LeJingS <157603342+LeJingS@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:27:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 javaweb_word/Font/db/package.json   |   4 +-
 javaweb_word/Font/db/src/Person.vue | 305 +++++++++++++++++++---------
 javaweb_word/Font/package-lock.json |   6 +
 3 files changed, 221 insertions(+), 94 deletions(-)
 create mode 100644 javaweb_word/Font/package-lock.json

diff --git a/javaweb_word/Font/db/package.json b/javaweb_word/Font/db/package.json
index 6f2a81e..217ab99 100644
--- a/javaweb_word/Font/db/package.json
+++ b/javaweb_word/Font/db/package.json
@@ -8,8 +8,10 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build"
+    "type-check": "vue-tsc --build",
+    "serve": "vue-cli-service serve --port 5173"
   },
+  
   "dependencies": {
     "axios": "^1.7.8",
     "vue": "^3.5.13"
diff --git a/javaweb_word/Font/db/src/Person.vue b/javaweb_word/Font/db/src/Person.vue
index 955e1b4..6682960 100644
--- a/javaweb_word/Font/db/src/Person.vue
+++ b/javaweb_word/Font/db/src/Person.vue
@@ -1,128 +1,247 @@
 <template>
     <div class="person">
-        <div class="operate">
-            id<input type="text" name="id">
-            姓名<input type="text" name="name">
-            密码<input type="text" name="password">
-            邮箱<input type="text" name="email">
-            <button @click="findList">查询</button>
-            
-
-
+        <!-- 输入区域 -->
+        <div class="operate-container">
+            <div class="operate">
+                <label>id<input type="text" name="id" v-model="queryId"></label>
+                <label>姓名<input type="text" name="name" v-model="queryName"></label>
+                <label>密码<input type="text" name="password" v-model="queryPassword"></label>
+                <label>邮箱<input type="text" name="email" v-model="queryEmail"></label>
+                <button @click="findList(queryId, queryName, queryPassword, queryEmail)">查询</button>
+            </div>
+            <div class="operate">
+                <label>姓名<input type="text" name="addName" v-model="addName"></label>
+                <label>密码<input type="text" name="addPassword" v-model="addPassword"></label>
+                <label>邮箱<input type="text" name="addEmail" v-model="addEmail"></label>
+                <button @click="addList(addName, addPassword, addEmail)">添加</button>
+            </div>
         </div>
-        <div class="operate">
-            <!-- id<input type="text" name="addId" v-model="addId"> -->
-            姓名<input type="text" name="addName" v-model="addName">
-            密码<input type="text" name="addPassword" v-model="addPassword">
-            邮箱<input type="text" name="addEmail" v-model="addEmail">
-            <button @click="addList">添加</button>
-
 
+        <!-- 表格区域 -->
+        <div class="list-container">
+            <table border="1">
+                <thead>
+                    <tr>
+                        <th>id</th>
+                        <th>name</th>
+                        <th>password</th>
+                        <th>email</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="g in people" :key="g.id">
+                        <td>{{ g.id }}</td>
+                        <td>{{ g.name }}</td>
+                        <td>{{ g.password }}</td>
+                        <td>{{ g.email }}</td>
+                        <td>
+                            <button @click="openModal(g)">修改</button>
+                            <button @click="deleteItem(g.id)">删除</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
 
-        <div class="list">
-            <table border="1">
-            <tr>
-                <th>id</th>
-                <th>name</th>
-                <th>password</th>
-                <th>email</th>
-                <th>操作</th>
-            </tr>
-            
-                <tr v-for="g in people" :key="g.id">
-                    <td>{{g.id}}</td>
-                    <td>{{g.name}}</td>
-                    <td>{{g.password}}</td>
-                    <td>{{g.email}}</td>
-
-                    <td>
-                        <button @click="updateItem(g.id)">修改</button>
-                        <button @click="deleteItem(g.id)">删除</button>
-                    </td>
-
-                </tr>
-            
-        
-        </table>
-      
+        <!-- 模态框 -->
+        <div v-if="showModal" class="modal-overlay" @click="closeModal">
+            <div class="modal" @click.stop>
+                <h3>修改信息</h3>
+                <label>姓名<input type="text" v-model="editingItem.name"></label>
+                <label>密码<input type="text" v-model="editingItem.password"></label>
+                <label>邮箱<input type="text" v-model="editingItem.email"></label>
+                <button @click="updateItemConfirm">确认修改</button>
+                <button @click="closeModal">取消</button>
+            </div>
         </div>
-        
     </div>
 </template>
 
 <script setup>
-   import { ref,reactive,onMounted} from 'vue'
-   import axios from 'axios'    
-    let people = reactive([])
+import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios'
 
-    
-    // 查找全部的方法api
-    function getAll() {
+let people = reactive([])
+
+// 定义添加表单的数据
+let addName = ref('')
+let addPassword = ref('')
+let addEmail = ref('')
+
+// 定义查找数据
+let queryId = ref('')
+let queryName = ref('')
+let queryPassword = ref('')
+let queryEmail = ref('')
+
+// 定义编辑数据
+let editingItem = ref(null)
+let showModal = ref(false)
+
+// 查找全部的方法api
+function getAll() {
     axios.get('http://localhost:8080/selectAll')
-         .then(res => {
-             // 使用扩展运算符来保持响应性
-             people.splice(0, people.length);
-             people.push(...res.data)
-         })
-         .catch(error => console.error('There was an error fetching the data!', error))
+        .then(res => {
+            // 使用扩展运算符来保持响应性
+            people.splice(0, people.length)
+            people.push(...res.data)
+        })
+        .catch(error => console.error('There was an error fetching the data!', error))
+}
+
+// 部分查找
+function findList(queryId, queryName, queryPassword, queryEmail) {
+    axios.get(`http://localhost:8080/select?id=${queryId}&name=${queryName}&password=${queryPassword}&email=${queryEmail}`)
+        .then(res => {
+            console.log(res)
+            people.splice(0, people.length)
+            people.push(...res.data)
+            if (res.data.length === 0) {
+                alert("没有该数据")
+                getAll()
+            }
+        })
+}
+
+// 添加元素
+// 添加元素
+function addList() {
+    if (!addName.value || !addPassword.value || !addEmail.value) {
+        alert("请输入完整的姓名、密码和邮箱");
+        return;
     }
 
+    axios.get(`http://localhost:8080/insert?name=${addName.value}&password=${addPassword.value}&email=${addEmail.value}`)
+        .then(res => {
+            console.log(res)
+            // 清空输入框
+            addName.value = '';
+            addPassword.value = '';
+            addEmail.value = '';
+            getAll();
+        })
+        .catch(error => {
+            console.error('There was an error adding the item!', error);
+            if (error.response && error.response.status === 500) {
+                alert("服务器内部错误，请检查输入数据是否符合要求");
+            }
+        })
+}
 
-    
-// 定义添加表单的数据
-let addId = ref('');
-let addName = ref('');
-let addPassword = ref('');
-let addEmail = ref('');
+// 打开模态框
+function openModal(item) {
+    editingItem.value = { ...item }
+    showModal.value = true
+}
 
-function addList() {
-    games.push({
-        id: addId.value,
-        name: addName.value,
-        password: addPassword.value,
-        email: addEmail.value
-    });
-    // 清空输入框
-    addId.value = '';
-    addName.value = '';
-    addPassword.value = '';
-    addEmail.value = '';
+// 关闭模态框
+function closeModal() {
+    showModal.value = false
+}
 
-    console.log(games);
+// 确认修改
+function updateItemConfirm() {
+    const { id, name, password, email } = editingItem.value
+    axios.get(`http://localhost:8080/update?id=${id}&name=${name}&password=${password}&email=${email}`)
+        .then(res => {
+            console.log(res)
+            closeModal()
+            getAll()
+        })
+        .catch(error => console.error('There was an error updating the item!', error))
 }
 
 // 删除功能：deleteItem(g.id)
 function deleteItem(id) {
-    console.log(id);
-    axios.delete(`http://localhost:8080/delete?id=${id}`)
-    getAll();     
-        
+    console.log(id)
+    axios.get(`http://localhost:8080/delete?id=${id}`)
+        .then(() => {
+            getAll()
+        })
+        .catch(error => console.error('There was an error deleting the item!', error))
 }
 
 onMounted(() => {
-    getAll();
-});
+    getAll()
+})
+</script>
 
+<style>
+.person {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
 
+.operate-container {
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-bottom: 1px solid #ddd;
+}
 
+.operate {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 10px;
+}
 
+.list-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+}
 
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
 
-</script>
+th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
 
-<style>
-.person .list {
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-  height: 100vh; /* 使容器高度占满整个视口 */
+th {
+    background-color: #f2f2f2;
+}
+
+/* 模态框样式 */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal {
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+.modal label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+.modal input {
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 10px;
 }
-.person .operate {
-    display: flex; /* 启用 Flexbox 布局 */
-    justify-content: center; /* 水平居中 */
-    gap: 10px; /* 设置元素之间的间距 */
-    align-items: center; /* 垂直居中对齐 */
 
+.modal button {
+    margin-right: 10px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/javaweb_word/Font/package-lock.json b/javaweb_word/Font/package-lock.json
new file mode 100644
index 0000000..dfddc55
--- /dev/null
+++ b/javaweb_word/Font/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Font",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}