vue-admin-template怎么对接数据

### vue-admin-template 对接和处理后端数据

#### 1. 使用 Axios 进行 HTTP 请求
为了方便管理 API 请求，`vue-admin-template` 中通常会封装一个基于 `axios` 的请求工具类。这使得发起网络请求更加简洁高效。

// src/utils/request.js
import axios from 'axios'
import { Message } from 'element-ui'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api base_url
  timeout: 5000 // request timeout
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => response.data,
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

此代码片段展示了如何创建并配置了一个全局的 `axios` 实例，并设置了请求拦截器来自动添加认证头以及响应拦截器来进行错误提示[^3]。

#### 2. 封装具体的API函数
对于特定的功能模块，可以进一步抽象出专门的服务层，在其中定义各个业务逻辑所需的HTTP操作。

// src/api/user.js
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/auth/login',
    method: 'post',
    data
  })
}

export function getUserInfo() {
  return request({
    url: '/user/profile',
    method: 'get'
  })
}

这里通过导入之前设置好的 `request` 方法，实现了登录验证 (`login`) 及获取当前用户信息(`getUserInfo`)两个常用接口调用。

#### 3. 数据展示与交互
当从服务器成功拉取到所需的数据之后，就可以将其绑定至组件内部的状态或属性上以便于视图渲染；同时也可以监听用户的输入事件或其他行为触发新的异步请求更新界面显示的内容。

<!-- src/views/UserProfile.vue -->
<template>
  <div class="profile">
    <h2>{{ userInfo.name }}</h2>
    <!-- 更多个人信息字段... -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getUserInfo } from '../api/user';

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo(){
      try{
        const res = await getUserInfo();
        console.log(res);
        this.$store.commit('SET_USER_INFO',res);  
      }catch(err){
        console.error(err);
      }
    }
  }
};
</script>

上述例子中，`UserProfile` 组件会在实例化时尝试加载最新的用户资料，并利用 Vuex 来集中存储这些共享状态，从而实现不同地方的一致访问[^4]。