[原创]java WEB学习笔记26：MVC案例完整实践(part 7)---修改的设计和实现

本博客为原创：综合尚硅谷（http://www.atguigu.com）的系统教程（深表感谢）和网络上的现有资源(博客，文档，图书等)，资源的出处我会标明

本博客的目的：①总结自己的学习过程，相当于学习笔记 ②将自己的经验分享给大家，相互学习，互相交流，不可商用

内容难免出现问题，欢迎指正，交流，探讨，可以留言，也可以通过以下方式联系。

本人互联网技术爱好者，互联网技术发烧友

微博：伊直都在0221

QQ：951226918

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.修改操作的思路：先显示页面，修改字段，提交表单，修改完成

　 1）index.jsp 查询

　　2）查询结果中的 Update 超链接 <a href="editeCustomer.do?id=<%=customer.getId()%>">Update</a>

　　3）servlet 中的editeCustomer 通过传入的 id号进行查询，返回结果保存到 customer对象，转发到updatecustomer.jsp

　　4）在 updatecustomer.jsp 页面中显示所要修改的字段

　　5）填写提交字段，提交到 servlet中的 updateCustomer.do 中

　　6）先验证 name是否可以，若不可以，则通过转发的方式返回错误提示信息；若可以，则将提交的字段，封装为一个Customer对象，调用customerDAO.update(customer)方法处理更新

2.关键代码

　　1）index.jsp　　

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <%@ page import="com.jsaon.mvcapp.domain.Customer" %>

 <%@ page import="java.util.List" %>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>mve_index</title>

 <!-- 加入 jquery 库 -->

 <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>

 <script type="text/javascript">

     $(function(){

         //1.为删除操作添加 click事件

         $(".delete").click(function(){

             //2.获取a标签的父节点td，再获取td的父标签tr，再找到第二个td标签，也就是name节点，最后获取那么name节点的文本值

             var content = $(this).parent().parent().find("td:eq(1)").text();

             //3.确认。'是'则处理删除操作，'否'则不处理

             var flag = confirm("确定要删除" + content + "的用户么？");

             return flag;

         });

     });

 </script>

 </head>

 <body>

     <form action="query.do" method="post">

         <table>

             <tr>

                  <td>CustomerName:</td>

                  <td><input type="text" name="name"/></td>

             </tr>

             <tr>

                  <td>Address:</td>

                  <td><input type="text" name="address"/></td>

             </tr>

             <tr>

                  <td>Phone:</td>

                  <td><input type="text" name="phone"/></td>

             </tr>

             <tr>

                  <td><input type="submit" value="Query"/></td>

                  <td><a href="newcustomer.jsp">Add New Customer</a></td>

             </tr>

         </table>

     </form>

     <br><br>

     <%

         List<Customer> lists = (List<Customer>)request.getAttribute("list");

         if(lists != null && lists.size() > 0 ){

     %>

     <hr>

     <br><br>

     <table border="1" cellpadding="10" cellspacing="0">

             <tr>

                 <th>ID</th>

                 <th>CustomerName</th>

                 <th>Address</th>

                 <th>Phone</th>

                 <th>Update\Delete</th>

             </tr>

             <%

                 for(Customer customer : lists){

             %>

             <tr>

                 <td><%= customer.getId() %></td>

                 <td><%= customer.getName() %></td>

                 <td><%= customer.getAddress() %></td>

                 <td><%= customer.getPhone() %></td>

                 <td>

                     <a href="editeCustomer.do?id=<%=customer.getId()%>">Update</a>

                     <a href="deleteCustomer.do?id=<%= customer.getId() %>" class="delete">Delete</a>

                 </td>

             </tr>

             <%

                 }

             %>

     </table>

     <%

         }

     %>

 </body>

 </html>

