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

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

---

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

　　　　　　　2.实现用户注册

　　　　　　　3.实现用户登录

　　　　　　　4.实现用户列表显示

　　　　　　　5.实现用户删除

　　　　　　　6.实现用户信息查看

　　　　　　　7.实现用户信息修改

---

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

七、用户信息修改

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

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

　　需要实现的任务有：

　　　　　　　　1.写跳转servlet

　　　　　　　　2.写修改页面

　　　　　　　　3.写修改方法

1.跳转Servlet

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

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

　　（注：页面详细代码，请参见：用户列表显示页面代码）

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

　　调用UserDao中selectOneUserInfo()方法，将查询结果返回给userupdate.jsp。ServletToUserUpdate.java的doGet()方法如下：

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        int userId = Integer.parseInt(request.getParameter("userId"));
        UserDao userDao = new UserDao();
        UserVo user = userDao.selectOneUserInfo(userId);
        
        request.setAttribute("user", user);
        request.getRequestDispatcher("/userupdate.jsp").forward(request, response);
    }

2.信息修改页面

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

　

userupdate.jsp页面代码如下：

<form name="myform" action ="servlet/ServletToUserUpdate" method="post">
    <table border = "1" align = "center" style="border-collapse:collapse;">
        <tr>　　　　　　　　　　　　　<!-- 黄色部分代码是为了数据修改的时候使用 ->
            <td colspan="2">用户修改<input type="hidden" name="userId" value='<%=user.getUserId() %>'/></td>           
        </tr>
        <tr>
            <td>用户名</td>
            <td class="tdstyle2"><input type="text" name="userName" value='<%=user.getUserName() %>'/></td>    
        </tr>
        <tr>
            <td>密 码</td>
            <td><input type="text" name="userPassword" value='<%=user.getUserPassword() %>'/></td>            
        </tr>
        <tr>
            <td>地 址</td>
            <td>
                <select name="userProvince" id="userProvince" onchange="addCity()"></select>省
                <select name="userCity" id="userCity"></select>市
            </td>
        </tr>
        <tr>
            <td>性 别</td>
            <td>
                <input type="radio" id = "man" name="userSex" value="男" checked="checked" />男
                <input type="radio" id = "woman"name="userSex" value="女" />女
            </td>        
        </tr>
        <tr>
            <td>爱 好</td>
            <td>
                <input type="checkbox" name="userHobby" value="篮球" />篮球
                <input type="checkbox" name="userHobby" value="足球" />足球
                <input type="checkbox" name="userHobby" value="羽毛球" />羽毛球
                <input type="checkbox" name="userHobby" value="跑步" />跑步
            </td>         
        </tr>
        <tr>
            <td style="height:100px;">个<br/>人<br/>描<br/>述</td>
            <td>
                <textarea cols="10" rows="3" name="userDescribe"><%=user.getUserDescribe() %></textarea>
            </td>    
        </tr>
        <tr>
            <td colspan="2"><input type = "submit" value = "修改" /></td>          
        </tr>
    </table>
    </form>

上面的代码中已经对：userName、userPassword、userDescribe进行了数据同步操作，

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

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

var proArry = [ "河南", "河北", "山东" ];
var cityArray = [ [ "郑州", "南阳", "洛阳" ], [ "石家庄", "邯郸", "邢台" ],[ "济南", "青岛", "烟台" ] ];
//定义城市，省份数组
function addProvince() {
//增减省份数据
        var proObj = document.getElementById("userProvince");
    //得到省份对象

    for ( var i = 0; i < proArry.length; i++) {

        var newOption = new Option();
        newOption.value = proArry[i];
        newOption.innerHTML = proArry[i];
        proObj.options.add(newOption);
        if('<%=user.getUserProvince() %>'==proArry[i]){ 16             proObj.options[i].selected=true; 17         }
    }
        addCity();
}
function addCity() {

    var proObjSelected = document.getElementById("userProvince").selectedIndex;
    var cityObj = document.getElementById("userCity");
    cityObj.length = 0;
　　for ( var i = 0; i < cityArray.length; i++) {

    　　var newOption = new Option();
    　　newOption.value = cityArray[proObjSelected][i];
    　　newOption.innerHTML = cityArray[proObjSelected][i];
    　　cityObj.options.add(newOption);
    　　if('<%=user.getUserCity() %>'==cityArray[proObjSelected][i]){ 33         　　cityObj.options[i].selected=true; 34     　　}
    }
}        

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

function setValue(){
         if('<%= user.getUserSex() %>'=="男"){
             document.getElementById("man").checked="checked";
         }else{
             document.getElementById("woman").checked="checked";
         }
        
    }

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

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

function setHob(){
        
        var objHobby = document.getElementsByName("userHobby");
        
        var hobbyStr = '<%=user.getUserHobby()%>';
        var hob = hobbyStr.split(",")  ;
    
        for(var i =0;i<objHobby.length ;i++ ){
            
            for(var j = 0; j<hob.length ; j++ ){
                
                if(hob[j] == objHobby[i].value){
                    objHobby[i].checked = "checked";    
                }
            }
            
        }
    }

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

省略不写（详见：.注册servlet），然后调用UserDao中的方法。

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

3.修改方法updateUser(UserVo user)

public void updateUser(UserVo user) {
        Dbmanage dbmanage = new Dbmanage();
        Connection conn = null;
        Statement sta = null;

        try {
            conn = dbmanage.initDB();
            sta = conn.createStatement();
            String sql = "UPDATE  userTable SET user_name= '"
                    + user.getUserName() + "', user_password= '"
                    + user.getUserPassword() + "', user_province= '"
                    + user.getUserProvince() + "', user_city= '"
                    + user.getUserCity() + "', user_sex= '" + user.getUserSex()
                    + "', user_hobby= '" + user.getUserHobby()
                    + "', user_describe= '" + user.getUserDescribe()
                    + "' WHERE user_id= " + user.getUserId();
            System.out.println(sql);
            sta.executeUpdate(sql);
            System.out.println("update success");
        } catch (SQLException e) {

            e.printStackTrace();
        } finally {
            // 执行完关闭数据库
            dbmanage.closeDB(sta, conn);
        }

    }

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

---

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

　　　　　　　2.实现用户注册

　　　　　　　3.实现用户登录

　　　　　　　4.实现用户列表显示

　　　　　　　5.实现用户删除

　　　　　　　6.实现用户信息查看

　　　　　　　7.实现用户信息修改

---