黑马旅游网编写练习（3)--登录和退出功能

黑马旅游网编写练习（3)–登录和退出功能

完成用户的注册和邮箱激活功能之后，接下来进行登录功能的编写。
分析：
当用户在登陆界面输入用户名，密码以及验证码后，点击登录按钮；我们让其发送Ajax请求；servlet接收到该请求后，调用service层进行用户的查询，若该用户名和密码均正确，并且已经激活，则可以登录，我们将该用户保存在服务器的session中；否则，在登陆界面给出错误提示。

实现步骤总览

后台登录功能
前端登录信息的校验，错误提示
登陆成功后，在页面中添加用户人的姓名展示
退出功能

1. 后台登录功能

前台通过Ajax的方式访问此servlet，其中封装了用户名，密码以及验证码信息。我们通过这些信息完成登录功能，并返回json数据给前端。LoginServlet的主要代码如下：

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 接收验证码String check = request.getParameter("check");// 获取session域中的验证码信息HttpSession session = request.getSession();String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");// 获取完毕即刻清除session域中的验证码信息，以保证一次性使用session.removeAttribute("CHECKCODE_SERVER");ResultInfo info =new ResultInfo();ObjectMapper mapper = new ObjectMapper();// 判断输入的验证码是否正确if(!("".equals(check)) && check.equalsIgnoreCase(checkcode_server)){// 验证码正确System.out.println("The CheckCode input correct");}else{// 验证码输入错误System.out.println("The CheckCode input Errors");// 封装错误信息info.setFlag(false);//info.setData("checkcode");info.setErrorMsg("The CheckCode input Errors!");// 序列化info为jsonString json = mapper.writeValueAsString(info);System.out.println("From LoginServlet:--"+json);// 将json数据发送给客户端response.setContentType("application/json;charset=utf-8");response.getWriter().write(json);return;}// 接收用户信息Map<String, String[]> map = request.getParameterMap();// 封装数据到user对象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 u = service.login(user);// 判断是否登录成功if(u == null){// 登录失败，用户名或密码错误System.out.println("Login failed!, Username or Password Error!");info.setFlag(false);info.setErrorMsg("Login failed!, Username or Password Error!");}else if(u != null && "N".equals(u.getStatus())){// 登陆失败，用户未激活System.out.println("Login failed!, User have No Active!");info.setFlag(false);info.setErrorMsg("Login failed!, User have No Active!");}else if(u != null && "Y".equals(u.getStatus())){// 登陆成功session.setAttribute("user",u);System.out.println("Login succeed!");info.setFlag(true);}// 序列化info为jsonString json = mapper.writeValueAsString(info);System.out.println("From LoginServlet:--"+json);// 将json数据发送给客户端response.setContentType("application/json;charset=utf-8");response.getWriter().write(json);}

其中service层的登录方法为：

    /*** 通过用户名和密码登录，登陆成功返回user* @param user* @return*/@Overridepublic User login(User user) {String username = user.getUsername();String password = user.getPassword();return dao.findUserByUsernameAndPassword(username,password);}

其中dao层通过用户名和密码查询用户方法为：

    /*** 通过用户名和密码查询用户，若存在，返回User* @param username* @param password* @return*/@Overridepublic User findUserByUsernameAndPassword(String username, String password) {User user = null;// 定义sqlString sql = "select * from tab_user where username = ? and password = ? ";try {// 执行sqluser = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username,password);} catch (DataAccessException e) {//e.printStackTrace();    //未找到该用户System.out.println("dao:--No User find by username and password");}return user;}

2. 前端登录信息的校验，错误提示

前面已经编写完毕后端的登录功能，并响应给前台json数据；接下来便是完成前台的登录实现；主要分为两个功能

为各输入框添加失去焦点事件，一旦失去焦点就进行正则校验；
点击登录按钮后对各输入框进行校验，只有校验合格才发送Ajax请求
发送Ajax请求

为各输入框添加信息校验的方法与之前注册页面的校验一样，代码如下：

    //用户名校验函数function checkUsername() {// 获取用户名var username = $("#username").val();// 定义用户名正则var reg_username = /.+/;var flag = reg_username.test(username);if(flag){// 用户名非空$("#username").css("border","");$("#errorMsg").html("");}else{// 用户名为空$("#username").css("border","1px solid red");$("#errorMsg").html("请输入用户名");}return flag;}//密码校验函数function checkPassword() {// 获取密码var password = $("#password").val();// 定义密码正则var reg_password =  /^\w{6,20}$/;var flag = reg_password.test(password);if(flag){// 密码非空$("#password").css("border","");$("#errorMsg").html("");}else{// 密码为空$("#password").css("border","1px solid red");$("#errorMsg").html("密码必须是6-20位的字母，数字或下划线");}return flag;}

然后为输入框添加失去焦点事件，当用户名和密码校验通过后，提交表单

    $(function () {$("#login_sub").click(function () {// 仅当用户名和密码校验均通过后，才提交Ajax请求if(checkUsername() && checkUsername()){$.post("loginServlet",$("#loginForm").serialize(),function (data) {if(data.flag){// 登陆成功location.href="index.html";}else{//登陆失败$("#errorMsg").html(data.errorMsg);}});}});// 为各输入框添加失去焦点事件$("#username").blur(checkUsername);$("#password").blur(checkPassword);});

3. 登陆成功后，在页面中添加用户人的姓名展示

登陆成功后默认提示的是：欢迎回来，admin
期望得到的效果是与登录用户的姓名进行绑定，不同用户登录会显示不同用户的姓名。
如果使用的是jsp页面进行展示，则可以直接从服务器获取登录用户user的信息，但是****此处使用的是html页面进行展示，****所以可以当index.html加载完成后，自动向服务器发送一个Ajax请求，获取当前登录用户的姓名。
新建一个servlet，其内容如下：

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 获取session域中的user对象HttpSession session = request.getSession();User user = (User) session.getAttribute("user");// 将user进行json序列化，并返回客户端response.setContentType("application/json;charset=utf-8");ObjectMapper mapper = new ObjectMapper();mapper.writeValue(response.getOutputStream(),user);}

然后在展示登陆提示的div页面块中，添加一个发送Ajax请求函数。

    <script>$(function () {$.post("helloServlet",{},function (data) {$("#log_span").html("欢迎回来，"+data.name);});});</script>

4. 退出功能

退出功能与登录功能相对应。登陆成功后，会将user对象保存在session域中；退出只需要将其销毁即可。
所以只需要在点击退出按钮是，访问servlet将session域中的user销毁，然后返回到登陆页面即可。
首先为退出按钮添加跳转：

     <a href="javascript:location.href='exitServlet';">退出</a>

然后编写退出servlet

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取session并销毁session域中数据request.getSession().invalidate();// 重定向到登陆页面response.sendRedirect(request.getContextPath()+"/login.html");}

至此，已完成了用户的注册，登录，以及退出的相关功能；接下来将会对旅游网页面的展示数据进行处理。