类似抖音的短视频管理系统+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)
}
}