JavaWeb小工程實戰演練（五）

修改用戶信息

1. 網頁設計：


用戶修改用到的兩個界面。

2. 後臺代碼實現

分析：由於在list.jsp中只能像刪除一樣，綁定用戶id，因此在轉發到修改界面之前，應該編寫一個通過用戶id查詢出該用戶，然後纔將該用戶對象存入request中，以便在修改界面中回顯用戶數據。

更新數據中的過渡Servlet：UpdateUserForwordServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.POJO.User;
import cn.hehewocao.Service.UserService;
import cn.hehewocao.Service.UserServiceImp;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/updateUserForwordServlet")
public class UpdateUserForwordServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        String id  = req.getParameter("beforeUserId");
        UserService us = new UserServiceImp();
        User user = us.findByUserId(id);
        req.setAttribute("beforeUser", user);
        req.getRequestDispatcher("update.jsp").forward(req, resp);
    }
}

用於更新的Servlet：UpdateUserServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.POJO.User;
import cn.hehewocao.Service.UserService;
import cn.hehewocao.Service.UserServiceImp;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Map;

@WebServlet("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        String beforeId = req.getParameter("beforeId");

        HttpSession session = req.getSession();
        String checkcode = req.getParameter("checkcode");
        System.out.println(checkcode + ":" + (String) session.getAttribute("checkcode"));
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String nickname = req.getParameter("nickname");
        String sex = req.getParameter("sex");
        String birthday = req.getParameter("birthday");
        String phone = req.getParameter("phone");
        String email = req.getParameter("email");
        String address = req.getParameter("address");
        String occupation = req.getParameter("occupation");
        String describes = req.getParameter("describes");
        if ("".equals(username)) {
            username = null;
        }
        if ("".equals(password)) {
            password = null;
        }
        if ("".equals(nickname)) {
            nickname = null;
        }
        if ("".equals(sex)) {
            sex = null;
        }
        if ("".equals(birthday)) {
            birthday = null;
        }
        if ("".equals(phone)) {
            phone = null;
        }
        if ("".equals(email)) {
            email = null;
        }
        if ("".equals(address)) {
            address = null;
        }
        if ("".equals(occupation)) {
            occupation = null;
        }
        if ("".equals(describes)) {
            describes = null;
        }
        User user = new User(0, username, password, nickname, sex, birthday, phone, email, address, occupation, describes);
        //Map<String, String[]> parameterMap = req.getParameterMap();
        System.out.println(user);
        if (checkcode==null || !checkcode.equalsIgnoreCase((String) session.getAttribute("checkcode") )) {
            session.removeAttribute("checkcode");//刪除驗證碼，每個驗證碼只允許使用一次
            req.setAttribute("update_msg", "驗證碼輸入有誤！");
            req.setAttribute("beforeUser", user);
            req.getRequestDispatcher("/update.jsp").forward(req, resp);
            return;
        } else {
            UserService us = new UserServiceImp();
            us.updateUser(beforeId,user);
            session.removeAttribute("checkcode");
            req.setAttribute("updatesuccess_msg","恭喜您，賬號信息修改成功！請重新登錄！");
            req.getRequestDispatcher("/login.jsp").forward(req, resp);
        }

    }
}

UserServiceImp類中添加方法：

   @Override
    public boolean updateUser(String _beforeId, User user) {
        int beforeId = Integer.parseInt(_beforeId);
        UserDao ud = new UserDaoImp();
        return ud.updateUser(beforeId,user);
    }

    @Override
    public User findByUserId(String id) {

        UserDao ud = new UserDaoImp();
        return ud.findByUserId(Integer.parseInt(id));
    }

UserDaoImpl類中添加方法：

   @Override
    public boolean updateUser(int beforeId, User user) {

        try {
            String sql = "update user set username = ? , password = ? , nickname = ? , sex = ? , birthday = ?" +
                    " , phone = ? , email = ? , address = ? , occupation = ? , describes = ? where id = ?";
            JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDateSource());
            jdbcTemplate.update(sql, user.getUsername(), user.getPassword(), user.getNickname(), user.getSex(), user.getBirthday(),
                    user.getPhone(), user.getEmail(), user.getAddress(), user.getOccupation(), user.getDescribes(), beforeId);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }

    @Override
    public User findByUserId(int id) {
        String sql = "select * from user where id = ?";
        JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDateSource());
        return jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);
    }

3. JSP頁面設計

修改用戶信息的JSP頁面和註冊用戶的JSP頁面類似，主要完成用戶信息的回顯操作。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改您的用戶信息</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]-->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <!--[endif]-->

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">


    <style>

        body {

            background-image: url("assets/img/backgrounds/2.jpg");
        }

    </style>


</head>

