- 前端代码:
login(){
//获取表单对象之后进行数据校验
//valid 表示校验的结果 true表示通过 false表示失败
this.$refs.loginFormRef.validate(async valid => {
//如果没有完成校验则直接返回
if(!valid) return
//如果校验成功,则发起ajax请求
const {data: result} = await this.$http.post('/user/login',this.loginForm)
if(result.status !== 200) return this.$message.error("用户登录失败")
this.$message.success("用户登陆成功")
//获取用户token信息
let token = result.data
window.sessionStorage.setItem("token",token)
//用户登录成功之后,跳转到home页面
this.$router.push("/home")
})
}
- 后端代码
controller:
@PostMapping("/login")
public SysResult login(@RequestBody User u){
String token = userService.findUP(u);
if (token==null || "".equals(token)){
return SysResult.fail();
}
return SysResult.success(token);
}
VO层:
后端与前端进行数据交互的媒介
@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
public class SysResult {
private Integer status;
private String msg;
private Object data;
public static SysResult fail(){
return new SysResult(201, "调用失败", null);
}
public static SysResult success(){
return new SysResult(200, "调用成功", null);
}
public static SysResult success(Object data){
return new SysResult(200, "调用成功", data);
}
public static SysResult success(String msg,Object data){
return new SysResult(200, msg, data);
}
}
Service:
@Override
public String findUP(User u) {
byte[] bytes = u.getPassword().getBytes();
//对用户密码进行md5加密
String md5pwd = DigestUtils.md5DigestAsHex(bytes);
u.setPassword(md5pwd);
User byUP = userMapper.findByUP(u);
if (byUP==null){
return null;
}
//唯一性,迷惑性 UUID:几乎可以保证唯一性
return UUID.randomUUID().toString().replace("-", "");
}