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

1. 登入功能的實現

實現提交表單的程式碼如下：

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;
    }

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

//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);
           www.cppcns.com 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{
            thwww.cppcns.comrow new RuntimeException("使用者不存在");
        }
    }

//UserMapper.
User selectByName(String name);

<!--UserMapper.xml-->
 <select id="selectByName" parameterType="String" resultType="com.sunset.system.entity.User">
        select Id,Name,Age,Sex,Pwd,Dept,Salary
        from 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.href = "http://www.baidu.com";
      //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.的檔案

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-Hehttp://www.cppcns.comader': 'foobar'}
});

export default instance;

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。