<body>

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>修改您的用戶信息</h3>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <form role="form" action="${pageContext.request.contextPath}/updateUserServlet" method="post"
                              class="login-form">
                                <input type="hidden" name = "beforeId" value="${beforeUser.id}">
                            <div class="form-group">
                                <label class="sr-only">Username</label>
                                <input type="text" name="username" placeholder="用戶名(必填)..." value="${beforeUser.username}"
                                       class="form-username form-control" id="username">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Password</label>
                                <input type="password" name="password" placeholder="密碼(必填)..."
                                       class="form-password form-control" id="password">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Repassword</label>
                                <input type="password" name="repassword" placeholder="再次輸入密碼(必填)..."
                                       class="form-password form-control" id="repassword">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" name="email" placeholder="郵箱(必填)..." value="${beforeUser.email}"
                                       class="form-username form-control" id="email">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">手機號</label>
                                <input type="text" name="phone" placeholder="手機號(必填)..." value="${beforeUser.phone}"
                                       class="form-username form-control" id="phone">
                            </div>


                            <div class="form-group">
                                <label class="sr-only">暱稱</label>
                                <input type="text" name="nickname" placeholder="暱稱..." value="${beforeUser.nickname}"
                                       id="nickname" style="height: 50px;width: 100%">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">性別</label>
                                <select class="form-control" name="sex" id="sex"
                                        style="height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                    <option <c:if test="${beforeUser.sex == '男'}">selected</c:if>>男</option>
                                    <option <c:if test="${beforeUser.sex == '女'}">selected</c:if>>女</option>
                                </select>
                            </div>

                            <div class="form-group"
                                 style="width: 40%;float: left;height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                <p style="font-size: medium;font-weight: normal;margin-top: 8px;margin-left: 20px;">
                                    生日...</p>
                            </div>
                            <div style="width: 50%;height:50px;float: left;margin-left: 5%">
                                <input type="date" name="birthday" id="birthday" value="${beforeUser.birthday}"
                                       style="border: solid #d5d5d5;height: 50px;background-color: #FFFAFA;text-align: center">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">所在省份</label>
                                <select class="form-control" name="address" id="address"
                                        style="height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                    <option <c:if test="${beforeUser.address == '北京'}">selected</c:if>>北京</option>
                                    <option <c:if test="${beforeUser.address == '天津'}">selected</c:if>>天津</option>
                                    <option <c:if test="${beforeUser.address == '河北'}">selected</c:if>>河北</option>
                                    <option <c:if test="${beforeUser.address == '山西'}">selected</c:if>>山西</option>
                                    <option <c:if test="${beforeUser.address == '內蒙古'}">selected</c:if>>內蒙古</option>
                                    <option <c:if test="${beforeUser.address == '遼寧'}">selected</c:if>>遼寧</option>
                                    <option <c:if test="${beforeUser.address == '吉林'}">selected</c:if>>吉林</option>
                                    <option <c:if test="${beforeUser.address == '黑龍江'}">selected</c:if>>黑龍江</option>
                                    <option <c:if test="${beforeUser.address == '上海'}">selected</c:if>>上海</option>
                                    <option <c:if test="${beforeUser.address == '江蘇'}">selected</c:if>>江蘇</option>
                                    <option <c:if test="${beforeUser.address == '浙江'}">selected</c:if>>浙江</option>
                                    <option <c:if test="${beforeUser.address == '安徽'}">selected</c:if>>安徽</option>
                                    <option <c:if test="${beforeUser.address == '福建'}">selected</c:if>>福建</option>
                                    <option <c:if test="${beforeUser.address == '江西'}">selected</c:if>>江西</option>
                                    <option <c:if test="${beforeUser.address == '山東'}">selected</c:if>>山東</option>
                                    <option <c:if test="${beforeUser.address == '河南'}">selected</c:if>>河南</option>
                                    <option <c:if test="${beforeUser.address == '湖北'}">selected</c:if>>湖北</option>
                                    <option <c:if test="${beforeUser.address == '湖南'}">selected</c:if>>湖南</option>
                                    <option <c:if test="${beforeUser.address == '廣東'}">selected</c:if>>廣東</option>
                                    <option <c:if test="${beforeUser.address == '廣西'}">selected</c:if>>廣西</option>
                                    <option <c:if test="${beforeUser.address == '海南'}">selected</c:if>>海南</option>
                                    <option <c:if test="${beforeUser.address == '重慶'}">selected</c:if>>重慶</option>
                                    <option <c:if test="${beforeUser.address == '四川'}">selected</c:if>>四川</option>
                                    <option <c:if test="${beforeUser.address == '貴州'}">selected</c:if>>貴州</option>
                                    <option <c:if test="${beforeUser.address == '雲南'}">selected</c:if>>雲南</option>
                                    <option <c:if test="${beforeUser.address == '西藏'}">selected</c:if>>西藏</option>
                                    <option <c:if test="${beforeUser.address == '陝西'}">selected</c:if>>陝西</option>
                                    <option <c:if test="${beforeUser.address == '甘肅'}">selected</c:if>>甘肅</option>
                                    <option <c:if test="${beforeUser.address == '青海'}">selected</c:if>>青海</option>
                                    <option <c:if test="${beforeUser.address == '寧夏'}">selected</c:if>>寧夏</option>
                                    <option <c:if test="${beforeUser.address == '新疆'}">selected</c:if>>新疆</option>
                                    <option <c:if test="${beforeUser.address == '港澳臺'}">selected</c:if>>港澳臺</option>

                                </select>
                            </div>

                            <div class="form-group">
                                <label class="sr-only">職業</label>
                                <input type="text" name="occupation" placeholder="職業..." value="${beforeUser.occupation}"
                                       style="height: 50px;width: 100%" id="occupation">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">個人說明</label>
                                <textarea style="width: 100%" name="describes" placeholder="個人說明..." rows="3"
                                          id="describes">${beforeUser.describes}
                                </textarea>
                            </div>


                            <div class="form-group" style="width: 60%;float: left">
                                <label class="sr-only">驗證碼</label>
                                <input type="text" name="checkcode" placeholder="驗證碼(必填)..."
                                       class="form-username form-control" id="checkcode">
                            </div>

                            <div style="width: 30%;height:50px;float: left;border: solid #d5d5d5;margin-left: 5%">
                                <img src="${pageContext.request.contextPath}/checkCodeServlet" id="checkImage"
                                     style="width: 100%;height: 100%" onclick="changeCheckImage()">
                            </div>

                            <button type="submit" class="btn" id="btn">修改</button>

                        </form>

                    </div>
                </div>
            </div>
            <div class="row"><p style="color: red">${pageContext.request.getAttribute("update_msg")}</p></div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 social-login">
                    <h3>...or login with:</h3>
                    <div class="social-login-buttons">
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-facebook"></i> Facebook
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-twitter"></i> Twitter
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-google-plus"></i> Google Plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <p>Create By BOOM : [email protected]</p>
</div>

