36-在Vue3中如何通过axios请求后端数据

2024-12-24 约 421 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=135124553

36 在Vue3中如何通过axios请求后端数据

概述

在Vue3中通过axios请求后端数据是非常常用的方法，这节课我们来简单学习下。本节课需要依赖一个第三方库，我们先安装：

yarn add axios

基本用法

我们先创建public/data.json，用于模拟后端返回的接口数据：

{
"msg": "成功",
"status": true,
"data": []
}

接着创建src/components/Demo36.vue，代码如下：

{{ data }}

这是一个按钮

接着，我们修改src/App.vue：

# 欢迎跟着Python私教一起学习Vue3入门课程

---

然后，我们浏览器访问：http://localhost:5173/

完整代码

package.json

{
"name": "hello",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.2",
"countable": "^3.0.1",
"vue": "^3.3.8"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"sass": "^1.69.5",
"vite": "^5.0.0"
}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
})

index.html

Vite + Vue

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

src/App.vue

# 欢迎跟着Python私教一起学习Vue3入门课程

---

src/components/Demo36.vue

{{ data }}

这是一个按钮

启动方式

yarn
yarn dev

浏览器访问：http://localhost:5173/