java后端-强哥带你写旅游网-04登录退出功能的实现

 

登录实现的逻辑

前端代码实现

给登录按钮添加id btn_sub

js处理登录逻辑

loginServlet的实现

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1.获取用户名和密码数据
    Map map = request.getParameterMap();
    //2.封装User对象
    User user = new User();
    try {
        BeanUtils.populate(user,map);
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (InvocationTargetException e) {
        e.printStackTrace();
    }

    //3.调用Service查询
    UserService service = new UserServiceImpl();
    User u  = service.login(user);

    ResultInfo info = new ResultInfo();

    //4.判断用户对象是否为null
    if(u == null){
        //用户名密码或错误
        info.setFlag(false);
        info.setErrorMsg("用户名密码或错误");
    }
    //5.判断用户是否激活
    if(u != null && !"Y".equals(u.getStatus())){
        //用户尚未激活
        info.setFlag(false);
        info.setErrorMsg("您尚未激活，请激活");
    }
    //6.判断登录成功
    if(u != null && "Y".equals(u.getStatus())){
        request.getSession().setAttribute("user",u);//登录成功标记

        //登录成功
        info.setFlag(true);
    }

    //响应数据
    ObjectMapper mapper = new ObjectMapper();

    response.setContentType("application/json;charset=utf-8");
    mapper.writeValue(response.getOutputStream(),info);

}

在前端显示登录后的用户名

当前页面的用户是一个写死的值，此时应该要显示登录后的用户名

当前页面是index.html，先分析index.html的结构，它的头部和尾部是通过js添加进来的。

头部效果如下，它的实现在header.html

尾部效果如下，它的实现在footer.html

我们要修改的用户名，就是在header.html,因此，我只需在header.html中通过ajax获取服务器上的用户名，然后将用户设置到header.xml对应的元素上就行了，代码实现如下

$(function () {
    $.get("findUserServlet",{},function (data) {
        //{uid:1,name:'李四'}
        var msg = "欢迎回来，"+data.name;
        $("#span_username").html(msg);

    });
});

后端代码findUserServlet的实现

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //从session中获取登录用户
    Object user = request.getSession().getAttribute("user");
    //将user写回客户端

    ObjectMapper mapper = new ObjectMapper();
    response.setContentType("application/json;charset=utf-8");
    mapper.writeValue(response.getOutputStream(),user);


}

登录成功后，发现用户名还是未改变

一番查找，原来是我忘记在此处加上id

那么加上id，就好了

退出登录的实现

退出登录，只需将用户信息从Session中移除即可,然后跳转到登录页面即可

前端先更改一下退出链接

退出

后端代码实现exitServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1.销毁session
    request.getSession().invalidate();

    //2.跳转登录页面
    response.sendRedirect(request.getContextPath()+"/login.html");
}

项目地址https://gitee.com/cxyhq2020/Mytravel.git