jsp+servlet+Tomcat+mysql实现用户注册、登录、查看、修改实例之——信息修改

作者: 乐山乐水 若愚若怯
发布时间:2015-07-13 11:12:32

学习javaWeb,首先要学习基础的jsp,servlet,弄通了机制然后就得心应手了。我们来实现一个简单的实例来学习。


我们的任务有:1.数据库及表创建

       2.实现用户注册

       3.实现用户登录

       4.实现用户列表显示

       5.实现用户删除

       6.实现用户信息查看

       7.实现用户信息修改


上节完成了用户信息的查看,本节来继续实现信息修改,这节相对复杂些。

七、用户信息修改

  用户信息修改是实现,当用户点击修改按钮,会跳转到用户信息修改页面中,并且初始显示着数据库中的信息,而且能够提供用户修改和保存的功能。

  其中最难得当属,将数据库中的信息初始到修改页面。

  需要实现的任务有:

        1.写跳转servlet

        2.写修改页面

        3.写修改方法

1.跳转Servlet

  当用户点击修改按钮,超链接会将词条数据提交给servlet处理

1 <td><a href="servlet/ServletToUserUpdate?userId=<%=user.getUserId() %>">修改</a></td>

  (注:页面详细代码,请参见:用户列表显示页面代码

  用超链接的方式提交给ServletToUserUpdate.java 中的doGet(),并且传递过去userId

  调用UserDaoselectOneUserInfo()方法,将查询结果返回给userupdate.jspServletToUserUpdate.javadoGet()方法如下:

 1 public void doGet(HttpServletRequest request, HttpServletResponse response)   2             throws ServletException, IOException {   3    4         int userId = Integer.parseInt(request.getParameter("userId"));   5         UserDao userDao = new UserDao();   6         UserVo user = userDao.selectOneUserInfo(userId);   7            8         request.setAttribute("user", user);   9         request.getRequestDispatcher("/userupdate.jsp").forward(request, response);  10     }

2.信息修改页面

  用户修改页面中初始要显示数据库中的数据,对于不同的表单项有不同的初始化操作,效果图如下:

 

userupdate.jsp页面代码如下:

 1 <form name="myform" action ="servlet/ServletToUserUpdate" method="post">   2     <table border = "1" align = "center" style="border-collapse:collapse;">   3         <tr>             <!-- 黄色部分代码是为了数据修改的时候使用 ->   4             <td colspan="2">用户修改<input type="hidden" name="userId" value='<%=user.getUserId() %>'/></td>              5         </tr>   6         <tr>   7             <td>用户名</td>   8             <td class="tdstyle2"><input type="text" name="userName" value='<%=user.getUserName() %>'/></td>       9         </tr>  10         <tr>  11             <td>密 码</td>  12             <td><input type="text" name="userPassword" value='<%=user.getUserPassword() %>'/></td>              13         </tr>  14         <tr>  15             <td>地 址</td>  16             <td>  17                 <select name="userProvince" id="userProvince" onchange="addCity()"></select>18                 <select name="userCity" id="userCity"></select>19             </td>  20         </tr>  21         <tr>  22             <td>性 别</td>  23             <td>  24                 <input type="radio" id = "man" name="userSex" value="男" checked="checked" />25                 <input type="radio" id = "woman"name="userSex" value="女" />26             </td>          27         </tr>  28         <tr>  29             <td>爱 好</td>  30             <td>  31                 <input type="checkbox" name="userHobby" value="篮球" />篮球  32                 <input type="checkbox" name="userHobby" value="足球" />足球  33                 <input type="checkbox" name="userHobby" value="羽毛球" />羽毛球  34                 <input type="checkbox" name="userHobby" value="跑步" />跑步  35             </td>           36         </tr>  37         <tr>  38             <td style="height:100px;"><br/><br/><br/></td>  39             <td>  40                 <textarea cols="10" rows="3" name="userDescribe"><%=user.getUserDescribe() %></textarea>  41             </td>      42         </tr>  43         <tr>  44             <td colspan="2"><input type = "submit" value = "修改" /></td>            45         </tr>  46     </table>  47     </form>

上面的代码中已经对:userNameuserPassworduserDescribe进行了数据同步操作,

下面来对省份性别爱好进行数据初始化

省份同步数据的时候可以在循环生成option的时候进行判断,选择相同的省份和城市,操作如下:

 1 var proArry = [ "河南", "河北", "山东" ];   2 var cityArray = [ [ "郑州", "南阳", "洛阳" ], [ "石家庄", "邯郸", "邢台" ],[ "济南", "青岛", "烟台" ] ];   3 //定义城市,省份数组   4 function addProvince() {   5 //增减省份数据   6         var proObj = document.getElementById("userProvince");   7     //得到省份对象   8    9     for ( var i = 0; i < proArry.length; i++) {  10   11         var newOption = new Option();  12         newOption.value = proArry[i];  13         newOption.innerHTML = proArry[i];  14         proObj.options.add(newOption);  15         if('<%=user.getUserProvince() %>'==proArry[i]){  16             proObj.options[i].selected=true;  17         }  18     }  19         addCity();  20 }  21 function addCity() {  22   23     var proObjSelected = document.getElementById("userProvince").selectedIndex;  24     var cityObj = document.getElementById("userCity");  25     cityObj.length = 0;  26   for ( var i = 0; i < cityArray.length; i++) {  27   28       var newOption = new Option();  29       newOption.value = cityArray[proObjSelected][i];  30       newOption.innerHTML = cityArray[proObjSelected][i];  31       cityObj.options.add(newOption);  32       if('<%=user.getUserCity() %>'==cityArray[proObjSelected][i]){  33           cityObj.options[i].selected=true;  34       }  35     }  36 }        

 性别同步是拿数据库中的值与前台相比,如果相同,选中。

1 function setValue(){  2          if('<%= user.getUserSex() %>'=="男"){  3              document.getElementById("man").checked="checked";  4          }else{  5              document.getElementById("woman").checked="checked";  6          }  7           8     }

其中比较绕的是爱好的选中,因为数据库中的爱好是一个字符串,前台页面是几个checkbox框,如何选中呢?

我们可以将字符串截取为包含几个元素的集合,然后循环遍历,与checkbox集合比较,相同则选中。

 1 function setHob(){   2            3         var objHobby = document.getElementsByName("userHobby");   4            5         var hobbyStr = '<%=user.getUserHobby()%>';   6         var hob = hobbyStr.split(",")  ;   7        8         for(var i =0;i<objHobby.length ;i++ ){   9               10             for(var j = 0; j<hob.length ; j++ ){  11                   12                 if(hob[j] == objHobby[i].value){  13                     objHobby[i].checked = "checked";      14                 }  15             }  16               17         }  18     }

当用户修改完信息,点击修改按钮之后,数据会被提交到ServletToUserUpdate.java 的doPost()中,servlet得到前台页面信息之后,转存VO对象中,这部分代码如同注册

省略不写(详见:.注册servlet),然后调用UserDao中的方法。

1      UserDao userDao = new UserDao();  2         userDao.updateUser(user);  3           4         ArrayList<UserVo> list=userDao.selectNotDeleteList();  5         request.setAttribute("list", list);  6         request.getRequestDispatcher("/userlist.jsp").forward(request, response);

3.修改方法updateUser(UserVo user)

 1 public void updateUser(UserVo user) {   2         Dbmanage dbmanage = new Dbmanage();   3         Connection conn = null;   4         Statement sta = null;   5    6         try {   7             conn = dbmanage.initDB();   8             sta = conn.createStatement();   9             String sql = "UPDATE  userTable SET user_name= '"  10                     + user.getUserName() + "', user_password= '"  11                     + user.getUserPassword() + "', user_province= '"  12                     + user.getUserProvince() + "', user_city= '"  13                     + user.getUserCity() + "', user_sex= '" + user.getUserSex()  14                     + "', user_hobby= '" + user.getUserHobby()  15                     + "', user_describe= '" + user.getUserDescribe()  16                     + "' WHERE user_id= " + user.getUserId();  17             System.out.println(sql);  18             sta.executeUpdate(sql);  19             System.out.println("update success");  20         } catch (SQLException e) {  21   22             e.printStackTrace();  23         } finally {  24             // 执行完关闭数据库  25             dbmanage.closeDB(sta, conn);  26         }  27   28     }


到这里,这个简单的工程实例就算是做完了,但是其中还仍有许多的不足,由于是入门级实例,先这样吧,慢慢提高吧~!


链接导航   1.数据库及表创建

       2.实现用户注册

       3.实现用户登录

       4.实现用户列表显示

       5.实现用户删除

       6.实现用户信息查看

       7.实现用户信息修改


 

来源:http://www.cnblogs.com/tzhz/archive/2013/05/18/3086298.html

推荐: