226 lines
9.5 KiB
HTML
226 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>用户管理 - Spring Boot</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background: #f5f5f5; }
|
|
h1 { color: #6DB33F; margin: 20px 0; }
|
|
h2 { color: #333; margin: 20px 0 10px; }
|
|
.card { background: white; padding: 20px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
table { width: 100%; border-collapse: collapse; margin: 15px 0; }
|
|
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
|
|
th { background: #6DB33F; color: white; }
|
|
tr:nth-child(even) { background: #f9f9f9; }
|
|
tr:hover { background: #f0f0f0; }
|
|
.btn { display: inline-block; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-size: 14px; cursor: pointer; border: none; }
|
|
.btn-primary { background: #6DB33F; color: white; }
|
|
.btn-primary:hover { background: #5da32f; }
|
|
.btn-danger { background: #dc3545; color: white; }
|
|
.btn-danger:hover { background: #c82333; }
|
|
.btn-secondary { background: #6c757d; color: white; }
|
|
.btn-success { background: #28a745; color: white; }
|
|
.form-group { margin: 15px 0; }
|
|
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
|
|
.form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
|
|
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
|
|
.modal.active { display: flex; justify-content: center; align-items: center; }
|
|
.modal-content { background: white; padding: 30px; border-radius: 8px; width: 400px; }
|
|
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
|
.modal-header h3 { margin: 0; }
|
|
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; }
|
|
.btn-group { display: flex; gap: 10px; margin-top: 20px; }
|
|
.tip { background: #e7f3ff; padding: 15px; border-radius: 4px; margin: 15px 0; border-left: 4px solid #6DB33F; }
|
|
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; }
|
|
pre { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>👥 用户管理 - RESTful API 示例</h1>
|
|
|
|
<div class="card">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h2>用户列表</h2>
|
|
<button class="btn btn-primary" onclick="openModal()">+ 添加用户</button>
|
|
</div>
|
|
<table id="userTable">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>姓名</th>
|
|
<th>邮箱</th>
|
|
<th>年龄</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>📖 学习要点</h2>
|
|
<div class="tip">
|
|
<strong>RESTful API 设计：</strong>
|
|
<ul style="margin-top: 10px; padding-left: 20px;">
|
|
<li><code>GET /api/users</code> - 获取所有用户</li>
|
|
<li><code>GET /api/users/{id}</code> - 获取单个用户</li>
|
|
<li><code>POST /api/users</code> - 创建用户</li>
|
|
<li><code>PUT /api/users/{id}</code> - 更新用户</li>
|
|
<li><code>DELETE /api/users/{id}</code> - 删除用户</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>Controller 代码示例</h3>
|
|
<pre><code>@RestController
|
|
@RequestMapping("/api/users")
|
|
public class UserController {
|
|
|
|
@GetMapping
|
|
public List<User> getAllUsers() { ... }
|
|
|
|
@GetMapping("/{id}")
|
|
public User getUserById(@PathVariable Long id) { ... }
|
|
|
|
@PostMapping
|
|
public User createUser(@RequestBody User user) { ... }
|
|
|
|
@PutMapping("/{id}")
|
|
public User updateUser(@PathVariable Long id, @RequestBody User user) { ... }
|
|
|
|
@DeleteMapping("/{id}")
|
|
public String deleteUser(@PathVariable Long id) { ... }
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>🔧 Spring 注解说明</h2>
|
|
<table>
|
|
<tr><th>注解</th><th>说明</th></tr>
|
|
<tr><td><code>@RestController</code></td><td>= @Controller + @ResponseBody</td></tr>
|
|
<tr><td><code>@RequestMapping</code></td><td>定义路由映射</td></tr>
|
|
<tr><td><code>@GetMapping</code></td><td>GET 请求映射</td></tr>
|
|
<tr><td><code>@PostMapping</code></td><td>POST 请求映射</td></tr>
|
|
<tr><td><code>@PathVariable</code></td><td>获取路径变量</td></tr>
|
|
<tr><td><code>@RequestBody</code></td><td>获取请求体 JSON</td></tr>
|
|
<tr><td><code>@RequestParam</code></td><td>获取查询参数</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<p><a href="/">← 返回学习中心</a></p>
|
|
|
|
<!-- 添加/编辑用户模态框 -->
|
|
<div class="modal" id="userModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">添加用户</h3>
|
|
<button class="close-btn" onclick="closeModal()">×</button>
|
|
</div>
|
|
<form id="userForm">
|
|
<input type="hidden" id="userId">
|
|
<div class="form-group">
|
|
<label>姓名</label>
|
|
<input type="text" id="userName" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>邮箱</label>
|
|
<input type="email" id="userEmail" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>年龄</label>
|
|
<input type="number" id="userAge" required>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="submit" class="btn btn-primary">保存</button>
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 加载用户列表
|
|
async function loadUsers() {
|
|
const res = await fetch('/api/users');
|
|
const payload = await res.json();
|
|
const users = payload.data || [];
|
|
const tbody = document.querySelector('#userTable tbody');
|
|
tbody.innerHTML = users.map(u => `
|
|
<tr>
|
|
<td>${u.id}</td>
|
|
<td>${u.name}</td>
|
|
<td>${u.email}</td>
|
|
<td>${u.age}</td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editUser(${u.id}, '${u.name}', '${u.email}', ${u.age})">编辑</button>
|
|
<button class="btn btn-danger" onclick="deleteUser(${u.id})">删除</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
// 打开模态框
|
|
function openModal() {
|
|
document.getElementById('userModal').classList.add('active');
|
|
document.getElementById('modalTitle').textContent = '添加用户';
|
|
document.getElementById('userForm').reset();
|
|
document.getElementById('userId').value = '';
|
|
}
|
|
|
|
// 关闭模态框
|
|
function closeModal() {
|
|
document.getElementById('userModal').classList.remove('active');
|
|
}
|
|
|
|
// 编辑用户
|
|
function editUser(id, name, email, age) {
|
|
document.getElementById('userModal').classList.add('active');
|
|
document.getElementById('modalTitle').textContent = '编辑用户';
|
|
document.getElementById('userId').value = id;
|
|
document.getElementById('userName').value = name;
|
|
document.getElementById('userEmail').value = email;
|
|
document.getElementById('userAge').value = age;
|
|
}
|
|
|
|
// 保存用户
|
|
document.getElementById('userForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const id = document.getElementById('userId').value;
|
|
const user = {
|
|
name: document.getElementById('userName').value,
|
|
email: document.getElementById('userEmail').value,
|
|
age: parseInt(document.getElementById('userAge').value)
|
|
};
|
|
|
|
if (id) {
|
|
await fetch(`/api/users/${id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(user)
|
|
});
|
|
} else {
|
|
await fetch('/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(user)
|
|
});
|
|
}
|
|
|
|
closeModal();
|
|
loadUsers();
|
|
});
|
|
|
|
// 删除用户
|
|
async function deleteUser(id) {
|
|
if (confirm('确定删除此用户？')) {
|
|
await fetch(`/api/users/${id}`, { method: 'DELETE' });
|
|
loadUsers();
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
loadUsers();
|
|
</script>
|
|
</body>
|
|
</html> |