【SpringMvc】从零开始学SpringMvc之实现用户管理(四)

大家好,在上一篇中,我们实现了用户登录,这一篇我们来实现用户的增删改查。由于在第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">
  • 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如下图:
【SpringMvc】从零开始学SpringMvc之实现用户管理(四)

  • 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即可看到如下图

【SpringMvc】从零开始学SpringMvc之实现用户管理(四)

下面是添加/编辑用户,由于编辑比添加只多一个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);
		}
	});

}

到这里,用户的增删改查已经全部实现。

看到这里,还不快来试试?

最后献上源码Github

你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