使用模板引擎实现以下功能:添加用户,渲染表格,修改功能,删除功能
接口文档
html
<div class="row">
<div class="col-md-4" id="modifyBox" >
<form id="userForm">
<h2>添加新用户</h2>
<div class="form-group">
<label>头像</label>
<div class="form-group">
<label class="form-image">
<input id="avatar" type="file">
<img src="../assets/img/default.png" id="preview">
<i class="mask fa fa-upload"></i>
</label>
<input type="hidden" name="avatar" id="hiddenAvatar">
</div>
</div>
<div class="form-group">
<label>邮箱</label>
<input class="form-control" type="email" placeholder="请输入邮箱" name="email">
</div>
<div class="form-group">
<label>昵称</label>
<input class="form-control" type="text" placeholder="请输入昵称" name="nickName">
</div>
<div class="form-group">
<label>密码</label>
<input class="form-control" type="password" placeholder="请输入密码" name="password">
</div>
<div class="form-group">
<div class="radio-inline">
<label><input type="radio" name="status" value="0">未激活</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="status" value="1">激活</label>
</div>
</div>
<div class="form-group">
<div class="radio-inline">
<label><input type="radio" name="role" value="admin ">超级管理员</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="role" value="normal">普通用户</label>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">添加</button>
</div>
</form>
</div>
<div class="col-md-8">
<div class="page-action">
<!-- show when multiple checked -->
<a class="btn btn-danger btn-sm" href="javascript:;" style="display: none" id="deleteMany">批量删除</a>
</div>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="text-center" width="40">
<input type="checkbox" id="selectAll">
</th>
<th class="text-center" width="80">头像</th>
<th>邮箱</th>
<th>昵称</th>
<th>状态</th>
<th>角色</th>
<th class="text-center" width="100">操作</th>
</tr>
</thead>
<tbody id="userBox">
</tbody>
</table>
</div>
</div>
1.添加用户
// 当表单发生提交行为的时候
$('#userForm').on('submit', function () {
// 获取到用户在表单中输入的内容并将内容格式化成参数字符串
var formData = $(this).serialize();
// 向服务器端发送添加用户的请求
$.ajax({
type: 'post',
url: '/users',
data: formData,
success: function () {
// 刷新页面
location.reload();
},
error: function () {
alert('用户添加失败')
}
})
// 阻止表单的默认提交行为
return false;
});
// 当用户选择文件的时候
$('#modifyBox').on('change', '#avatar', function () {
// 用户选择到的文件
// this.files[0]
var formData = new FormData();
formData.append('avatar', this.files[0]);
$.ajax({
type: 'post',
url: '/upload',
data: formData,
// 告诉$.ajax方法不要解析请求参数
processData: false,
// 告诉$.ajax方法不要设置请求参数的类型
contentType: false,
success: function (response) {
console.log(response)
// 实现头像预览功能
$('#preview').attr('src', response[0].avatar);
$('#hiddenAvatar').val(response[0].avatar)
}
})
});
2.渲染列表
<script src="../assets/vendors/art-template/template-web.js"></script>
<!-- 用户列表模板 -->
<script type="text/html" id="userTpl">
{{each data}}
<tr>
<td class="text-center">
<input type="checkbox" class="userStatus" data-id="{{$value._id}}">
</td>
<td class="text-center">
{{if $value.avatar}}
<img class="avatar" src="{{$value.avatar}}">
{{/if}}
</td>
<td>{{$value.email}}</td>
<td>{{$value.nickName}}</td>
<td>{{$value.status == 0 ? '未激活': '激活'}}</td>
<td>{{$value.role == 'admin' ? '管理员' : '普通用户'}}</td>
<td class="text-center">
<a href="javascript:;" class="btn btn-default btn-xs edit" data-id="{{$value._id}}">编辑</a>
<a href="javascript:;" class="btn btn-danger btn-xs delete" data-id="{{$value._id}}">删除</a>
</td>
</tr>
{{/each}}
</script>
// 向服务器端发送请求 索要用户列表数据
$.ajax({
type: 'get',
url: '/users',
success: function (response) {
console.log(response)
// 使用模板引擎将数据和HTML字符串进行拼接
var html = template('userTpl', { data: response });
// 将拼接好的字符串显示在页面中
$('#userBox').html(html);
}
});
3.编辑功能
<!-- 用户编辑模板 -->
<script type="text/html" id="modifyTpl">
<form id="modifyForm" data-id="{{_id}}">
<h2>修改用户信息</h2>
<div class="form-group">
<label>头像</label>
<div class="form-group">
<label class="form-image">
<input id="avatar" type="file">
{{if avatar}}
<img src="{{avatar}}" id="preview">
{{else}}
<img src="../assets/img/default.png" id="preview">
{{/if}}
<i class="mask fa fa-upload"></i>
</label>
<input type="hidden" name="avatar" id="hiddenAvatar" value="{{avatar}}">
</div>
</div>
<div class="form-group">
<label>邮箱</label>
<input class="form-control" type="email" placeholder="请输入邮箱" name="email" value="{{email}}">
</div>
<div class="form-group">
<label>昵称</label>
<input class="form-control" type="text" placeholder="请输入昵称" name="nickName" value="{{nickName}}">
</div>
<div class="form-group">
<div class="radio-inline">
<label><input type="radio" name="status" value="0" {{status == 0 ? 'checked' : ''}}>未激活</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="status" value="1" {{status == 1 ? 'checked' : ''}}>激活</label>
</div>
</div>
<div class="form-group">
<div class="radio-inline">
<label><input type="radio" name="role" value="admin" {{role == 'admin' ? 'checked' : ''}}>超级管理员</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="role" value="normal" {{role == 'normal' ? 'checked': ''}}>普通用户</label>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">修改</button>
</div>
</form>
</script>
// 通过事件委托的方式为编辑按钮添加点击事件
$('#userBox').on('click', '.edit', function () {
// 获取被点击用户的id值
var id = $(this).attr('data-id');
// 根据id获取用户的详细信息
$.ajax({
type: 'get',
url : '/users/' + id,
success: function (response) {
console.log(response)
var html = template('modifyTpl', response);
$('#modifyBox').html(html);
}
})
});
// 为修改表单添加表单提交事件
$('#modifyBox').on('submit', '#modifyForm', function () {
// 获取用户在表单中输入的内容
var formData = $(this).serialize();
// 获取要修改的那个用户的id值
var id = $(this).attr('data-id');
// 发送请求 修改用户信息
$.ajax({
type: 'put',
url: '/users/' + id,
data: formData,
success: function (response) {
// 修改用户信息成功 重新加载页面
location.reload()
}
})
// 阻止表单默认提交
return false;
});
4.删除功能
// 当删除按钮被点击的时候
$('#userBox').on('click', '.delete', function () {
// 如果管理员确认要删除用户
if (confirm('您真的要删除用户吗')) {
// 获取到即将要删除的用户id
var id = $(this).attr('data-id');
// 向服务器端端发送请求 删除用户
$.ajax({
type: 'delete',
url: '/users/'+ id,
success: function () {
location.reload()
}
})
}
});
// 获取全选按钮
var selectAll = $('#selectAll');
// 获取批量删除按钮
var deleteMany = $('#deleteMany');
// 当全选按钮的状态发生改变时
selectAll.on('change', function () {
// 获取到全选按钮当前的状态
var status = $(this).prop('checked');
if (status) {
// 显示批量删除按钮
deleteMany.show();
}else {
// 隐藏批量删除按钮
deleteMany.hide();
}
// 获取到所有的用户并将用户的状态和全选按钮保持一致
$('#userBox').find('input').prop('checked', status);
});
// 当用户前面的复选框状态发生改变时
$('#userBox').on('change', '.userStatus', function () {
// 获取到所有用户 在所有用户中过滤出选中的用户
// 判断选中用户的数量和所有用户的数量是否一致
// 如果一致 就说明所有的用户都是选中的
// 否则 就是有用户没有被选中
var inputs = $('#userBox').find('input');
if (inputs.length == inputs.filter(':checked').length) {
// alert('所有用户都是选中的')
selectAll.prop('checked', true)
}else {
// alert('不是所有用户都是选中的')
selectAll.prop('checked', false)
}
// 如果选中的复选框的数量大于0 就说明有选中的复选框
if (inputs.filter(':checked').length > 0) {
// 显示批量删除按钮
deleteMany.show();
}else {
// 隐藏批量删除按钮
deleteMany.hide();
}
});
// 为批量删除按钮添加点击事件
deleteMany.on('click', function () {
var ids = [];
// 获取选中的用户
var checkedUser = $('#userBox').find('input').filter(':checked');
// 循环复选框 从复选框元素的身上获取data-id属性的值
checkedUser.each(function (index, element) {
ids.push($(element).attr('data-id'));
});
if (confirm('您真要确定要进行批量删除操作吗')) {
$.ajax({
type: 'delete',
url: '/users/' + ids.join('-'),
success: function () {
location.reload();
}
})
}
});