大家好，在上一篇中，我们实现了用户登录，这一篇我们来实现用户的增删改查。由于在第2篇中，我们已经创建好了数据库，这里就不在详述了。
- 【SpringMvc】从零开始学SpringMvc之初始化(一)
- 【SpringMvc】从零开始学SpringMvc之数据库(二)
- 【SpringMvc】从零开始学SpringMvc之实现用户登录(三)
- 【SpringMvc】从零开始学SpringMvc之实现用户管理(四)
- 【SpringMvc】从零开始学SpringMvc之文件上传（五）
准备
这里，我们用到了腾讯的前端模板引擎art-template，不熟悉的小伙伴可以先了解一番，或者有熟悉其他模板引擎的，也可以替换为其他的。中文文档点这里
在第3篇中，我们创建了一个空的index.html（没有看过的可以跳过，创建新的即可）
正式开始
- 1.下载
art-template.js，复制至WEB-INF/js文件夹下，然后在index.html中添加Bootstrap 和art-template.js的引用
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
- 2.在body标签中，添加目标id为
user_content的div标签，id可以自定义；
<div id="user_content"></div>
- 3.
WEB-INF/js下新建user.js，并在index.html中添加引用，然后添加js 代码，发起get请求，调用第二篇中的getUser接口
/**
* 获取全部用户
*/
function getUser() {
var url = "http://localhost:8080/SpringMvc/user/getUser";
$.get(url, function(data) {
if (data.code == 1) {
var html = template('user_list', data.data);
document.getElementById('user_content').innerHTML = html;
} else if (data.code == 101) {
// 登录失效
} else {
alert(data.msg)
}
});
}
其中，template 为art-template的语法，表示创建一个id为user_list的模板，传入的数据为data.data；生成的html设置给我们第2步创建的div。
getUser返回的json如下图：
image.png
- 4.在
index.html中添加js代码，生成html；注意id要与上一步保持一致
<script id="user_list" type="text/html">
<table class="table table-bordered">
<caption>
</caption>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>手机号</th>
<th>邮箱</th>
<th>修改时间</th>
<th><button class="btn btn-primary pull-right" data-toggle="modal" onclick="showAddDialog()">添加用户</button></th>
</tr>
</thead>
<tbody>
{{each $data}}
<tr>
<td>{{$index}}</td>
<td>{{$value.username}}</td>
<td>{{$value.phone}}</td>
<td>{{$value.email}}</td>
<td>{{$value.editTime}}</td>
<td>
<button type="button" class="btn btn-default" onclick="showEditDialog({{$value.userId}})">编辑</button>
<button type="button" class="btn btn-default" onclick="showDeleteDialog({{$value.userId}})">删除</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
其中，{{each $data}} {{/each}} 为 art-templated的数组遍历写法，相当于java 中的for；其中index 就是当前的下标，value为当前下标的数据。
- 5.在后台代码中，创建
IndexController，其中Controller和RequestMapping注解我们之前已经详细说过了（此步第3篇中已经添加过了）
@Controller
@RequestMapping("")
public class IndexController extends BaseController {
@RequestMapping("/index")
public String hello() {
return "index";
}
@RequestMapping("")
public String index() {
return "login";
}
}
到这里，用户查询已经完成了，我们运行项目，在浏览器中输入http://localhost:8080/SpringMvc/index即可看到如下图
image.png
下面是添加/编辑用户，由于编辑比添加只多一个userId ，所以放到一起了。这里我们用到了Bootstrap的模态框
- 6.在
index.html的body标签中添加html，默认是隐藏的
<!-- 模态框（Modal） -->
<div class="modal fade" id="addUser" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myUser">添加用户</h4>
</div>
<div class="modal-body">
<div class="input-group" style="display: none;">
<span class="input_tip">*id</span> <input id="id"
class="form-control" placeholder="请输入用户名" />
</div>
<div class="input-group">
<span class="input_tip">*用户名</span> <input id="username"
class="form-control" placeholder="请输入用户名" />
</div>
<div class="input-group">
<span class="input_tip">*密码</span> <input id="password"
class="form-control" style="-webkit-text-security: disc"
placeholder="请输入密码" />
</div>
<div class="input-group">
<span class="input_tip" style="margin-top: 20px;">*手机号</span> <input
id="phone" type="tel" class="form-control" placeholder="请输入手机号" />
</div>
<div class="input-group">
<span class="input_tip">邮箱</span> <input id="email" type="email"
class="form-control" placeholder="请输入邮箱" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
onclick="addorEditUser()">提交</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
- 7.在
user.js中添加showAddDialog()方法、showEditDialog()方法
// 添加用户弹窗
function showAddDialog() {
$('#id').val('');
$('#username').val('');
$('#password').val('');
$('#phone').val('');
$('#email').val('');
$('#myUser').html("添加用户");
//显示弹窗
$('#addUser').modal('show');
}
// 编辑用户弹窗
function showEditDialog(id) {
var url = "http://localhost:8080/SpringMvc/user/getUser?userId=" + id;
$.get(url, function(data) {
if (data.code == 1) {
$('#id').val(data.data[0].userId);
$('#username').val(data.data[0].username);
$('#password').val(data.data[0].password);
$('#phone').val(data.data[0].phone);
$('#email').val(data.data[0].email);
$('#myUser').html("修改用户");
//显示弹窗
$('#addUser').modal('show');
} else if (data.code == 101) {
// 登录失效
} else {
alert(data.msg)
}
});
}
- 8.在user.js 中添加
addorEditUser()方法，判断参数、调用addUser和updateUser接口
// 添加/编辑用户
function addorEditUser() {
var username = $('#username').val();
var password = $('#password').val();
var phone = $('#phone').val();
var email = $('#email').val();
if (username.length <= 0) {
alert("用户名不能为空")
return;
}
if (password.length <= 0) {
alert("密码不能为空")
return;
}
if (phone.length <= 0) {
alert("手机号不能为空")
return;
}
var title = $('#myUser').html();
if (title.indexOf("修改") != -1) {
var id = $('#id').val();
var url = "http://localhost:8080/SpringMvc/user/updateUser?username="
+ username + "&password=" + password + "&phone=" + phone
+ "&email=" + email + "&userId=" + id;
$.get(url, function(data) {
if (data.code == 1) {
//隐藏弹窗
$('#addUser').modal('hide');
// 刷新界面
window.location.reload();
} else if (data.code == 101) {
// 登录失效
} else {
alert(data.msg);
}
});
} else {
var url = "http://localhost:8080/SpringMvc/user/addUser?username="
+ username + "&password=" + password + "&phone=" + phone
+ "&email=" + email;
$.get(url, function(data) {
if (data.code == 1) {
//隐藏弹窗
$('#addUser').modal('hide');
// 刷新界面
window.location.reload();
} else if (data.code == 101) {
// 登录失效
} else {
alert(data.msg);
}
});
}
}
删除用户
- 9.在body标签中添加删除用户弹窗
<!-- 模态框（Modal） -->
<div class="modal fade" id="deleteUser" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">提示</h4>
</div>
<div class="modal-body">
<h4 class="modal-title">要删除这个用户？</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
onclick="deleteUser()">提交</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
- 10.在
user.js中添加showDeleteDialog和deleteUser方法，由于删除用户需要userId，我们定义了一个变量保存我们选择删除的id
//删除用户弹窗
var userId;
function showDeleteDialog(id) {
userId = id;
$('#deleteUser').modal('show');
}
// 删除用户
function deleteUser() {
if (userId.length <= 0) {
alert("id不能为空")
return;
}
var url = "http://localhost:8080/SpringMvc/user/deleteUser?userId=" + userId;
$.get(url, function(data) {
if (data.code == 1) {
// 刷新界面
window.location.reload();
} else if (data.code == 101) {
// 登录失效
} else {
alert(data.msg);
}
});
}
