小确幸BBS论坛-5-修改资料

最新推荐文章于 2021-10-26 14:53:58 发布

那起舞的日子

最新推荐文章于 2021-10-26 14:53:58 发布

阅读量8.9k

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/meiceatcsdn/article/details/79058048

版权

Java 专栏收录该内容

131 篇文章 3 订阅

订阅专栏

话说：

各位读者朋友！下午好！今天把bbs论坛最后一个主要板块发表下！
难度系数：★☆☆☆☆
实际用时:2H 建议用时:1H
目录

1、效果图
2.、后台代码
3、前端页面
4、前端JS验证
5、总结
6、下期预告

1、效果图

这里写图片描述

2.、后台代码

以下是是代码布局：

这里写图片描述

1）文件上传-UpdatePortraitServlet
2）修改昵称-UpdateUserNickServlet
3）修改密码-UpdatePasswordServlet

整体很简单！文件上传需要注意下路径！一会细说，其他修改调用Cud()方法即可！
1）文件上传-UpdatePortraitServlet

package com.hmc.controller;
import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.hmc.pojo.User;
import com.hmc.service.UserRegisterServiceImpl;




/**
*
*2018年1月13日
*User:Meice
*上午11:22:07
*/
public class UpdatePortraitServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("文件上传进来了..");
        //得到当前用户Id，便于修改头像路径
        User user =(User)   req.getSession().getAttribute("user");
        int userId =    user.getUserId();




        //1.接收文件
        boolean isFileForm = ServletFileUpload.isMultipartContent(req);
        if(isFileForm) {
            System.out.println("是文件文件上传form表单");
            ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
            try {
                List<FileItem> list =   servletFileUpload.parseRequest(req);
                for(FileItem item:list ) {
                    if(!item.isFormField()) {
                        System.out.println("循环遍历进来了...");
                        System.out.println("req.getScheme():"+req.getScheme()+"    req.getServerName():"+req.getServerName()+"     req.getServerPort():"+req.getServerPort());
                        System.out.println("item.getName    "+item.getName());// 100.png
                        String path = "F:\\img";
                        File file = new File(path);
                        String fileName = item.getName();
                        String path2 = file + "/"+fileName;
                        File storeFile = new File(path2);
                        item.write(storeFile);
                        req.getSession().setAttribute("fileName", fileName);


                        //这里要把路径存放到数据库:
                    String sql = "update user set fileName = ? where userId = ?";
                    Object[] params = {fileName,userId};
                    int a = new UserRegisterServiceImpl().Cud(sql,params);
                    if(a>0) {
                        //修改现在session中user属性fileName,否则不会及时刷新，只有重新登录在刷新！
                        user.setFileName(fileName);
                        System.out.println("头像修改成功！");

                    }else {
                        System.out.println("头像修改失败！");

                    }



                    }

                }
                req.getRequestDispatcher("editUserInfo.jsp").forward(req, resp);

            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }



        }

        //2.调用方法
    }
}

小结：

文件上传四步走：
1.form表单
enctype=”multipart/form-data”
2.导包
commons-fileupload-1.3.2.jar commons-io-2.5.jar
3.写Servlet
核心：ServletFileUpload对象
步骤：1)判断表单是否是文件上传表单类型：ServletFileUpload.isMultipartContent(req);
2)创建ServletFileUpload对象:new ServletFileUpload(new DiskFileItemFactory());
3）调用servletFileUpload.parseRequest(req);得到一个List list集合。
4)判断此文件上传类型表单中的表单项是否是文件上传项：是的话，在在遍历（因为可能有多个文件）
这里一定要注意！if(!item.isFormField()) 这里的isFormField()表示是普通表单项；我们要对文件夹上传的表单项遍历，所以要用!item.isFormField()
5)得到上传文件名：item.getName();
6）创造路径：String path = “F:\img”; String path2 = file + “/”+fileName; File storeFile = new File(path2);
7）写入即可 item.write(storeFile);
8）把路径存放到数据库：String sql = “update user set fileName = ? where userId = ?”;
4.页面显示
注意，图片在服务器端，是无法通过绝对路径访问的，所以需要
<% String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort(); %>
得到上下文路径，然后：
/img/${user.fileName}”>
这里要特别注意路径问题：我们没有用虚拟路径，是因为虚拟路径上传后，代码一旦变动，临时创建的文件夹就会自动消失，图片找不到！所以在写死路径之前，要这么操作下：

