大家好，在上一篇中，我们实现了用户登录，这一篇我们来实现用户的增删改查。由于在第2篇中，我们已经创建好了数据库，这里就不在详述了。
准备
这里，我们用到了腾讯的前端模板引擎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">
<div id="user_content"></div>
/**
* 获取全部用户
*/
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如下图：
<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为当前下标的数据。
@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即可看到如下图
下面是添加/编辑用户，由于编辑比添加只多一个userId ，所以放到一起了。这里我们用到了Bootstrap的模态框
<!-- 模态框（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>
// 添加用户弹窗
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)
}
});
}
// 添加/编辑用户
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);
}
});
}
}
删除用户
<!-- 模态框（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>
//删除用户弹窗
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);
}
});
}
1372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
