首先，需要在后端定义一个包含用户账号密码的列表，并将其传递给
前端页面：
```python
from flask import Flask, render_template
app = Flask(__name__)
# 定义一个用户列表，包含账号和密码
users = [{'username': 'user1', 'password': '123456'}, {'username': 'user2', 'password': '654321'}]
@app.route('/users')
def show_users():
return render_template('user_list.html', users=users)
```
接下来，在
前端页面中使用
EL 表达式展示用户列表，并添加全选和删除功能：
```html
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>User List</h1>
<table>
<tr>
<th><input type="checkbox" id="s
elect-all"></th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</tr>
<tbody>
<!-- 使用
EL 表达式展示用户列表 -->
<c:forEach var="user" items="${users}">
<tr>
<td><input type="checkbox" class="s
elect-user" value="${user.username}"></td>
<td>${user.username}</td>
<td>${user.password}</td>
<td><button class="d
elete-user" data-username="${user.username}">D
elete</button></td>
</tr>
</c:forEach>
</tbody>
</table>
<button id="d
elete-s
elected">D
elete S
elected</button>
<script>
// 全选/不全选
$('#s
elect-all').click(function() {
$('.s
elect-user').prop('checked', $(this).prop('checked'));
});
// 删除用户
$('.d
elete-user').click(function() {
var username = $(this).data('username');
$.ajax({
url: '/d
elete_user',
type: 'POST',
data: {'username': username},
success: function(response) {
if (response.success) {
window.location.r
eload();
}
else {
alert(response.message);
}
},
error: function() {
alert('Error d
eleting user.');
}
});
});
// 删除选中的用户
$('#d
elete-s
elected').click(function() {
var s
electedUsers = $('.s
elect-user:checked').map(function() {
return $(this).val();
}).get();
if (s
electedUsers.length === 0) {
alert('Please s
elect at least one user to d
elete.');
return;
}
if (!confirm('Are you sure you want to d
elete these users?')) {
return;
}
$.ajax({
url: '/d
elete_users',
type: 'POST',
data: {'users': s
electedUsers},
success: function(response) {
if (response.success) {
window.location.r
eload();
}
else {
alert(response.message);
}
},
error: function() {
alert('Error d
eleting users.');
}
});
});
</script>
</body>
</html>
```
其中，
EL 表达式使用 `${}` 包裹变量名，例如 `${users}` 表示传递给
页面的用户列表。在
页面中使用 `<c:forEach>` 标签遍历用户列表，并将每个用户的账号、密码、删除按钮展示出来。
添加了全选功能和删除功能。全选按钮使用 jQuery 选择器 `$('#s
elect-all')` 获取，点击后将所有选择用户的复选框的 `checked` 属性设置为全选按钮的 `checked` 属性。删除按钮使用 jQuery 选择器 `$('.d
elete-user')` 获取，点击后使用 AJAX 发送 POST 请求到后端的 `/d
elete_user` 接口，并传递要删除的用户的账号。删除选中用户的按钮同理，首先获取选中的用户的账号，然后使用 AJAX 发送 POST 请求到后端的 `/d
elete_users` 接口，并传递要删除的用户的账号列表。在 AJAX 请求成功后，重新加载
页面以展示更新后的用户列表。
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
