118 lines
4.3 KiB
HTML
118 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Management</title>
|
|
<!-- Material Design Lite -->
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
|
|
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<span class="mdl-layout-title">用户管理</span>
|
|
</div>
|
|
</header>
|
|
<main class="mdl-layout__content">
|
|
<div class="mdl-grid">
|
|
<div class="mdl-cell mdl-cell--12-col">
|
|
<button id="addUserBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
|
|
添加用户
|
|
</button>
|
|
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>用户名</th>
|
|
<th>名字</th>
|
|
<th>性别</th>
|
|
<th>头像</th>
|
|
<th>地址</th>
|
|
<th>邮箱</th>
|
|
<th>手机</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="userTableBody">
|
|
<!-- User rows will go here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化Materialize组件
|
|
M.updateTextFields();
|
|
// Fetch and display users
|
|
fetchUsers();
|
|
|
|
// Add user button click listener
|
|
document.getElementById('addUserBtn').addEventListener('click', function() {
|
|
// redirect to /user/addUser
|
|
window.location.href = '/user/addUser';
|
|
});
|
|
});
|
|
|
|
function fetchUsers() {
|
|
fetch('/user/listUsers').then(function(response) {
|
|
return response.json();
|
|
}).then(function(users) {
|
|
// Display users in the table
|
|
var userTableBody = document.getElementById('userTableBody');
|
|
userTableBody.innerHTML = '';
|
|
users.data.forEach(function(user) {
|
|
var tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>${user.id}</td>
|
|
<td>${user.username}</td>
|
|
<td>${user.name}</td>
|
|
<td>${user.gender}</td>
|
|
<td><img src="${user.avatar}" style="width: 50px; height: auto;"></img></td>
|
|
<td>${user.address}</td>
|
|
<td>${user.email}</td>
|
|
<td>${user.phone}</td>
|
|
<td>
|
|
<button class="mdl-button" onclick="window.location.href='/user/updateUser?username=${user.username}'">编辑</button>
|
|
<button class="mdl-button" onclick="deleteUser(${user.id})">删除</button>
|
|
</td>
|
|
`;
|
|
userTableBody.appendChild(tr);
|
|
});
|
|
});
|
|
}
|
|
|
|
function addUser(userData) {
|
|
// redirect to /user/addUser
|
|
window.location.href = '/user/addUser';
|
|
}
|
|
|
|
function updateUser(username) {
|
|
// redirect to /user/updateUser?username=xxx
|
|
window.location.href = `/user/updateUser?username=${username}`;
|
|
}
|
|
|
|
function deleteUser(userId) {
|
|
// /user/deleteUser/:id
|
|
fetch(`/user/deleteUser/${userId}`, {
|
|
method: 'DELETE'
|
|
}).then(function(response) {
|
|
return response.json();
|
|
}).then(function(data) {
|
|
M.toast({html: '删除成功'});
|
|
fetchUsers();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|