　　　2）updatecustomer.jsp

 <%@page import="com.jsaon.mvcapp.domain.Customer"%>

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>updatecustomer</title>

 </head>

 <body>

     <%--可以用来回显  <%= request.getParameter("name") %> 若为空 则赋为 空串儿 ; 反之 ，赋原值 --%>

     <h2><font color="red"><%=request.getAttribute("message") == null ? "" : request.getAttribute("message")%></font></h2>

     <%

         // 此步骤 避免了 nullPointerException 异常 ，即 从sevlet中未获取到 customer

         String id = null;

         String oldName = null;

         String name = null;

         String address = null;

         String phone = null;

         Customer customer = (Customer)request.getAttribute("customer");

         if(customer != null){

             //当从sevlet中的 updateCustomer 方法返回的customer 不为空，就用customer填充字段

             id = customer.getId() + "";

             oldName = customer.getName();

             name = customer.getName();

             address = customer.getAddress();

             phone = customer.getPhone();

         } else{

             //customer 为空，则  id，oldName 为

             id = request.getParameter("id");

             oldName = request.getParameter("oldName");

             name = request.getParameter("oldName");

             // address，phone 为请求参数， 通过转发 获取

             address = request.getParameter("address");

             phone = request.getParameter("phone");

         }

     %>

     <form action="updateCustomer.do" method="post">

         <input type="hidden" name="id" value="<%= id %>"/>

         <input type="hidden" name="oldName" value="<%= oldName %>"/>

         <table>

             <tr>

                  <td>CustomerName:</td>

                  <td><input type="text" name="name"

                   value="<%= name  %>"/></td>

             </tr>

             <tr>

                  <td>Address:</td>

                  <td><input type="text" name="address"

                   value="<%= address %>"/></td>

             </tr>

             <tr>

                  <td>Phone:</td>

                  <td><input type="text" name="phone"

                  value="<%= phone %>"/></td>

             </tr>

             <tr>

                  <td colspan="2"><input type="submit" value="submit"/></td>

             </tr>

         </table>

     </form>

 </body>

 </html>

　　　3 ）CustomerServlet2.java updateCustomer() , editeCustomer()

　　　　注意： updateCustomer 中的验证

 private void updateCustomer(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         System.out.println("update");

         request.setCharacterEncoding("UTF-8");

         //1.获取请求信息：id，name，address，phone，oldName

             //1.1 隐藏域的 值

             String  idStr = request.getParameter("id");

             String  oldNameStr = request.getParameter("oldName");

             //1.2 提交的值

             String  nameStr = request.getParameter("name");

             String  addressStr = request.getParameter("address");

             String  phoneStr = request.getParameter("phone");            

         //2.验证name 是否可用

             //通过equalsIgnoreCase() 方式 避免了  大小写的问题。equals 方法区分大小写， 而数据库SQL 不区分大小写

             if(!oldNameStr.equalsIgnoreCase(nameStr)){

                 //2.1  先比较name 和 oldName 是否相同，若相同，说明name 可用

                 //2.2 若不相同，则调用CustomerDAO 的getCostomerWithName(String name) 获取 name 在数据库中是否存在

                 long rel = customerDAO.getCountWithName(nameStr);

                 //2.2.1 若存在，则返回值大于 0，则响应 updatecustomer.jsp 页面：通过转发的方式

                 if(rel > 0){

                     // 进行回显字符串，在request 中放入一个属性 message：用户名 name

                     // 回显：updatecustomer.jsp 的表单值可以回显

                     // value="<%= request.getParameter("name") == null ? "" : request.getParameter("name")  %>"  进行回显

                     // 注意：name 显示的是 oldName，而address 和 phone 显示的是新的

                     request.setAttribute("message", "用户名 " + nameStr + " 已经被占用了，请重新选择！");

                     //2.2.2 存在，要求在updatecustomer.jsp 页面显示一条消息：用户名 name 已经被占用了，请重新选择

                     request.getRequestDispatcher("/updatecustomer.jsp").forward(request,response);

                     // 2.2.3 结束方法：return

                     return;

                 }

             }

         //3.通过验证后，则将表单封装为一个Customer 对象 customer

             Customer  customer = new Customer(nameStr, addressStr, phoneStr);

             customer.setId(Integer.parseInt(idStr));

         //4.调用CustomerDAO 的save(Customer customer) 执行更新操作

             customerDAO.update(customer);

         //5.重定向到 query.do

             response.sendRedirect("query.do");

     }

     private void editeCustomer(HttpServletRequest request,

             HttpServletResponse response) throws ServletException, IOException {

         System.out.println("edit");

         String forwardPath = "/error.jsp";

         //1. 获取请求参数id

          String idStr = request.getParameter("id");

          int id = Integer.parseInt(idStr);

          try {

              //2. 调用CustomerDAO 的get(id) 方法，获取 和id  对应的Customer 对象

              Customer customer = customerDAO.get(id);

             if(customer != null){

                 forwardPath ="/updatecustomer.jsp";

                 //3. 将 customer 放入 request 中

                 request.setAttribute("customer", customer);

             }

         } catch (Exception e) {}

          //4. 响应updatecustomer.jsp 页面： 转发的形式

          request.getRequestDispatcher(forwardPath).forward(request, response);    

     }

