vue+springbootでログイン機能を実現

非同期送信フォーム(ユーザー) {
        this.$refs[user].validate((valid) => {
               if(有効){
                        アラート("ユーザー");
                        this.$axios.post("http:localhost:8087/user/login?code="+this.code,user).then(res => {
                            アラート("成功")
                             if(res.data.state){
                                 alert(res.data.msg+"ログインに成功しました。ホームページに移動します......");
                             }
                             それ以外{
                                 アラート(res.data.msg);
                             }
                        });
                    }
                    それ以外{
                        false を返します。
           }
   });
},

（有効）の場合{
        コンソールにログ出力します。
         this.$axios.get("http://localhost:8087/user/getCode").then(res => {
                  tcode = res.data.toLowerCase() とします。
                  （tcode == this.code）の場合{
                                確認します(this.user);
                            } それ以外 {
                                alert('認証コードエラー!');
                            }
                        });
                    }

@GetMapping("/getCode")
    @ApiOperation(value="検証コードを取得", notes="バックエンドから検証コードを取得してフロントエンドに送信")
    パブリック文字列 getCode(HttpServletRequest リクエスト){
        文字列キー = (String)request.getServletContext().getAttribute("code");
        log.info("キー:[{}]",キー);
        リターンキー;
    }

//ユーザーコントローラー
 @PostMapping("/ログイン")
    @ApiOperation(value = "システムにログイン", notes = "従​​業員管理システムにログイン")
    パブリック Map<String,Object> login(@RequestParam String Name,@RequestParam String Pwd){
        System.out.println(名前+" "+パスワード);
        Map<String,Object> map = new HashMap<>();
        試す{
            ユーザー userdb = userService.login(Name,Pwd);
            map.put("状態",true);
            map.put("msg","ログインに成功しました");
            map.put("ユーザー",userdb);
        }例外eをキャッチする{
            e.printStackTrace();
            map.put("状態",false);
            map.put("msg",e.getMessage());
        }
        ログ情報("[{}]",map.toString());
        マップを返します。
    }

//ユーザーサービスの実装
 @オーバーライド
    パブリックユーザーログイン(文字列名、文字列パスワード) {
        ユーザー userDB = userMapper.selectByName(Name);
        if(!ObjectUtils.isEmpty(userDB)){
            (userDB.getPwd().equals(Pwd)) の場合 {
                userDB を返します。
            }
            それ以外{
                新しい RuntimeException("パスワードが正しくありません");
            }
        }
        それ以外{
            新しい RuntimeException("ユーザーが存在しません") をスローします。
        }
    }

// ユーザーマッパー.java
ユーザー selectByName(文字列名);

<!--UserMapper.xml-->
 <select id="selectByName" パラメータタイプ="文字列" 結果タイプ="com.sunset.system.entity.User">
        ID、名前、年齢、性別、パスワード、部門、給与を選択してください
        名前が #{name} であるユーザーから
</選択>

非同期関数 verify(userinfo) {
      const {data: res} = verifyUser(userinfo);
      コンソールログ(res);
          res.state == trueの場合{
               _this.$メッセージ({
                 タイトル: 「検証に成功しました」
                 メッセージ: 「従業員管理システムへようこそ」
                  タイプ: 「成功」
            });
      window.location.href = "http://www.baidu.com";
      //_this.$router.push("http://www.baidu.com"); を待機します。
       } それ以外 {
           _this.$メッセージ({
            タイトル: 「検証に失敗しました」
         メッセージ: res.msg、
          タイプ: 「エラー」
       })
       false を返します。
     }
}

エクスポートconst verifyUser = (ユーザー) => {
    リクエストを返す({
        URL: "/user/ログイン",
        メソッド: 'post'、
        パラメータ: {
            名前: user.Name、
            パスワード: user.Pwd
        }
    })
}

'axios' から axios をインポートします

定数インスタンス = axios.create({
  baseURL: 'http://localhost:8080', //バックエンド プロジェクトのポート timeout: 10000,
  ヘッダー: {'X-Custom-Header': 'foobar'}
});

デフォルトインスタンスをエクスポートします。