<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>


<script>

    function checkUsernaem(username) {
        var flag = true;
        if (username.length == 0) {
            alert("用戶名不能爲空！");
            flag = false;
            return flag;
        }
        var regexp = /^[a-zA-Z]{6,20}/;
        if (!regexp.test(username)) {
            alert("非法的用戶名！");
            flag = false
        }
        return flag;
    }

    function checkPassword(password, repassword) {
        var flag = true;
        if (password.length == 0) {
            alert("密碼不能爲空！");
            flag = false;
            return flag;
        }
        if (!(password.length >= 6 && password.length <= 20)) {
            alert("密碼必須是6-20位的字符！");
            flag = false;
        }
        if (password == username) {
            alert("密碼不能和賬號一樣！");
            flag = false;
        }

        if (password != repassword) {
            alert("兩次輸入的密碼不一致！");
            flag = false;
        }

        return flag;
    }

    function checkEmail(email) {
        var flag = true;
        if (email.length == 0) {
            alert("郵箱不能爲空！");
            flag = false;
            return flag;
        }

        if (email.indexOf("@") == -1) {
            alert("非法的郵箱地址！");
            flag = false;
        }

        return flag;
    }

    function checkPhone(phone) {
        var flag = true;
        if (phone.length == 0) {
            alert("手機號不能爲空！");
            flag = false;
            return flag;
        }
        var phoneNumReg = /^1[3456789]\d{9}$/;
        if (!phoneNumReg.test(phone)) {
            alert("非法的手機號！");
            flag = false;
        }
        return flag;
    }

    function checkCode(checkcode) {
        var flag = true;
        if (checkcode.length == 0) {
            alert("驗證碼不能爲空！");
            flag = false;
            return flag;
        }
        return flag;
    }


    function check() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        var email = document.getElementById("email").value;
        var phone = document.getElementById("phone").value;
        var checkcode = document.getElementById("checkcode").value;
        if (checkUsernaem(username) && checkPassword(password, repassword) && checkEmail(email) && checkPhone(phone) && checkCode(checkcode)) {
            return true;
        } else {
            return false;
        }
    }

    var submit = document.getElementById("btn").onclick = function (ev) {
        return check();
    }

    //鼠標點擊切換驗證碼
    function changeCheckImage() {
        var checkImage = document.getElementById("checkImage");
        var date = new Date();
        var time = date.getTime();
        checkImage.setAttribute("src", "${pageContext.request.contextPath}/checkCodeServlet?" + time);
    }

</script>


</body>

</html>

至此整個項目的增刪改查功能已經實現了。

反思

整個小項目雖然實現了CRUD，但其實存在很多不足之處：
1. 註冊時的界面設計不合理：註冊時應該力求簡潔，而補充信息可以放在用戶登錄後提醒用戶補充信息。
2. 註冊、修改用戶信息時沒有考慮到用戶名發生重複的情況，可能導致服務器錯誤。
3. 使用過程中很多細節不合理，這裏就不一一羅列了。
4. 沒有對訪問者權限控制。
既然存在這麼多的問題，那麼在以後的實踐中，我會更加註意這幾點，讓自己的項目變得更好。

------------------------------------------THE END---------------------------------------