SpringBoot +VUE后台管理登录+MD5加密验证

         今天带来一个比较简单 通俗易懂的登录验证

前端可以用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提交方式相对比较安全一米米