这里写图片描述

也没什么特别的，就相当于给本项目路径下部署了个存放图片的位置，这个位置在本地磁盘，而不是在本项目下；

2）修改昵称-UpdateUserNickServlet

package com.hmc.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hmc.pojo.User;
import com.hmc.service.UserRegisterServiceImpl;

/**
*
*2018年1月14日
*User:Meice
*上午11:33:16
*/
public class UpdateUserNickServlet  extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        //1.接收参数 userId  userNick sex
        User user = (User)req.getSession().getAttribute("user");
        int userId = user.getUserId();
        String userNick =   req.getParameter("userNick");
        String sex =    req.getParameter("sex");
        System.out.println("修改后的昵称:"+userNick+"修改后的性别:"+sex);

        System.out.println("修改用户昵称进来了！");
        //2.调用方法
        String sql = "update user set userNick = ?,sex = ? where userId = ?";
        Object[] params = {userNick,sex,userId};
        int result = new UserRegisterServiceImpl().Cud(sql, params);
        if(result>0) {
            System.out.println("修改昵称成功！");
            user.setUserNick(userNick);
            user.setSex(sex);


            resp.getWriter().write("<script type='text/javascript'>alert('恭喜您！修改昵称成功！');window.location.href='editUserInfo.jsp';</script>");
        }else {
            resp.getWriter().write("<script type='text/javascript'>alert('遗憾，修改失败！');window.location.href='editUserInfo.jsp';</script>");
        }

        //3.跳转页面
        //req.getRequestDispatcher("editUserInfo.jsp").forward(req, resp);


    }
}

3）修改密码-UpdatePasswordServlet

package com.hmc.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hmc.pojo.User;
import com.hmc.service.UserRegisterServiceImpl;

/**
*
*2018年1月14日
*User:Meice
*上午11:50:40
*/
public class UpdatePasswordServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        //1.接收参数  userId password
        User user =(User)   req.getSession().getAttribute("user");
        int userId = user.getUserId();
        System.out.println("修改用户密码进来了....");

        String password =   req.getParameter("newPassword");
        //2.调用方法
        String sql = "update user set password = ? where userId = ?";
        Object[] params = {password,userId};
        int result = new UserRegisterServiceImpl().Cud(sql, params);
        if(result>0) {
            System.out.println("修改密码成功！");
            user.setPassword(password);
            resp.getWriter().write("<script type='text/javascript'> alert( '恭喜，修改密码成功！');window.location.href='editUserInfo.jsp';  </script>");
        }else {
            resp.getWriter().write("<script type='text/javascript'> alert( '遗憾，修改密码失败！');window.location.href='editUserInfo.jsp'; </script>");
        }


        //3.跳转页面
        //req.getRequestDispatcher("editUserInfo.jsp").forward(req, resp);
    }
}

3. 前端页面
editUserInfo

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!--Author:Meice 2018年1月13日下午7:21:30 -->
<!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>小确幸论坛-修改个人资料</title>

<!--引入登录信息样式  -->
<link href="css/textList.css" rel="stylesheet" type="text/css">
<link href="css/userinfo.css" rel="stylesheet" type="text/css">


<style type="text/css">
/* 调整修改资料样式 */
#changeInfo{
    /* border:1px solid red; */
    width:800px;
    height:1100px;
    float:right;


}

#changePic,#changeUserNick,#changePassword{
    margin-left: 150px;

}

/*  设置提交按钮样式*/
.mySubmit{
    width: 250px;
    height: 40px;
    background-color: green;color:white;
}

