用户列表的增删改

上一次我们把大体的页面布局做出来了，接下来就是完善优化我们的界面，并且进行相关操作方法的实现。

---

主要任务：优化界面，对用户列表进行增删改

---

• 1、优化界面

引用css
布局已做好，并且在上一次中我们也写了自己的css——public.css，接下来我们需要引用它。在user.jsp中写代码：

<link href="${ctx }/css/public.css" type="text/css" rel="stylesheet" />

加了样式后的界面

• 2、增加操作
  ①增加界面
  在进行增加操作之前，我们先写一个关于增加的界面，还是在user.jsp中，写在</body>之前即可

<div class="box">
		<div id="loginDiv">
		    <p class="logTitle">新增</p>
		    <div>
		      <form id="saveForm" >
		      	<input type="hidden" name="id" id="id"	/>
		        <div class="formInput"> 
		          <img src="${ctx }/img/icon01.png" />
		          <!-- <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
此部分在user.jsp中的</head>前写

<script type="text/javascript">
	function showAddDiv() {
		$(".box").show();//显示div
		//document.getElementById("divId").style.display="block";
	}
</script>

界面显示如下图

③添加记录
此部分在user.jsp中的<script>标签中书写

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

输入相关数据后，点击保存会出现下面界面，说明添加成功，点击确定后，在页面上会显示你刚刚添加的记录，刷新数据库，也有相应记录。

当然在Console中也会打印下面的信息，说明添加记录成功

• 3、删除记录
  此部分在user.jsp中的<script>标签中书写

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

点击删除，会出现如下对话框

当然在Console中也会打印下面的信息，说明删除记录成功

• 4、修改记录
  此部分在user.jsp中的<script>标签中书写

//编辑
	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();
			}
		});
	}

可以对数据进行修改

当然在Console中也会打印下面的信息，说明修改记录成功

但是这个地方，修改不是在原纪录中修改，而是会创造一条修改后的新纪录，这是我们下节课的一个修改点哦~

• 5、方法
  当然了，能有上述的操作，还需要在controller层写相关方法

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

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

	@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;
	}

因为我们是根据id来进行的操作，所以在UserService中添加方法如下：

public User findById(Integer id);

在UserServiceImpl中生成如下方法：

    @Override
	public User findById(Integer id) {
		return userDao.findById(id);
	}

基本上完成了界面的优化与增删改，当然还有些许问题，我们下次继续优化~