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.實現用戶信息修改

---