目录

1.反向代理

2.store文件夹下创建index.js

3.utils文件夹下创建request.js文件

4.在src/api下创建api文档

1.反向代理

在vite.config.js文件中添加反向代理，我们在发送请求时直接以/api开头加上后端对应的路由即可，比如登录为/api/login，不需要写完整的请求地址，http://localhost:8081/login,这样后期部署到服务器时，只需要修改反向代理文件vite.config.js中的target即可，不需要将所有请求都修改一边。

const response = await axios.post('/api/login', loginForm.value, {
              headers: {
                'Content-Type': 'application/json'
              }
            })      
vite.config.js文件代理如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 80,
    host: true,
    open: true,
    proxy: {
      // 配置代理
      '/api': {
         target: 'http://localhost:8081',//后端地址
        changeOrigin: true,
//如果后端请求不需要/api,删掉这行即可,比如，后端登录为/login，前端发送axios请求的路由为/api/login,这里的rewrite就会将/api/login重写为/login转发到后端http://localhost:8081，完整的请求为http://localhost:8081/login
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

2.store文件夹下创建index.js

这里就相当于一个字典，当我们向后端发送登录请求后，如果请求发送成功，后端会返回token给前端，前端需要将这个token保存到这个字典中，之后向后端发送请求时需要携带这个token

import { createStore } from 'vuex'
​
export default createStore({
  state: {
    token: localStorage.getItem('token') || ''
  },
  getters: {
    token: state => state.token
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
      localStorage.setItem('token', token)
    }
  },
  actions: {
    // 设置token
    setToken({ commit }, token) {
      commit('SET_TOKEN', token)
    },
    // 清除token
    clearToken({ commit }) {
      commit('SET_TOKEN', '')
      localStorage.removeItem('token')
    }
  }
})

3.src/utils文件夹下创建request.js文件

这里会有两个拦截器，请求拦截器和响应拦截器，请求拦截器就是前端向后端发送请求之前做的事情，这里我们需要将登录时的token(在字典store中存储)放到请求头中发送到后端， config.headers['Authorization'] = store.getters.token,响应拦截器就是后端向前端返回数据后做的事情，我这里就是判断状态码，如果响应成功(返回状态码200)，直接返回响应，如果响应401，说明用户未登录，直接跳转到登录页面

import axios from 'axios'
import { ElMessage } from 'element-plus'
//引入字典store
import store from '@/store' 
// 创建 axios 实例
const service = axios.create({
  baseURL: "",
  timeout: 15000
})
// 请求拦截器
service.interceptors.request.use(
  config => {
    //从store中获取token
    const token = store.getters.token
    if (token) {
      // 将登录时的token放到请求头中发送到后端
      config.headers['Authorization'] = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code === 200) {
      return res
    } else {
      ElMessage({
        message: res.msg || '请求失败',
        type: 'error',
        duration: 5 * 1000
      })
      if (res.code === 401) {
        // 避免重复跳转
        const currentPath = window.location.pathname
        if (currentPath !== '/login') {
          store.dispatch('clearToken')
          location.href = '/login'
        }
      }
      return Promise.reject(new Error(res.msg || '请求失败'))
    }
  }

4.在src/api下创建api文档

//这里引入的就是刚才的request
import request from '@/utils/request'
// 查询角色列表
export function listRole(query) {
  return request({
    url: '/api/jsb/list',
    method: 'get',
    params: query
  })
}
// 查询角色详细
export function getRole(roleId) {
  return request({
    url: '/api/ jsb/' + roleId,
    method: 'get'
  })
}
// 新增角色
export function addRole(data) {
  return request({
    url: '/api/ jsb',
    method: 'post',
    data: data
  })
}
// 修改角色
export function updateRole(data) {
  return request({
    url: '/api/ jsb',
    method: 'put',
    data: data
  })
}
// 删除角色
export function delRole(ids) {
  return request({
    url: '/api/jsb',
    method: 'delete',
    params: {
      ids: ids
    }
  })
} 

举例：前端向后端发送查询请求/api/jsb/list...

// 引入api文件 listRole
import { listRole, getRole, delRole, addRole, updateRole,refreshJsb } from "@/api/system/role";


/** 查询角色列表 */
function getList() {
  loading.value = true
  listRole(queryParams.value).then(response => {
    roleList.value = response.data.list
    total.value = response.data.total
    loading.value = false
  })
}