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

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

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

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

 

 1 <template>
 2   <div class="login" >
 3     <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm" >
 4       <p4>校园二手交易平台登录系统</p4>
 5       <el-form-item  label-width="300px" >
 6       </el-form-item>
 7       <el-form-item label="账号:" label-width="50px"  prop="pass">
 8         <el-input  clearable name="name" type="username" v-model.trim="ruleForm.pass" autocomplete="off" placeholder="请输入账号"  style="width: 250px"></el-input>
 9       </el-form-item>
10       <el-form-item label="密码:" label-width="50px" prop="checkPass">
11         <el-input clearable name="word" type="password" v-model.trim="ruleForm.checkPass" autocomplete="off" placeholder="请输入密码" style="width: 250px"></el-input>
12       </el-form-item>
13       <el-form-item label-width="95px">
14         <el-button  type="primary" @click="login">登录</el-button>
15         <el-button  @click="resetForm">注册</el-button>
16       </el-form-item>
17     </el-form>
18   </div>
19 </template>
20 
21 <script>
22 
23 export default {
24   data () {
25     var validatePass = (rule, value, callback) => {
26       if (value === '') {
27         callback(new Error('请输入账号'))
28       }
29     }
30     var validatePass2 = (rule, value, callback) => {
31       if (value === '') {
32         callback(new Error('请输入密码'))
33       }
34     }
35     return {
36       ruleForm: {
37         pass: '',
38         checkPass: ''
39       },
40       rules: {
41         pass: [
42           { validator: validatePass, trigger: 'blur' }
43         ],
44         checkPass: [
45           { validator: validatePass2, trigger: 'blur' }
46         ]
47       }
48     }
49   },
50   methods: {
51     login () { // 登录按钮
52       let formData = new FormData()
53       formData.append('id', this.ruleForm.pass)
54       formData.append('word', this.ruleForm.checkPass)
55       let config = {
56         headers: {
57           'Content-Type': 'multipart/form-data'
58         }
59       }
60       this.$axios.post('http://localhost:8080/login', formData, config
61       )
62         .then(Response => {
63           if (Response.data === 'success') {
64             alert('跳转')
65           } else {
66             alert(Response.data)
67           }
68         })
69     },
70 
71     resetForm () { // 注册按钮
72       this.$router.push('/zhuce')
73     }
74   }
75 }
76 </script>
77 <style type="text/css">
78 .login{
79 position: absolute;/*绝对定位*/
80 width: 300px;
81 height: 200px;
82 text-align: center;/*(让div中的内容居中)*/
83 top: 50%;
84 left: 50%;
85 margin-top: -200px;
86 margin-left: -150px;
87 }
88 </style>

 

后端DAO层代码：

1 @Select("SELECT * FROM user WHERE id = #{0} and word = #{1}") 
2 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<user> 对象列表，如果列表size大于0  就说明账号密码正确，否则出错，返回一个信息给前端

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

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

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

结果：登录成功：

 

 

登录失败：