首先，需要确保你已经安装好了数据库，并且创建了一个名为 `test` 的数据库和一个名为 `user` 的表。接下来，你需要在你的项目中引入 `
layui` 和 `jQuery`。
在页面中
添加以下代码：
```
html
<form class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-inline">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">密码</label>
<div class="
layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="addUser">
添加</button>
</div>
</div>
</form>
```
这是一个简单的表单，其中包含用户名和密码的输入框以及一个提交按钮。`lay-submit` 和 `lay-filter` 分别用于表单提交和表单校验。
接下来，你需要
添加以下
JavaScript 代码：
```
javascript
layui.use(['layer', 'form'], function(){
var layer =
layui.layer;
var form =
layui.form;
var $ =
layui.jquery;
//
添加用户
form.on('submit(addUser)', function(data){
// 获取表单数据
var username = data.field.username;
var password = data.field.password;
// 发送请求到后台
$.post('/addUser', {username: username, password: password}, function(res){
if(res.code === 0){
layer.msg(res.msg, {icon: 1});
//
添加成功后刷新页面
location.reload();
} else {
layer.msg(res.msg, {icon: 2});
}
});
return false;
});
//
删除用户
$('table').on('click', '.delete-btn', function(){
var userId = $(this).data('id');
layer.confirm('确定
删除该用户吗？', function(){
// 发送请求到后台
$.post('/deleteUser', {id: userId}, function(res){
if(res.code === 0){
layer.msg(res.msg, {icon: 1});
//
删除成功后刷新页面
location.reload();
} else {
layer.msg(res.msg, {icon: 2});
}
});
});
return false;
});
});
```
在这个
JavaScript 代码中，我们通过 `
layui.use` 引入了 `layer` 和 `form`
模块，并且使用 `$` 引入了 `jQuery`。`form.on` 方法用于监听表单提交事件，`$('table').on('click', '.delete-btn', function(){})` 用于监听
删除按钮的点击事件。
在 `form.on` 方法中，我们获取了表单输入框中的数据，并且通过 `$.post` 方法向后台发送了一个 POST 请求，请求的 URL 为 `/addUser`，请求的参数为 `username` 和 `password`。在请求成功后，如果返回的 `code` 值为 `0`，则表示
添加成功，我们通过 `layer.msg` 方法弹出一个提示框，并且刷新页面。
在 `$('table').on('click', '.delete-btn', function(){})` 方法中，我们通过 `$(this).data('id')` 获取了当前点击按钮的 `data-id` 属性，也就是需要
删除的用户的 ID。在点击确认按钮后，我们通过 `$.post` 方法向后台发送了一个 POST 请求，请求的 URL 为 `/deleteUser`，请求的参数为 `id`。在请求成功后，如果返回的 `code` 值为 `0`，则表示
删除成功，我们通过 `layer.msg` 方法弹出一个提示框，并且刷新页面。
最后，在后台服务中实现 `/addUser` 和 `/deleteUser` 接口的处理逻辑即可。
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
