学生信息管理系统是一个比较典型的 CRUD 应用，其中 C 表示创建（Create）、R 表示读取（Read）、U 表示更新（Update）、D 表示删除（Delete）。所以，我们需要
实现一个前端界面，能够让用户执行这四个操作。下面是一个简单的
实现步骤：
1. 创建 HTML 页面
我们可以先创建一个 HTML 页面，声明一些基本的元素，如表格、按钮、输入框等。这里我以
Bootstrap 框架为例，代码如下：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学生信息管理系统</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-
bootstrap/4.5.3/css/
bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>学生信息管理系统</h1>
<hr>
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" class="form-control" id="age" placeholder="请输入年龄">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select class="form-control" id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<button type="submit" class="btn btn-primary">添
加</button>
<button type="reset" class="btn btn-secondary">重置</button>
</form>
</div>
<div class="col-md-6">
<
table class="
table table-striped">
<thead>
<tr>
<th>
序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</
table>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-
bootstrap/4.5.3/js/
bootstrap.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
```
这里我们创建了一个表单用于添
加学生信息，同时展示了一个表格用于展示已有的学生信息。需要注意的是，我们在表单和表格中分别设置了 id 和 class，以便后面的 JavaScript 代码方便获取元素。
2.
实现添
加功能
在页面
加载完成后，我们需要给添
加按钮绑定事件，以便在用户点击时获取表单数据并向后端发送请求。这里我们使用 jQuery 库来简化代码，
实现代码如下：
```javascript
// 等待页面
加载完成
$(function() {
// 获取表单和表格元素
const $form = $('form');
const $
table = $('
table tbody');
// 给表单绑定提交事件
$form.submit(function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单数据
const name = $('#name').val();
const age = $('#age').val();
const gender = $('#gender').val();
// 向后端发送添
加请求
$.post('/api/students', {name, age, gender}, function(data) {
// 添
加成功后，清空表单并刷新表格
$form[0].reset();
refresh
Table();
});
});
// 刷新表格函数
function refresh
Table() {
// 清空表格内容
$
table.empty();
// 向后端发送获取请求
$.get('/api/students', function(data) {
// 遍历返回的数据，生成表格行
data.forEach(function(student, index) {
const $tr = $('<tr>');
$tr.append(`<td>${index + 1}</td>`);
$tr.append(`<td>${student.name}</td>`);
$tr.append(`<td>${student.age}</td>`);
$tr.append(`<td>${student.gender === 'male' ? '男' : '女'}</td>`);
$tr.append(`<td><a href="#">编辑</a> <a href="#">删除</a></td>`);
$
table.append($tr);
});
});
}
// 页面
加载完成后，刷新表格
refresh
Table();
});
```
这里我们给表单绑定了 submit 事件，获取表单数据后使用 jQuery 的 $.post 方法向后端发送添
加请求，并在回调函数中清空表单并刷新表格。为了避免代码重复，我们
实现了一个 refresh
Table 函数，用于刷新表格内容。该函数也在页面
加载完成后立即调用。
3.
实现更新和删除
功能
更新和删除
功能与添
加功能类似，只是需要分别绑定编辑和删除按钮的点击事件，并向后端发送相应的请求。这里我们可以采用一些 JavaScript 模板库来简化代码。下面是
实现代码：
```javascript
// 给表格绑定点击事件，使用事件委托
$
table.on('click', 'a', function(event) {
// 阻止默认行为
event.preventDefault();
// 获取点击的链接所在的行
const $tr = $(event.target).parent().parent();
// 判断是编辑还是删除
if (event.target.innerText === '编辑') {
// 获取该行的数据
const name = $tr.children().eq(1).text();
const age = $tr.children().eq(2).text();
const gender = $tr.children().eq(3).text() === '男' ? 'male' : 'female';
// 使用模板库生成编辑表单
const html = `
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入姓名" value="${name}">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" class="form-control" id="age" placeholder="请输入年龄" value="${age}">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select class="form-control" id="gender">
<option value="male" ${gender === 'male' ? 'selected' : ''}>男</option>
<option value="female" ${gender === 'female' ? 'selected' : ''}>女</option>
</select>
</div>
<button type="submit" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-secondary cancel">取消</button>
</form>
`;
// 替换该行的内容为编辑表单
$tr.html(`<td colspan="5">${html}</td>`);
} else {
// 获取该行的
序号
const index = $tr.children().eq(0).text() - 1;
// 向后端发送删除请求
$.ajax({
url: `/api/students/${index}`,
type: 'DELETE',
success: function(data) {
// 删除成功后，刷新表格
refresh
Table();
}
});
}
});
// 给编辑表单绑定提交事件，使用事件委托
$
table.on('submit', 'form', function(event) {
// 阻止默认提交行为
event.preventDefault();
// 获取编辑表单数据和该行的
序号
const $form = $(event.target);
const name = $form.find('#name').val();
const age = $form.find('#age').val();
const gender = $form.find('#gender').val();
const index = $form.parents('tr').prevAll().length;
// 向后端发送更新请求
$.ajax({
url: `/api/students/${index}`,
type: 'PUT',
data: {name, age, gender},
success: function(data) {
// 更新成功后，刷新表格
refresh
Table();
}
});
});
// 给编辑表单绑定取消事件，使用事件委托
$
table.on('click', '.cancel', function(event) {
// 获取该行的数据
const name = $(this).parents('tr').children().eq(1).text();
const age = $(this).parents('tr').children().eq(2).text();
const gender = $(this).parents('tr').children().eq(3).text();
// 使用模板库重新生成该行的内容
const html = `
<td>${$(this).parents('tr').children().eq(0).text()}</td>
<td>${name}</td>
<td>${age}</td>
<td>${gender}</td>
<td><a href="#">编辑</a> <a href="#">删除</a></td>
`;
$(this).parents('tr').html(html);
});
```
这里我们给表格绑定了 click 事件，并使用事件委托的方式处理点击事件，判断是编辑还是删除操作。对于编辑操作，我们首先获取该行的数据并使用模板库生成一个编辑表单，并替换该行的内容；对于删除操作，我们获取该行的
序号并向后端发送删除请求。对于编辑表单，我们使用了类似的方式绑定了 submit 和 cancel 事件，分别用于保存和取消编辑。
4.
实现读取
功能
读取
功能其实在添
加、更新和删除操作完成后已经自动刷新了表格。但是为了更好地用户体验，我们可以
加上一个刷新按钮，让用户随时手动刷新表格。这里我们只需要给刷新按钮绑定点击事件，调用 refresh
Table 函数即可。
到此为止，一个简单的学生信息管理系统前端界面就完成了。当然，这里只是一个最基础的
实现，还有很多优化和扩展的空间，如表单验证、
分页、搜索等等。
本文介绍了如何在使用Bootstrap Table的server分页时，让分页序号保持连续，不再从每页的1开始，而是从前一页的结束序号开始。通过自定义BootstrapTable.prototype.getPage函数并插入到内部函数列表中，实现了在formatter中获取连续的序号，从而解决了server分页序号不连续的问题。
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
