javaweb案例一

---

一、登录界面

图片：

1.前端代码

• 改造验证码

<img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>

• 点击验证码刷新
  加new Date().getTime()的原因在于，时间不重复，因此更新验证就不会重复。

<script type="text/javascript">
        //切换验证码
        function refreshCode(){
     
            //1.获取验证码图片对象
            var vcode = document.getElementById("vcode");

            //2.设置其src属性，加时间戳
            vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
        }
    </script>
<a href="javascript:refreshCode();">

• 提交表单

<form action="${pageContext.request.contextPath}/loginServlet" method="post">

• 出错显示的信息框

 <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" >
            <span>&times;</span>
        </button>
        <strong>${login_msg}</strong>
        <!-- 对应后面的：request.setAttribute("login_msg","用户名或密码错误！"); -->
    </div>

2.后端代码

• 设置编码

request.setCharacterEncoding("utf-8");

• 获取用户填写验证码，getParameter()的参数是验证码栏的name字段

<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>

String verifycode = request.getParameter("verifycode");//得到的是页面获取的验证码

• 验证码校验
  checkCodeServlet里面，将生成的验证码存放在session中。

//将验证码放入HttpSession中
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);

equalsIgnoreCase()忽略大小写比较。

HttpSession session = request.getSession();
String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");//获取了生成的验证码
session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
        if(!checkcode_server.equalsIgnoreCase(verifycode)){
   
            //验证码不正确
            //提示信息
            request.setAttribute("login_msg","验证码错误！");
            //跳转登录页面
            request.getRequestDispatcher("/login.jsp").forward(request,response);

            return;
        }

注意：写到这里时，记得先验证是否正确。再进行下一步！！！！！
session.removeAttribute(“CHECKCODE_SERVER”);//确保验证码一次性，注意这一步！！！！

• 获取所有的数据（只有用户名和密码）

Map<String, String[]> map = request.getParameterMap();

• 封装User对象（参考request和reponse—常见问题）

  User user = new User();
        try {
   
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
   
            e.printStackTrace();
        } catch (InvocationTargetException e) {
   
            e.printStackTrace();
        }

• 调用Service查询

UserService service = new UserServiceImpl();
User loginUser = service.login(user);//查询我用户输入的账户是否存在

• 判断是否登录成功

		if(loginUser != null){
   
            //登录成功
            //将用户存入session
            session.setAttribute("user",loginUser);
            //跳转页面
            response.sendRedirect(request.getContextPath()+"/index.jsp");
        }else{
   
            //登录失败
            //提示信息
            request.setAttribute("login_msg","用户名或密码错误！");
            //跳转登录页面
            request.getRequestDispatcher("/login.jsp").forward(request,response);

        }

注意：request没有共享数据，因此，登录成功之后，进行重定向！！！
注意：数据库的表需创建，还有配置文件需配置！

二、添加功能

分析图：

1.前端代码

• 修改添加联系人的跳转页面路径

<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>

• 修改头信息

<center><h3>添加联系人页面</h3></center>
    <form action="${pageContext.request.contextPath}/addUserServlet" method="post">

注意要给表单加name，不然后端获取数据时，获取不了，为null！！！！

<input type="text" class="form-control