Spring Boot + Vue 前后端分離項目 -- 前后端登錄接口對接

前言

我們先進行了登錄頁面的繪制：在 Vue 中使用 Element UI

然后再實現了后端登錄接口：Spring Boot + Vue 前后端分離項目 -- 后端登錄接口實現

現在可以進行前后端登錄接口對接了。

准備工作

1、安裝 axios

在 vue 項目中，需要使用 axios 發送網絡請求，安裝命令如下：

npm install axios

安裝完畢后，package.json 文件中，會出現 axios 的版本號，表示安裝好了。

2、前端統一失敗處理

使用 axios 發送網絡請求時，可能會成功，也可能會失敗，為了方便，我們使用 vue 中的 message 標簽，進行網絡請求的統一失敗處理。

在 vue 項目中新建包 utils，再在其中新建 js 文件：api.js，寫入如下代碼：

import axios from 'axios';
import { Message } from 'element-ui';

axios.interceptors.response.use(success =>{
  if (success.status && success.status ==200 && success.data.status ==500){
    Message.error({message: success.data.msg});
    return;
  }
  return success.data;
}, error => {
      if (error.response.status ==504 || error.response.status ==404){
        Message.error({message: "服務器被吃了o(╯□╰)o"})
      }else if (error.response.status ==403){
        Message.error({message: "權限不足，請聯系管理員！"})
      }else if (error.response.status ==401){
        Message.error({message: "沒有登錄，請登錄！"})
      }else if (error.response.data.msg){
        Message.error({message: error.response.data.msg})
      }else {
        Message.error({message: "未知錯誤..."})
      }
      return;
})

這里配置了一個 axios 的響應攔截器，對響應的成功或者失敗進行統一處理。

3、axios 網絡請求方法封裝

為了方便在 vue 中使用 axios 發送網絡請求，需要對 post 請求進行封裝一下，順便再對其他幾個方法進行封裝一下，同樣在 api.js 文件中編寫。

此時 api.js 的完整代碼如下：

import axios from 'axios';
import { Message } from 'element-ui';

axios.interceptors.response.use(success =>{
  if (success.status && success.status ==200 && success.data.status ==500){
    Message.error({message: success.data.msg});
    return;
  }
  return success.data;
}, error => {
      if (error.response.status ==504 || error.response.status ==404){
        Message.error({message: "服務器被吃了o(╯□╰)o"})
      }else if (error.response.status ==403){
        Message.error({message: "權限不足，請聯系管理員！"})
      }else if (error.response.status ==401){
        Message.error({message: "沒有登錄，請登錄！"})
      }else if (error.response.data.msg){
        Message.error({message: error.response.data.msg})
      }else {
        Message.error({message: "未知錯誤..."})
      }
      return;
})

let base = "";

// 登錄時的 post 請求
// params 默認是 json 格式，需要轉換成 form 表單，因為登錄請求只接受 form 表單傳參
export const postKeyValueRequest=(url, params) =>{
  return axios({
    method: "post",
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = '';
      for (let i in data){
        ret += encodeURIComponent(i)+"="+ encodeURIComponent(data[i]) + "&";
      }
      return ret;
    }],
    header: {
      "Content-Type": "application/x-www-urlencoded"
    }
  })
}

export const postRequest = (url, params) => {
  return axios({
    method: "post",
    url: `${base}${url}`,
    data: params,
    // contentType: "application/json;charset=UTF-8"
  })
}

export const putRequest = (url, params) => {
  return axios({
    method: "put",
    url: `${base}${url}`,
    data: params,
  })
}

export const getRequest = (url, params) => {
  return axios({
    method: "get",
    url: `${base}${url}`,
    data: params,
  })
}

export const deleteRequest = (url, params) => {
  return axios({
    method: "delete",
    url: `${base}${url}`,
    data: params,
  })
}

需要注意的是，登錄用到的 post 請求和業務上的 post 請求有所不同。

在使用 SpringSecurity 作為安全框架的項目中，登錄請求默認使用 form 表單進行傳參，而前后端分離的項目中，前后端使用 json 格式進行數據交互。

所以需要將 json 數據，轉換成 form 表單，再進行登錄請求。

所以 api.js 文件中，有兩個 post 請求方法：

• postKeyValueRequest：登錄使用的

• postRequest ：業務上的增加需求使用的

最后通過 Vue.prototype, 制作插件，使得在 vue 項目的任何地方，都可以方便調用這幾個網絡請求的方法。

我們需要在 main.js 文件中添加如下幾行：

import {postKeyValueRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";

Vue.prototype.postKeyValueRequest = postKeyValueRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;

這樣就可以在任一 vue 組件中通過 this.postRequest 調用對應的 post 請求。

4、設置請求轉發

由於前后端分離，端口不同，前端向后端發送登錄請求會涉及跨域問題，需要在 vue 項目中配置一下。

具體配置方法，可以參考文章：Vue 配置請求轉發（vue2 和 vue3 的方式不同）

我這里用的是 vue2 ，所以在 config 包的 index.js 文件中，修改如下：

    proxyTable: {
      '/':{
        target: "http://localhost:8081", // 后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    },

再重啟 vue 項目才會生效。

5、建立 home 頁

登錄成功后，需要跳轉至 home 頁，這里先簡單建一個 home 頁，具體內容日后再填充。

在 views 包下，新建 Home.vue 組件，完整代碼如下：

<template>
  <div>
    <h3 style="display: flex; justify-content: center; margin-top: 50px">這是首頁</h3>
  </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style>

</style>

在 router 中引入 Home 頁，完整代碼如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login"
import Home from "../views/Home"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

6、發送登錄請求並跳轉 Home 頁

之前在文章 在 Vue 中使用 Element UI 已經制作好了登錄頁。

只需要在 <el-button 按鈕下，添加一個點擊事件：@click="submitLogin", 並實現點擊事件：

     methods:{
        submitLogin:function () {
          this.$refs.loginForm.validate((valid) =>{
            if (valid){
              this.postKeyValueRequest("doLogin", this.loginData).then(resp =>{
                if (resp){
                  window.sessionStorage.setItem("user", JSON.stringify(resp.obj));
                  this.$router.replace("/home");
                }
              })
            }
            else {
              this.$message.error('請輸入所有字段');
              return false;
            }
          })
        }
      }

為了方便輸入密碼后按回車就可以登錄，可以在 密碼那個輸入框 <el-input 中添加 @keydown.enter.native="submitLogin"。

這里使用 this.$router.replace("/home")進行頁面跳轉，具體可參考文章：Vue 頁面跳轉

7、效果

登錄頁：

home 頁

每天學習一點點，每天進步一點點。