关于前后端交互的 Api 文件夹（Vue） — 个人总结

在Vue项目中，通常会在src/api文件夹中创建API模块，用于封装与后端的通信逻辑。以下是一个简单的示例代码：

// src/api/user.js
import axios from 'axios';
 
const baseURL = 'https://your-backend-api.com/api/';
 
export function getUser(userId) {
  return axios.get(`${baseURL}users/${userId}`);
}
 
export function updateUser(userId, userData) {
  return axios.put(`${baseURL}users/${userId}`, userData);
}
 
// 其他用户相关的API函数...

在Vue组件中使用这些API函数：

// src/components/UserProfile.vue
<template>
  <!-- 组件模板内容 -->
</template>
 
<script>
import { getUser, updateUser } from '@/api/user';
 
export default {
  name: 'UserProfile',
  data() {
    return {
      user: null,
      userData: {
        // 用户数据模型
      },
    };
  },
  methods: {
    async fetchUser(userId) {
      try {
        const response = await getUser(userId);
        this.user = response.data;
      } catch (error) {
        console.error('An error occurred while fetching the user:', error);
      }
    },
    async updateUserData() {
      try {
        const response = await updateUser(this.userData.id, this.userData);
        this.user = response.data;
        // 可以添加更新成功的提示
      } catch (error) {
        console.error('An error occurred while updating the user:', error);
        // 可以添加更新失败的错误处理
      }
    },
  },
  created() {
    this.fetchUser(this.$route.params.userId);
  },
};
</script>

这个示例展示了如何在Vue项目中创建API模块，封装与后端的交互，并在组件中调用这些API函数。通过这种方式，可以保持代码的清晰度和可维护性。