vue3项目将所有访问后端springboot的接口统一管理带跨域

一、前言

在Vue 3项目中，统一管理所有访问后端Spring Boot接口的最佳实践是创建一个专门的API服务层。这可以让你的代码更加模块化、可维护和集中管理。你可以使用Axios库作为HTTP客户端来与后端进行通信。以下是详细步骤：

1.安装Axios

首先，确保你在项目中安装了Axios：

npm install axios

2.创建Axios实例

创建一个单独的文件（如axiosInstance.js）来配置Axios实例，这样可以统一管理请求的基本配置（如基础URL、请求拦截器等）。

// src/api/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://your-backend-url/api', // 替换为你的后端基础URL
  timeout: 10000, // 设置请求超时时间
});

// 可以添加请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，比如添加token
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 可以添加响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default axiosInstance;

3.创建API服务文件

创建一个文件夹（如api），并在其中创建一个文件（如userService.js）来管理所有用户相关的API调用。你可以根据业务逻辑创建多个服务文件，如authService.js, productService.js等。

// src/api/userService.js
import axiosInstance from './axiosInstance';

const userService = {
  getUser(userId) {
    return axiosInstance.get(`/users/${userId}`);
  },
  createUser(userData) {
    return axiosInstance.post('/users', userData);
  },
  updateUser(userId, userData) {
    return axiosInstance.put(`/users/${userId}`, userData);
  },
  deleteUser(userId) {
    return axiosInstance.delete(`/users/${userId}`);
  },
};

export default userService;

4.在组件中使用API服务

将API服务导入到你的Vue组件中，并调用相应的方法。

<template>
  <div>
    <h1>用户信息</h1>
    <div v-if="user">
      <p>用户名: {{ user.name }}</p>
      <p>邮箱: {{ user.email }}</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import userService from '@/api/userService';

export default {
  name: 'UserProfile',
  setup() {
    const user = ref(null);

    const fetchUser = async () => {
      try {
        const response = await userService.getUser(1); // 替换为实际用户ID
        user.value = response.data;
      } catch (error) {
        console.error('获取用户失败:', error);
      }
    };

    onMounted(fetchUser);

    return {
      user,
    };
  },
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

二、跨域

修改文件vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
    // 解决使用表格时缩放页面报错
  devServer: {
    client: {
      overlay: false
    },
  },
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  },

  //解决跨域***********************其他代码不是
  devServer: {
    proxy: {
      '/dockingApi': {
        target: 'http://127.0.0.1:8888/', //接口域名
        changeOrigin: true,       //是否跨域
        pathRewrite: {
          '^/dockingApi': ''  //假如我们的地址是 /dockingApi/member/getToken 会转化为 /member/getToken
        }
      },
    }
  }


})

三、总结

通过上述步骤，你可以将所有与后端Spring Boot交互的接口统一管理起来，这样不仅使代码更加结构化，还能提高代码的可维护性和可扩展性。