我是怎么做到开源系统中的前后端连通的？-五八三

大家好啊，又到了更新这篇专栏的时候了，即上一篇学成前端技术归来后又向大家介绍改系统中用到的技术：
那么如题所示，我是怎么封装前端的api并且拿取权限去调用后端的API呢？

第一步，技术选型

市面上有 JQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

有axios

axios({

    method: 'post',

    url: '/user/12345',

    data: {

        firstName: 'Fred',

        lastName: 'Flintstone'

    }

})

.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

但是vue官方是推荐我们使用axios来作为调用技术的，所以我们选择它
第二步，封装axios
我们需要封装成一个httpapi.js因为在真实项目中不可能使用以下的方式在vue组件中使用的

axios({

    method: 'post',

    url: '/user/12345',

    data: {

        firstName: 'Fred',

        lastName: 'Flintstone'

    }

})

所以我们将它封装如下

import axios from 'axios'
import { getToken, setToken } from './auth'

let AUTH_TOKEN = getToken()

//创建axios实例
const service = axios.create({
    baseURL: '/api',
    timeout: 10000
})
// request interceptor
service.interceptors.request.use(
    config => {
        config.headers.Authorization = AUTH_TOKEN
        // do something before request is sent
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data
        if (response.headers.authorization) {
            setToken(response.headers.authorization)
        }
        return res;
    },

    error => {
        console.log('err' + error) // for debug
    }
)
export default service

第三步，封装权限模块
一路跟过来的小伙伴应该知道，后端使用的是springsecurity来作为安全框架，所以我们需要获取一个token来进行验证

import Cookies from 'js-cookie'


const TokenKey = 'Authorization'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

第四步，封装接口api
就像上面说的，我们在真实项目中都是封装成一个js文件，然后vue文件去引入他进行调用，例如我们的登录模块

import service from '@/util/httpApi'


export function loginvalidate(data) {
  return service({
    url: '/loginvalidate',
    method: 'post',
    data: data
  })
}

第五步，引入api调用后端接口

<script >
import { loginvalidate } from "@/api/userApi";
export default {
  name: "myslef",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        alert("账号或密码不能为空");
      } else {
        loginvalidate(this.loginForm)
          .then((res) => {
            if (res.code === "0200") {
              this.$router.push("/homePage");
            } else {
              alert("账号或密码错误");
            }
            console.log("look " + JSON.stringify(res));
          })

          .catch((error) => {
            alert("系统出现错误");
            console.log(error);
          });
      }
    },

  },
};
</script>

这是一个名为”myslef”的Vue组件。它包含了一个名为”loginForm”的数据属性，用于保存用户的登录信息，包括用户名和密码。

在”methods”部分，定义了一个名为”login”的方法。当用户点击登录按钮时，该方法首先检查用户名和密码是否为空。如果为空，则弹出提示框显示”账号或密码不能为空”。否则，它调用了”loginvalidate”函数，并将”loginForm”作为参数传递进去。

接下来，使用Promise的方式处理登录验证的结果。如果返回的”res.code”等于”0200″，则说明登录验证成功，通过$router.push方法跳转到”/homePage”页面。如果不等于”0200″，则弹出提示框显示”账号或密码错误”。

最后，在控制台中打印出”res”对象的JSON字符串表示，以及在发生错误时捕获并处理异常响应。

这样我们的师徒系统就能前后端连通啦，以后的方法都是照猫画虎，封装api和拿取springsecurity的权限这块才是核心
更多的代码我开了个仓库供大家参考，前端仓库地址：
gitee.com/programmer-…

在这里插入图片描述