lejings
/
work
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

时间

Browse Source
main
LeJingS 3 months ago
parent 573c44a239
commit 05e94f373d
3 changed files with 221 additions and 94 deletions
Show Stats Download Patch File Download Diff File

4
javaweb_word/Font/db/package.json
Unescape View File

@ -8,8 +8,10 @@
"build": "run-p type-check \"build-only {@}\" --", "build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview", "preview": "vite preview",
"build-only": "vite build", "build-only": "vite build",
"type-check": "vue-tsc --build" "type-check": "vue-tsc --build",
"serve": "vue-cli-service serve --port 5173"
}, },
"dependencies": { "dependencies": {
"axios": "^1.7.8", "axios": "^1.7.8",
"vue": "^3.5.13" "vue": "^3.5.13"

303
javaweb_word/Font/db/src/Person.vue
Unescape View File

@ -1,128 +1,247 @@
<template> <template>
<div class="person"> <div class="person">
<div class="operate"> <!-- 输入区域 -->
id<input type="text" name="id"> <div class="operate-container">
姓名<input type="text" name="name"> <div class="operate">
密码<input type="text" name="password"> <label>id<input type="text" name="id" v-model="queryId"></label>
邮箱<input type="text" name="email"> <label>姓名<input type="text" name="name" v-model="queryName"></label>
<button @click="findList">查询</button> <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> <div class="operate">
<div class="operate"> <label>姓名<input type="text" name="addName" v-model="addName"></label>
<!-- id<input type="text" name="addId" v-model="addId"> --> <label>密码<input type="text" name="addPassword" v-model="addPassword"></label>
姓名<input type="text" name="addName" v-model="addName"> <label>邮箱<input type="text" name="addEmail" v-model="addEmail"></label>
密码<input type="text" name="addPassword" v-model="addPassword"> <button @click="addList(addName, addPassword, addEmail)">添加</button>
邮箱<input type="text" name="addEmail" v-model="addEmail"> </div>
<button @click="addList">添加</button>
</div> </div>
<div class="list"> <!-- 表格区域 -->
<div class="list-container">
<table border="1"> <table border="1">
<tr> <thead>
<th>id</th> <tr>
<th>name</th> <th>id</th>
<th>password</th> <th>name</th>
<th>email</th> <th>password</th>
<th>操作</th> <th>email</th>
</tr> <th>操作</th>
</tr>
<tr v-for="g in people" :key="g.id"> </thead>
<td>{{g.id}}</td> <tbody>
<td>{{g.name}}</td> <tr v-for="g in people" :key="g.id">
<td>{{g.password}}</td> <td>{{ g.id }}</td>
<td>{{g.email}}</td> <td>{{ g.name }}</td>
<td>{{ g.password }}</td>
<td> <td>{{ g.email }}</td>
<button @click="updateItem(g.id)">修改</button> <td>
<button @click="deleteItem(g.id)">删除</button> <button @click="openModal(g)">修改</button>
</td> <button @click="deleteItem(g.id)">删除</button>
</td>
</tr> </tr>
</tbody>
</table>
</table>
</div> </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> </div>
</template> </template>
<script setup> <script setup>
import { ref,reactive,onMounted} from 'vue' import { ref, reactive, onMounted } from 'vue'
import axios from 'axios' import axios from 'axios'
let people = reactive([])
let people = reactive([])
// 查找全部的方法api // 定义添加表单的数据
function getAll() { 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') axios.get('http://localhost:8080/selectAll')
.then(res => { .then(res => {
// 使用扩展运算符来保持响应性 // 使用扩展运算符来保持响应性
people.splice(0, people.length); people.splice(0, people.length)
people.push(...res.data) people.push(...res.data)
}) })
.catch(error => console.error('There was an error fetching the data!', error)) .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}`)
let addId = ref(''); .then(res => {
let addName = ref(''); console.log(res)
let addPassword = ref(''); // 清空输入框
let addEmail = ref(''); 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 addList() { // 打开模态框
games.push({ function openModal(item) {
id: addId.value, editingItem.value = { ...item }
name: addName.value, showModal.value = true
password: addPassword.value, }
email: addEmail.value
});
// 清空输入框
addId.value = '';
addName.value = '';
addPassword.value = '';
addEmail.value = '';
console.log(games); // 关闭模态框
function closeModal() {
showModal.value = false
}
// 确认修改
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) // 删除功能：deleteItem(g.id)
function deleteItem(id) { function deleteItem(id) {
console.log(id); console.log(id)
axios.delete(`http://localhost:8080/delete?id=${id}`) axios.get(`http://localhost:8080/delete?id=${id}`)
getAll(); .then(() => {
getAll()
})
.catch(error => console.error('There was an error deleting the item!', error))
} }
onMounted(() => { 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> th {
.person .list { background-color: #f2f2f2;
display: flex; }
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */ /* 模态框样式 */
height: 100vh; /* 使容器高度占满整个视口 */ .modal-overlay {
} position: fixed;
.person .operate { top: 0;
display: flex; /* 启用 Flexbox 布局 */ left: 0;
justify-content: center; /* 水平居中 */ width: 100%;
gap: 10px; /* 设置元素之间的间距 */ height: 100%;
align-items: center; /* 垂直居中对齐 */ 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;
}
.modal button {
margin-right: 10px;
} }
</style> </style>

6
javaweb_word/Font/package-lock.json generated
Unescape View File

@ -0,0 +1,6 @@
{
"name": "Font",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}
Write Preview
Loading…
Cancel
Save