本文實例為大家分享了vue+springboot實現登錄功能的具體代碼，供大家參考，具體內容如下

實現提交表單的代碼如下：

async submitForm(user) {this.$refs[user].validate((valid) => { if(valid){alert('user');this.$axios.post('http:localhost:8087/user/login?code='+this.code,user).then(res => { alert('success') if(res.data.state){ alert(res.data.msg+'登錄成功，即將跳轉到主頁......'); } else{ alert(res.data.msg); }}); } else{return false; } });},

當頭一棒，腦瓜嗡嗡的。

這東西嗡嗡了好幾天最終被我用比較愚蠢的代碼實現了，具體思路如下：

首先我現在后臺獲取到當前生成驗證碼圖片的真正驗證碼，傳遞到前端：

if (valid) {console.log(this.user); this.$axios.get('http://localhost:8087/user/getCode').then(res => { let tcode = res.data.toLowerCase(); if (tcode == this.code) {verify(this.user); } else {alert(’驗證碼錯誤!’); }}); }

中間的verify就是我驗證用戶登錄的用戶名和密碼的地方，驗證碼首先生成四位驗證碼然后轉化為base64格式的字符串，最后傳遞到前端，后端返回字符串的代碼。

@GetMapping('/getCode') @ApiOperation(value='獲取驗證碼',notes='從后端獲取驗證碼發送到前端') public String getCode(HttpServletRequest request){String key = (String)request.getServletContext().getAttribute('code');log.info('key:[{}]',key);return key; }

我分析登錄模塊前端給后端傳值不成功的原因是因為前端只有用戶名和密碼，然后我錯認為只有用戶名和密碼的表單可以組成一個對象導致一直將表單強制轉化為對象去傳遞給后端，這樣就一直造成了死循環，在這個問題卡了好久好久。之前也是將用戶名密碼和驗證碼傳遞給后端一直卡在那里。我先從后端獲取驗證碼在前端比較正確與否，然后將用戶輸入的用戶名和密碼傳遞給后端在數據庫中查找對應用戶名的用戶，若可以查找得到則說明此用戶存在，否則用戶存在。接下來比較用戶輸入的密碼是否和數據庫存入的密碼一致，如果一致則返回真，登錄成功，其他情況都不成功。具體的實現代碼如下：

//UserController @PostMapping('/login') @ApiOperation(value = '登錄系統', notes = '登錄員工管理系統') public Map<String,Object> login(@RequestParam String Name,@RequestParam String Pwd){System.out.println(Name+' '+Pwd);Map<String,Object> map = new HashMap<>();try{ User userdb = userService.login(Name,Pwd); map.put('state',true); map.put('msg','登錄成功'); map.put('user',userdb);}catch(Exception e){ e.printStackTrace(); map.put('state',false); map.put('msg',e.getMessage());}log.info('[{}]',map.toString());return map; }

//UserServiceImpl @Override public User login(String Name,String Pwd) {User userDB = userMapper.selectByName(Name);if(!ObjectUtils.isEmpty(userDB)){ if(userDB.getPwd().equals(Pwd)){return userDB; } else{throw new RuntimeException('密碼輸入不正確'); }}else{ throw new RuntimeException('用戶不存在');} }

//UserMapper.javaUser selectByName(String name);

<!--UserMapper.xml--> <select parameterType='String' resultType='com.sunset.system.entity.User'>select Id,Name,Age,Sex,Pwd,Dept,Salaryfrom user where Name = #{name}</select>

在編碼過程中，還遇到一個小插曲 就是 where Name = “#{name}” 導致在數據庫查找中出錯，希望看此文章的人能避開這個坑。這樣后端的邏輯就實現完成，下來是前端邏輯：

async function verify(userinfo) { const {data: res} = await verifyUser(userinfo); console.log(res); if (res.state == true) { _this.$message({ title: '驗證成功', message: '歡迎進入員工管理系統', type: 'success' }); window.location.; //await _this.$router.push('http://www.baidu.com'); } else { _this.$message({ title: '驗證失敗', message: res.msg, type: 'error' }) return false; }}

這里使用axios的post請求，具體的路徑在projectName.src.api 新建一個user.js的文件

export const verifyUser = (user) =>{ return request({url: '/user/login',method: ’post’,params: { Name: user.Name, Pwd: user.Pwd} })}

此外還需要配置request.js,文件路徑 projectName.src.utils

import axios from ’axios’const instance = axios.create({ baseURL: ’http://localhost:8080’, //后端項目的端口 timeout: 10000, headers: {’X-Custom-Header’: ’foobar’}});export default instance;

要是有其他邏輯問題，歡迎討論交流。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。