时间

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"

javaweb_word/Font/db/src/Person.vue

@@ -1,27 +1,26 @@
 <template>
     <div class="person">
+        <!-- 输入区域 -->
+        <div class="operate-container">
             <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>
-            
-
-
+                <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">
-            <!-- 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>
-
-
+                <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="list">
+        <!-- 表格区域 -->
+        <div class="list-container">
             <table border="1">
+                <thead>
                     <tr>
                         <th>id</th>
                         <th>name</th>
@@ -29,100 +28,220 @@
                         <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="updateItem(g.id)">修改</button>
+                            <button @click="openModal(g)">修改</button>
                             <button @click="deleteItem(g.id)">删除</button>
                         </td>
-
                     </tr>
-            
-        
+                </tbody>
             </table>
-      
         </div>
 
+        <!-- 模态框 -->
+        <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([])
 
+// 定义添加表单的数据
+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.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()
+            }
+        })
+}
 
-    
-// 定义添加表单的数据
-let addId = ref('');
-let addName = ref('');
-let addPassword = ref('');
-let addEmail = ref('');
-
+// 添加元素
+// 添加元素
 function addList() {
-    games.push({
-        id: addId.value,
-        name: addName.value,
-        password: addPassword.value,
-        email: addEmail.value
-    });
+    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)
             // 清空输入框
-    addId.value = '';
             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("服务器内部错误，请检查输入数据是否符合要求");
+            }
+        })
+}
+
+// 打开模态框
+function openModal(item) {
+    editingItem.value = { ...item }
+    showModal.value = true
+}
+
+// 关闭模态框
+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;
+}
 
+th, td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
 
-</script>
+th {
+    background-color: #f2f2f2;
+}
 
-<style>
-.person .list {
+/* 模态框样式 */
+.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; /* 垂直居中 */
-  height: 100vh; /* 使容器高度占满整个视口 */
+    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>

javaweb_word/Font/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "Font",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}