初始化项目
This commit is contained in:
43
frontend/src/components/HelloWorld.vue
Normal file
43
frontend/src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
112
frontend/src/components/UserForm.vue
Normal file
112
frontend/src/components/UserForm.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="user-form">
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="name">姓名</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
v-model="formData.name"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
v-model="formData.email"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
v-model="formData.password"
|
||||
:required="!user.id"
|
||||
>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="save-btn">保存</button>
|
||||
<button type="button" @click="$emit('cancel')" class="cancel-btn">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserForm',
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: { ...this.user }
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
user(newUser) {
|
||||
this.formData = { ...newUser };
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$emit('save', this.formData);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.save-btn, .cancel-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
187
frontend/src/components/UserManagement.vue
Normal file
187
frontend/src/components/UserManagement.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="user-management">
|
||||
<h2>用户管理</h2>
|
||||
<button @click="showAddForm = true" class="add-btn">添加用户</button>
|
||||
<table class="user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>姓名</th>
|
||||
<th>邮箱</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="user in users" :key="user.id">
|
||||
<td>{{ user.id }}</td>
|
||||
<td>{{ user.name }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>
|
||||
<button @click="editUser(user)" class="edit-btn">编辑</button>
|
||||
<button @click="deleteUser(user.id)" class="delete-btn">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 用户表单弹窗 -->
|
||||
<div v-if="showAddForm || editingUser" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<h3>{{ editingUser ? '编辑用户' : '添加用户' }}</h3>
|
||||
<user-form
|
||||
:user="currentUser"
|
||||
@save="saveUser"
|
||||
@cancel="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserForm from './UserForm.vue';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'UserManagement',
|
||||
components: {
|
||||
UserForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
users: [],
|
||||
showAddForm: false,
|
||||
editingUser: null,
|
||||
currentUser: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.fetchUsers();
|
||||
},
|
||||
methods: {
|
||||
fetchUsers() {
|
||||
axios.get('/api/users')
|
||||
.then(response => {
|
||||
this.users = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取用户列表失败:', error);
|
||||
});
|
||||
},
|
||||
editUser(user) {
|
||||
this.editingUser = true;
|
||||
this.currentUser = { ...user };
|
||||
},
|
||||
deleteUser(userId) {
|
||||
if (confirm('确定要删除这个用户吗？')) {
|
||||
axios.delete(`/api/users/${userId}`)
|
||||
.then(() => {
|
||||
this.fetchUsers();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('删除用户失败:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
saveUser(user) {
|
||||
if (this.editingUser) {
|
||||
// 更新用户
|
||||
axios.put(`/api/users/${user.id}`, user)
|
||||
.then(() => {
|
||||
this.fetchUsers();
|
||||
this.cancelForm();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('更新用户失败:', error);
|
||||
});
|
||||
} else {
|
||||
// 添加用户
|
||||
axios.post('/api/users', user)
|
||||
.then(() => {
|
||||
this.fetchUsers();
|
||||
this.cancelForm();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('添加用户失败:', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
cancelForm() {
|
||||
this.showAddForm = false;
|
||||
this.editingUser = false;
|
||||
this.currentUser = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-management {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 16px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.user-table th, .user-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-table th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.edit-btn, .delete-btn {
|
||||
padding: 4px 8px;
|
||||
margin-right: 5px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user