You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.1 KiB
124 lines
3.1 KiB
<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>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref,reactive,onMounted} from 'vue'
|
|
import axios from 'axios'
|
|
let people = reactive([
|
|
{ id: 'ahsgdyfa01', name: '英雄联盟' ,password:'23456',email:'123456@qq.com'},
|
|
{ id: 'ahsgdyfa02', name: '王者荣耀' ,password:'3456',email:'123456@qq.com'},
|
|
{ id: 'ahsgdyfa03', name: '原神',password:'456',email:'123456@qq.com' }
|
|
])
|
|
|
|
|
|
// 查找全部的方法api
|
|
function getAll() {
|
|
axios.get('http://localhost:8080/selectAll')
|
|
.then(res => {
|
|
// 使用扩展运算符来保持响应性
|
|
people.push(...res.data)
|
|
})
|
|
.catch(error => console.error('There was an error fetching the data!', error))
|
|
}
|
|
|
|
|
|
|
|
// 定义添加表单的数据
|
|
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
|
|
});
|
|
// 清空输入框
|
|
addId.value = '';
|
|
addName.value = '';
|
|
addPassword.value = '';
|
|
addEmail.value = '';
|
|
|
|
console.log(games);
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
getAll();
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.person .list {
|
|
display: flex;
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
height: 100vh; /* 使容器高度占满整个视口 */
|
|
}
|
|
.person .operate {
|
|
display: flex; /* 启用 Flexbox 布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
gap: 10px; /* 设置元素之间的间距 */
|
|
align-items: center; /* 垂直居中对齐 */
|
|
|
|
}
|
|
</style>
|