以下是实现 Vue 3 通过 Axios 发送请求到基于 Gin 框架搭建的后端服务的详细步骤：
1. 搭建 Gin 后端服务
首先，使用 Go 语言搭建一个简单的 Gin 框架的后端服务，示例代码如下（创建一个main.go文件）：
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
func main() {
r := gin.Default()
// 定义一个GET请求的接口示例，返回一个简单的JSON数据
r.GET("/api/data", func(c *gin.Context) {
data := gin.H{
"message": "这是来自Gin后端的数据",
"status": "success",
}
c.JSON(http.StatusOK, data)
})
// 启动Gin服务，监听在本地的8080端口（可根据实际需求修改端口）
r.Run(":8080")
}
在上述代码中：
-
引入了必要的包，通过
gin.Default()创建了一个默认的 Gin 引擎实例。 -
定义了一个
GET请求的路由/api/data，当客户端访问该路由时，会返回一个包含特定消息和状态的 JSON 格式的数据。 -
最后使用
r.Run(":8080")启动 Gin 服务，监听在127.0.0.1:8080端口（也就是等待客户端的请求到来）。
在命令行中进入该代码所在目录，执行go run main.go命令即可启动这个简单的 Gin 后端服务。
2. 创建 Vue 3 项目并配置 Axios
-
创建 Vue 3 项目：
确保已经安装了 Node.js 和 npm（Node Package Manager），然后在命令行中使用以下命令创建一个新的 Vue 3 项目（以vue-project为例）：
npm init vue@latest
按照提示进行项目配置，例如选择项目需要的功能（如是否需要路由、状态管理等），完成后进入项目目录：
cd vue-project
再使用 npm 安装项目依赖：
npm install
-
安装 Axios：
在 Vue 3 项目目录下，通过 npm 安装 Axios 库，Axios 是一个常用的用于发送 HTTP 请求的 JavaScript 库，执行以下命令：
npm install axios
-
在 Vue 组件中使用 Axios 发送请求：
打开src/App.vue文件（这是 Vue 3 项目默认的主组件，你也可以在其他自定义组件中进行请求操作），示例代码如下：
<template>
<div>
<button @click="getData">获取数据</button>
<div v-if="response">{{ response.message }}</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
response: null,
};
},
methods: {
async getData() {
try {
// 这里发送请求到前面搭建的Gin后端服务的/api/data路由
const result = await axios.get('http://127.0.0.1:8080/api/data');
this.response = result.data;
} catch (error) {
console.error('请求出错：', error);
}
},
},
};
</script>
<style>
/* 样式部分可根据需求添加或修改 */
</style>
在上述代码中：
- 首先在
<script>标签内导入了 Axios 库。 - 在
data函数中定义了一个response变量，用于存储从后端获取到的数据，初始值为null。 getData方法是一个异步方法，当点击页面上的 “获取数据” 按钮（通过@click绑定）时会被触发，在方法内部使用axios.get发送一个GET请求到http://127.0.0.1:8080/api/data（也就是前面启动的 Gin 后端服务的对应路由），如果请求成功，将返回的数据赋值给response变量，然后通过 Vue 的数据绑定在页面上展示出来（v-if="response"判断有数据时展示相应的 DOM 元素）；如果请求过程中出现错误，则在catch块中打印错误信息。
3. 运行 Vue 3 项目并测试请求
在 Vue 3 项目目录下，执行以下命令启动项目：
npm run dev
项目启动后，打开浏览器，访问对应的地址（通常是http://localhost:5173/或者其他根据项目配置显示的地址），点击页面上的 “获取数据” 按钮，就可以看到通过 Axios 发送请求到 Gin 后端服务获取到的数据展示在页面上了。
需要注意的是，在实际应用场景中，如果涉及跨域问题（比如 Vue 项目和 Gin 后端服务运行在不同的域名、端口或者协议下），还需要在后端 Gin 服务或者前端 Vue 项目中进行相应的跨域处理，以确保请求能够正常发送和接收。例如在 Gin 服务中可以使用中间件来设置允许跨域的相关配置，如下是一个简单的跨域中间件示例（添加到main.go文件中适当位置）：
func Cors() gin.HandlerFunc {
return func(c *gin.Context) {
c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
c.Writer.Header().Set("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Content-Type")
c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
if c.Request.Method == "OPTIONS" {
c.AbortWithStatus(http.StatusNoContent)
return
}
c.Next()
}
}
然后在启动 Gin 服务的r.Run(":8080")之前，将这个跨域中间件添加到路由中，如r.Use(Cors())，这样就能处理一些基本的跨域情况了。
通过以上步骤，就可以实现 Vue 3 通过 Axios 向 Gin 后端服务发送请求并获取相应数据了。
