用户列表的增删改

上一篇里，我们完成了登录界面的基础搭建，这一篇我们要完善整个界面以及将它与后台相连。

1.添加新增窗口
我们在user.jsp页面上添加一个div。

<div class="box">
	<div id="loginDiv">
	    <p class="logTitle">新增</p>
	    <div>
	      <form id="saveForm" >
	      	<input type="hidden" name="id" id="id"	/>
	        <div class="formInput"> <span>用户名：</span>
	          <input type="text" name="username" id="username"	placeholder="" />
	        </div>
	        <div class="formInput"> <span>密码：</span>
	          <input type="password" name="pwd"	id="pwd"	placeholder="" />
	        </div>
	        <div class="formInput"> <span>真实姓名：</span>
	          <input type="text"	name="realname" id="realname"	placeholder="" />
	        </div>
	        <div class="formInput"> <span>性别：</span>
	          <select name="sex">
	            <option value="1">男</option>
	            <option value="2">女</option>
	          </select>
	        </div>
	        <div class="formInput"> 
	        	<span>角色：</span>
	          <select name="role">
	          	<option value="1">管理员</option>
	            <option value="2">客户</option>
	          </select>
	        </div> 
	          <input  class="formButton" type="button" value="保存" onClick="create()" />
	      </form>
	    </div>
	</div>
</div>

我们想要这个div能够显示出来，还需要写一个jQuery代码。

function showAddDiv(){
	$(".box").show();//显示div
}

这就是我们所写的新增的div，点击新增按钮时就可以出现。
2.提交新增数据

function create(){
	$.post("${ctx}/user/create.do",
			$("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交
				if(data){
					alert("保存成功");
					window.location.reload();
				}else{
					alert("失敗");
				}		
	});
}

这样，我们将前台的新增与后台的添加就连上了，就可以在网页上将数据添加到数据库中。
3.删除数据
因为在删除时，可能是不小心点到删除键，所以我们需要先询问一下是否需要删除。

function deleteUser(id){
	if(confirm("您确定要删除吗？")){
		$.post("${ctx}/user/delete.do",{"id":id,"username":id},
				function(data){
			if(data){
				alert("删除成功");
				window.location.reload();
			}else{
				alert("删除失敗");
			}	
		})
	}
}

然后我们在UserController.java内添加删除的代码。

	@ResponseBody
	@RequestMapping("/delete.do")
	public boolean delete(Integer id){
		try{
			userService.delete(id);
		}catch(Exception e){
			System.out.println(e.getMessage());
			return false;
		}
		return true;
	}

这样，我们就能实现删除了。




4.编辑原有数据
编辑时，我们是需要找到对应id，然后进行更改，所以需要传入一个id。
为了省事，这里依旧使用了新增时的div。

function edit(id){
	$.ajax({
		type:"get",
		url:"${ctx}/user/findById.do",
		data:{"id":id},
		success:function(data){
			$("#id").val(data.id);
			$("#username").val(data.username);
			$("#pwd").val(data.pwd);
			$("#realname").val(data.realname);
			$(".box").show();
		}
	});
}

现在，我们去UserController.java里面去写findById。

	@ResponseBody
	@RequestMapping("/findById.do")
	public User findById(Integer id){
		return userService.findById(id);
	}

此时会出现错误，是因为我们的UserService里面没有写findById，此时我们只需要点击错误，让他自己改正即可，改正后还是有错误也是因为之前都没有写，不停让其自己改正即可。

现在，就差不多都完成了，我们可以运行看看，并且可以看到我们添加删除的数据在数据库中也更新了。
/user/list.do