类似抖音的短视频管理系统+Java后端+vue前端(12)

实现登录功能,登录成功跳转首页,首页显示用户名

实现点击登录按钮弹出登录窗口

    $("#login").click(function () {
        //alert("123")
        //window.location.href = "/templates/login.html";
        layer.open({
            type:2,
            title:"登录",
            shade:0.5,  //窗口的外部阴影配置
            shareClose:true,    //点击外部窗口消失
            area:["50%","50%"],
            content:"/templates/login.html"

        })
    })

数据库层Mapper

    public Users selectUserByName(@Param("username") String username);
  <select id="selectUserByName" parameterType="java.lang.String" resultMap="BaseResultMap">
    select username, password
    from users
    where username = #{username,jdbcType=VARCHAR}
  </select>

业务层UserService

    Result login(String username, String password, String code, HttpServletRequest request);

impl

    @Override
    public Result login(String username, String password, String code, HttpServletRequest request) {
        Result result = new Result();
        //获取验证码
        String code1 = (String) request.getSession().getAttribute("code");
        //验证码进行匹配,匹配的时候忽略大小写
        if (!code1.equalsIgnoreCase(code)){
            result.setMessage("验证码错误");
        }else {
            Users users = usersMapper.selectUserByName(username);
            if (users == null || !users.getPassword().equals(password)){
                result.setMessage("用户名或密码错误");
            }else {
                //符合条件
                request.getSession().setAttribute("user",users);
                result.setStatus(0);
                result.setMessage("ok");
            }
        }
        return result;
    }

控制层Controller

    @RequestMapping("/home/login")
    @ResponseBody
    public Result login (String username, String password, String code, HttpServletRequest request){
        System.out.println(username+"========="+password+"========="+code);
        Result result = userService.login(username,password,code,request);
        return result;
    }

回调函数,得到后台返回的值

            //回调函数,得到回台返回的值
            success:function (res){
                if (res.message == "ok"){
                    //登录成功跳转主页面
                    //window.location.href = "/"
                    window.parent.location.reload()
                }
                else {
                    layer.alert(res.message)
                }
            }