vue+springboot+mybatis 实现简单的登录功能

vue+springboot+mybatis 实现简单的登录功能

PS：小白一个，刚开始接触springboot ，记录一下项目过程以及吾遇到的问题等，第一次写这个

登陆功能：用户输入账号和密码，点击提交按钮，将数据通过$axios.post发给后端，后端经过和数据库的验证，返回一个信息给前端，前端判断信息是否允许登录

前端vue：element的form表单组件，很简单，粘贴复制过来

<template>
  <div class="login" >
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm" >
      <p4>校园二手交易平台登录系统</p4>
      <el-form-item  label-width="300px" >
      </el-form-item>
      <el-form-item label="账号:" label-width="50px"  prop="pass">
        <el-input  clearable name="name" type="username" v-model.trim="ruleForm.pass" autocomplete="off" placeholder="请输入账号"  style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="密码:" label-width="50px" prop="checkPass">
        <el-input clearable name="word" type="password" v-model.trim="ruleForm.checkPass" autocomplete="off" placeholder="请输入密码" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label-width="95px">
        <el-button  type="primary" @click="login">登录</el-button>
        <el-button  @click="resetForm">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 methods: {
    login () { // 登录按钮
      let formData = new FormData()
      formData.append('id', this.ruleForm.pass)
      formData.append('word', this.ruleForm.checkPass)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post('http://localhost:8080/login', formData, config
      )
        .then(Response => {
          if (Response.data === 'success') {
            alert('跳转')
          } else {
            alert(Response.data)
          }
        })
    },

    resetForm () { // 注册按钮
      this.$router.push('/zhuce')
    }
  }

后端DAO层代码：

@Select("SELECT * FROM user WHERE id = #{0} and word = #{1}") 
List<User> get(String id,String word);

service层代码：

private userDao userD;

public List<User> get(String id,String word) {        //登录验证
    return userD.get(id, word);
}

controller层代码：接口为“/login”，数据库查询返回的是一个list 对象列表，如果列表size大于0 就说明账号密码正确，否则出错，返回一个信息给前端

@RequestMapping(value = "/login",method = RequestMethod.POST)
public  String login(String id, String word) {
	userService userS;
    System.out.println(id);
    System.out.println(word);
    if(userS.get(id, word).size() > 0) {
        System.out.println("success");
        return "success";
    }
    return "账号或密码错误！";
}

后端各种相关注解没有贴出来，自行添加。注意前后端分离，要解决跨域问题

我在做这个的时候，有一点把我给坑了，前后端什么都是对的，但是用qq浏览器打开的前端页面（习惯用QQ浏览器），怎么登录都没反应，后来才发现是浏览器的原因，用Chrome 浏览器就好了！！！！
结果：登录成功：

登陆失败：