　　 4）error.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>error page</title>

 </head>

 <body>

     <h1> 页面出错了</h1>

 </body>

 </html>

　　5）CustomerDAO 中的 update() 的声明

 //更新操作

     public void update(Customer customer);

　　6）CustomerDAOJdbcImpl 中 update 的实现

 @Override

     public void update(Customer customer) {

         String sql = "UPDATE customers  SET name = ?, address = ?, phone = ? WHERE id = ?";

         update(sql, customer.getName(), customer.getAddress(), customer.getPhone(), customer.getId());

     }

总结：

　　1.表单的回显(了解)：

　　2.验证

1）id一般都使用隐藏域 <input type="hidden" name="id" value="<%= id %>"/>

2）修改中的复杂验证，若某一字段在数据库表中不允许重复的解决方案

　　①在表单中使用隐藏域保存该字段的原始信息值：<input type="hidden" name="oldName" value="<%= oldName %>"/>

　　②同时在Servlet 中同时获取原始值和新提交的值：若一致，则通过；若不一致，则用使用新提交的值去查询数据库表。返回有记录，则提示错误信息或者页面；范围无记录，则可以执行修改

  if(!oldNameStr.equalsIgnoreCase(nameStr)){

 20                 //2.1  先比较name 和 oldName 是否相同，若相同，说明name 可用

 21                 //2.2 若不相同，则调用CustomerDAO 的getCostomerWithName(String name) 获取 name 在数据库中是否存在

 22                 long rel = customerDAO.getCountWithName(nameStr);

 23                 //2.2.1 若存在，则返回值大于 0，则响应 updatecustomer.jsp 页面：通过转发的方式

 24                 if(rel > 0){

 25                     // 进行回显字符串，在request 中放入一个属性 message：用户名 name

 26                     // 回显：updatecustomer.jsp 的表单值可以回显

 27                     // value="<%= request.getParameter("name") == null ? "" : request.getParameter("name")  %>"  进行回显

 28                     // 注意：name 显示的是 oldName，而address 和 phone 显示的是新的

 29                     request.setAttribute("message", "用户名 " + nameStr + " 已经被占用了，请重新选择！");

 30                     //2.2.2 存在，要求在updatecustomer.jsp 页面显示一条消息：用户名 name 已经被占用了，请重新选择

 31                     request.getRequestDispatcher("/updatecustomer.jsp").forward(request,response);

 32                     // 2.2.3 结束方法：return

 33                     return;

 34                 }

 35             }

3）在修改状态下，若验证没有通过，表单的回显问题。通用的原则

　　不允许重复的字段要给予提示，但字段中的显示旧的字段值，允许修改，则改为新的字段的值。通过Ajax 会有更好的用户体验。

　　3.response.sendRedirect()方法可以防止表单的重复提交