.myInput{
    width: 250px;
    height: 35px;

}

/*  底部公司信息灰色显示*/
.changeGray{
    color:gray;
}

</style>


<!-- 引入外部JS验证 -->
<script src="js/editUserNick.js"></script>
<script src="js/editPassword.js"></script>


</head>
<body>


<% String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort(); %>
    <!--引入头部  -->
    <jsp:include page="head.jsp"></jsp:include>

        <!--登录后用户信息  -->
        <div id="userInfo">
            <a href="textShow" class="userInfo">首页</a>
            <span class="userInfo">欢迎【${user.userNick}】!</span><br/>
            <a href="userInfo" class="addText" style="color:orange;">返回个人中心</a>
            <a href="textShow" class="login.jsp">退出</a>
        </div>



        <!--个人资料  -->
        <div id="myInfo" style="width: 300px;margin-left:100px;">
            <img src="<%=basePath%>/img/${user.fileName}" style="width:180px;height:200px;"><br/>
            <span style="padding-left:65px;">性别：&nbsp;&nbsp;${user.sex }</span><br/>
            <span>最新登录时间:&nbsp;&nbsp;${user.loginTime }</span><br/>
            <span>注&nbsp;&nbsp;册&nbsp;&nbsp;时&nbsp;&nbsp;间:&nbsp;&nbsp;${user.registerTime}</span><br/>
        </div>



        <div id="changeInfo" style="margin: -270px 250px 10px 10px;">
            <div id="changePic">
                <br/>
                头像修改
                <br/><br/>
                <hr/>
                <form action="updatePortrait" method="post" enctype="multipart/form-data"> 
                    <table  cellspacing="30px">
                        <tr>
                            <td>    
                                <img src="<%=basePath%>/img/${user.fileName}" alt="图片去月球了！" style="width:180px;height:200px;">
                            </td>

                            <td>
                                <input type="file" name="file" class="myInput">
                            </td>


                        </tr>

                        <tr>
                            <td colspan="2">
                                <input type="submit" value="确认修改" class="mySubmit">
                            </td>
                        </tr>

                    </table>

                </form>

            </div>


            <div id="changeUserNick">
                <br/>
                <span>信息修改</span>
                <br/><br/>
                <hr/>


                <form name="userNickForm"    action="updateUserNick" method="get" onsubmit=" return checkUpdateUserNickForm()">
                    <table cellspacing="30px">
                        <tr>
                            <td colspan="2">
                                <span id="userNickInfo" style="font-size:15px;font-weight:bolder;color:red"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>昵称:</td>
                            <td>
                                <input type="text" name="userNick" class="myInput">
                            </td>

                        </tr>

                        <tr>
                            <td>性别:</td>
                            <td>
                                男&nbsp;&nbsp;<input type="radio" name="sex"  value="男" style="width:20px;height:20px;">
                                女&nbsp;&nbsp;<input type="radio" name="sex" value="女" style="width:20px;height:20px;">
                            </td>

                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="确认修改" class="mySubmit">
                            </td>
                        </tr>

                    </table>

                </form>
            </div>






            <div id="changePassword">
                <br/>
                <span>密码修改</span>
                <br/><br/>
                <hr/>
                <form  name="passwordForm"  action="updatePassword" method="get" onsubmit="return checkPasswordForm('${user.password}')">
                    <table cellspacing="30px">
                    <tr>
                        <td id="pwdInfo" style="font-size:15px;font-weight:bolder;color:red" colspan="2"></td>
                    </tr>
                        <tr>
                            <td>原密码</td>
                            <td>
                                <input type="password" name="oldPassword" class="myInput">
                            </td>

                        </tr>

                        <tr>
                            <td>新密码</td>
                            <td>
                                <input type="password" name="newPassword" class="myInput">
                            </td>
                        </tr>


                        <tr>
                            <td>确认新密码</td>
                            <td>
                                <input type="password" name="reNewPwd" class="myInput">
                            </td>
                        </tr>

                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="确认修改" class="mySubmit">
                            </td>
                        </tr>

                    </table>

                </form>
            </div>


            <div id="footContent" style="text-align: center;color: gray;">
                <span ><a href="#" class="changeGray">首页</a> | <a href="#" class="changeGray">关于我们</a>| <a href="#" class="changeGray">联系我们</a></span><br/>
                <span>&copy2018 小确幸论坛  Xiao Quexing Forum  陕ICP证0035246号 陕公安备 10225225522415号</span>
            </div>
            <p style="width=""10px;"></p>
        </div>







    <!--引入尾部  -->
    <%-- <jsp:include  page="foot.jsp"></jsp:include> --%>



