vue3后端数据传入前端axios

### Vue3 使用 Axios 获取 后端 数据 示例 在 Vue3 项目中使用 Axios 来获取后端数据涉及几个关键步骤。下面是一个完整的示例，展示了如何设置并成功从后端接收数据。 #### 导入必要的模块 为了能够在整个应用程序中方便地访问 `axios` 实例，在项目的入口文件 `main.js` 中进行全局注册[^1]： ```javascript import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' const app = createApp(App) // 将 axios 注册到 Vue 的原型上以便组件内可以直接 this.axios 调用 app.config.globalProperties.axios = axios; // 或者也可以通过插件形式集成 vue-axios (如果需要的话) // import VueAxios from 'vue-axios'; // app.use(VueAxios, axios); app.mount('#app') ``` #### 创建 HTTP 请求实例 通常建议创建一个单独的 HTTP 请求管理器用于处理所有的 API 请求。可以在 `/src/utils/http.js` 文件里定义这个实例[^4]: ```javascript import axios from 'axios'; const httpInstance = axios.create({ baseURL: process.env.VUE_APP_API_URL || '', // 可以在这里指定基础 URL 并允许环境变量覆盖它 }); export default httpInstance; ``` #### 编写服务函数封装具体请求逻辑 接着可以编写特定的服务函数来执行实际的数据抓取操作。比如在一个名为 `home.js` 的文件中定义获取首页导航栏的方法: ```javascript import httpInstance from '../utils/http'; export function getHomeNav() { return httpInstance.get('/dailyreport/getdailyreportall'); } ``` #### 组件内部发起请求 最后是在具体的 Vue 组件中调用上述方法完成异步加载工作。这里展示了一个简单的例子说明怎样利用组合式API (`setup`) 函数来进行网络请求并将响应结果绑定给模板使用的场景[^3]: ```javascript <template> <div v-if="loading">Loading...</div> <ul v-else> <li v-for="(item,index) in items" :key="index">{{ item }}</li> </ul> </template> <script> import { ref, onMounted } from 'vue'; import { getHomeNav } from '@/services/home'; export default { name: "HomePage", setup(){ let loading = ref(true); let items = ref([]); async function fetchData(){ try{ const response = await getHomeNav(); items.value = response.data; // 假设返回的是数组结构 } catch(error){ console.error('Error fetching home nav:', error); } finally{ loading.value=false; } } onMounted(fetchData); return { loading, items }; } }; </script> ``` 此代码片段实现了当页面首次渲染时自动触发一次 GET 请求去拉取最新资料，并将其显示出来；同时提供了基本错误处理机制以及加载指示符提升用户体验。