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  瀏覽器就好了！！！！

結果：登錄成功：

 

 

登錄失敗：