今天带来一个比较简单 通俗易懂的登录验证
前端可以用form表单或elementUI的组件实现
我用到的是elementUI 用v-model双向绑定并且提交后台处理验证
代码奉上
1、登录页面的input框和提交按钮
<el-input class="inputVa" style="margin-top: 30px;" v-model="loginForm.loginName" placeholder="请输入账号"></el-input>
<el-input class="inputVa" v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input><br>
<el-button type="primary" class="submitVa" @click="login">Login</el-button>
2、vue项目data
data () {
return {
loginForm: {
loginName: '',
password: ''
}
}
}
3、按钮提交方法
3.1、判断账号密码是否是默认值 '' 也就是判断用户是否输入了账号密码
3.2、通过返回值flag判断是否验证成功(是否允许登录)
3.3、如果验证成功后可以写一个编辑式路由实现跳转主页 this.$router.push('要跳转的路由地址')
login () { // 登录
if (this.loginForm.loginName === '' || this.loginForm.password === '') {
this.myMessage('error', '账号或密码不能为空')
} else {
this.$axios.post('你本地的方法地址例如(http://localhost:8083/UserController/login)', this.loginForm).then(res => {
debugger
if (res.data.flag) {
this.myMessage('success', '登录成功')
} else {
this.myMessage('error', '账号或密码错误')
}
}).catch(err => {
console.log(err)
})
}
},
},
myMessage (type, message) { // 弹窗提示
this.$message({
message: message,
type: type
})
},
4、Controller
/**
* 判断登录并返回token值
* @param userEntity
* @return
*/
@PostMapping("login")
public CommonResult login(@RequestBody UserEntity userEntity){
CommonResult commonResult = userService.login(userEntity);
return commonResult;
}
5、Entity实体
@Data
public class UserEntity {
@Id
private Integer id;//主键
private String loginName;//账户名称
private String password;//账户密码
}
6、ServiceImpl
/**
* 登录并生成token
* @param userEntity
* @return
*/
@Override
public CommonResult login(UserEntity userEntity) {
//前端传输密码加密
String md5pwd = MD5Util.getMD5(userEntity.getPassword());
//添加条件 通过loginName查询库中是否有此用户
Example example = new Example(UserEntity.class);
example.createCriteria().andEqualTo("loginName",userEntity.getLoginName());
UserEntity getByName = userMapper.selectOneByExample(example);
//如果查询到了此账号
if (getByName!=null){
//查询到的和用户输入的作比较
if (MD5Util.getMD5(userEntity.getPassword()).equals(getByName.getPassword())){
//成功返回
return CommonResult.ok();
}else{
return CommonResult.fail(505,"密码错误");
}
}else{
return CommonResult.fail(505,"账号不存在");
}
}
关于CommonResult 封装可以看一下上期发过
建议登录使用Post提交方式相对比较安全一米米