Vue应用：添加自定义按钮，Axios发送http请求调用接口

引言

本文介绍如何在一个新创建的Vue3项目中，添加自定义按钮，并使用Axios发送http请求调用接口。

添加自定义按钮

代码变动

代码

// 示例：按钮点击事件
function handleClick() {
  alert('按钮被点击了！');
}

<!-- 在 HelloWorld 组件后面添加一个按钮 -->
<button class="my-button" @click="handleClick">点击我</button>

/* 添加按钮的样式 */
.my-button {
  background-color: #007bff;
  /* 可根据需要自定义颜色 */
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  margin-top: 1rem;
}

Axios调用接口

Axios发送http请求调用接口，需要按照如下的方式操作：

1. 添加axios依赖
2. 应用引入axios
3. 定义http请求方法
4. 按钮绑定http请求方法
5. 按钮调整合适的间距值（可选）

代码示例

添加axios依赖

在 package.json 文件中，添加 axios 依赖。

配置示例

配置代码

  "dependencies": {
    "axios": "^1.6.7"
  }

应用引入axios

代码在 <script> 标签里，放在最顶部。

import { ref } from 'vue';
import axios from 'axios';

定义http请求方法

用来测试的接口为 查询用户列表，[GET /users]，是作者本地运行的后台项目提供的。

代码在 <script> 标签里。

// 定义数据状态，比如用来显示请求结果
const requestResult = ref('');

async function sendHttpRequest() {
  try {
    const response = await axios.get('http://localhost:8080/users');

    // 如果请求成功，处理响应数据
    if (response.status === 200) {
      requestResult.value = response.data;
      console.log('请求成功:', response.data);
    } else {
      console.error('请求失败, 状态码:', response.status);
    }
  } catch (error) {
    console.error('请求异常:', error);
  }
}

按钮绑定http请求方法

代码在 <template> 标签里。

<!-- 添加一个按钮，并绑定click事件 -->
<button class="my-button" @click="sendHttpRequest">发送请求</button>

按钮调整合适的间距值（可选）

代码在 <style> 标签里。

.my-button+.my-button {
  /* 适合的间距值 */
  margin-left: 0.5rem;
}

调用效果