</body>
</html>

4. 前端JS验证
1.验证昵称-editUserNick.js
2.验证密码-editPassword.js

1.验证昵称-editUserNick.js

function    checkUpdateUserNickForm (){
    //获取表单对象
    var myForm = document.userNickForm;
    //获取用户昵称及性别的值
    var userNick = myForm.userNick.value;
    var sex = myForm.sex.value;


    //获取提示信息对象
    var uInfo = document.getElementById("userNickInfo");
    if(userNick == "") {
        uInfo.innerHTML = "请输入修改后【用户昵称】~";
        myForm.userNick.focus();
        return false;
    }else if(userNick != "") {
        if(sex == "") {
            uInfo.innerHTML = "请选择【性别】";
            return false;
        }else if(sex != ""){
            return true;
        }

    }
    return false;

}

2.验证密码-editPassword.js

function checkPasswordForm(str) {
    var myForm = document.passwordForm;
    var oldPassword = myForm.oldPassword.value;
    var newPassword = myForm.newPassword.value;
    var reNewPwd = myForm.reNewPwd.value;
    //alert(str);

    //获取修改密码提示对象
    var pwdInfo = document.getElementById("pwdInfo");

    if(oldPassword == "") {
        pwdInfo.innerHTML = "请输入【原密码】:";
        myForm.oldPassword.focus();
        return false;
    }else if(oldPassword != "") {
        if(oldPassword != str){
            pwdInfo.innerHTML = "【原密码】输入有误！:";
        }else if(oldPassword == str) {

            if(newPassword == "") {
                pwdInfo.innerHTML = "请输入【新密码】:";
                myForm.newPassword.focus();
                return false;
            }else if(newPassword != "") {

                if(oldPassword == newPassword) {
                    pwdInfo.innerHTML = "原密码与新密码相同！";
                    myForm.newPassword.focus();
                    return false;
                } else  if(oldPassword != newPassword) {
                    if(reNewPwd == "") {
                        pwdInfo.innerHTML = "请输入确认密码！";
                        myForm.reNewPwd.focus();
                        return false;
                    }else if(reNewPwd != "") {
                        if(reNewPwd != newPassword) {
                            pwdInfo.innerHTML = "新密码前后输入不一致！";
                            myForm.reNewPwd.focus();
                            return false;
                        }else if(reNewPwd == newPassword){
                            return true;
                        }
                    }
                    return false;
                }

            }
        }
    }



    return false;
}

小结：
1、这里主要用到了判断原密码是否和session里面相同，在方法里面传参了。
2.遇到很妖精的问题：如果你发现JS前端验证的时候，有个元素获取内容总是失败，很可能是name取名有问题，比如：confirmPassword 这个就是不行，获取不到！更换一下名字试一试！搞定！

5. 总结
至此为止，我们BBS小确幸论坛主体功能全部完成！我们连载了5篇博客：
分别是：
小确幸BBS论坛-1-前期准备
小确幸BBS论坛-2-首页
小确幸BBS论坛-3-个人中心
小确幸BBS论坛-4-帖子详情及评论
小确幸BBS论坛-5-修改资料
这个过程我们一直坚守：手动写页面，手动多敲代码的原则，接下来，我们将优化和总结。有优化的细节非常之多，所以单独做一篇！

6. 下期预告

下一篇是优化~敬请期待与斧正！