使用 Vue 3 和 Axios 实现增删改查的案例逻辑

在现代前端开发中，Vue 3 是一个流行的框架，而 Axios 是一个用于处理 HTTP 请求的库。结合这两者，我们能够轻松地实现增、删、改、查（CRUD）操作。在本文中，我们将会搭建一个简单的示例，展示如何使用 Vue 3 和 Axios 来处理数据请求。

环境准备

首先，确保你的开发环境中已经安装了 Node.js 和 Vue CLI。接着，你可以创建一个新的 Vue 3 项目：

vue create vue3-axios-crud

在交互式提示中选择 Vue 3，然后进入项目目录：

cd vue3-axios-crud

接下来，安装 Axios：

npm install axios

项目结构

为了简化示例，我们将不涉及复杂的路由和状态管理。我们的项目结构如下：

src
├── components
│   └── UserList.vue
├── App.vue
└── main.js

创建用户列表组件

在 components 文件夹中创建 UserList.vue，并添加以下代码：

<template>
  <div>
    用户列表
    <button @click="fetchUsers">刷新用户</button>
    
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>

    <input v-model="newUserName" placeholder="输入新用户姓名" />
    <button @click="addUser">添加用户</button>

    <pie-chart></pie-chart>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      newUserName: '',
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('
        this.users = response.data;
      } catch (error) {
        console.error('获取用户失败:', error);
      }
    },
    async addUser() {
      if (!this.newUserName) return;

      try {
        const response = await axios.post(' {
          name: this.newUserName,
        });
        this.users.push(response.data);
        this.newUserName = '';
      } catch (error) {
        console.error('添加用户失败:', error);
      }
    },
    async deleteUser(userId) {
      try {
        await axios.delete(`
        this.users = this.users.filter(user => user.id !== userId);
      } catch (error) {
        console.error('删除用户失败:', error);
      }
    },
  },
  mounted() {
    this.fetchUsers();
  },
};
</script>

在 UserList.vue 中，我们定义了一个用户列表、添加用户的输入框和按钮，并且能够删除用户。组件在挂载时会调用 fetchUsers 方法请求用户数据。

使用饼状图可视化数据

我们可以使用 mermaid 模块来可视化数据。以下是如何在组件中添加饼状图的示例代码。

在 UserList.vue 组件中，我们可以添加一个 pie-chart 的组件。你可以在 src/components 文件夹下创建一个新的组件 PieChart.vue，如下所示。

<template>
  <div class="pie-chart">
    <h2>用户分布</h2>
    <div class="mermaid">
      pie
        title 用户分布
        "管理员": 60
        "普通用户": 30
        "访客": 10
    </div>
  </div>
</template>

<script>
export default {
};
</script>

<style scoped>
.pie-chart {
  margin: 20px 0;
}
</style>

导入和注册组件

在 UserList.vue 文件中导入并注册 PieChart 组件：

import PieChart from './PieChart.vue';

export default {
  components: {
    PieChart,
  },
  // ...其余代码不变
}

运行项目

在命令行中运行以下命令启动你的项目：

npm run serve

打开浏览器并访问 http://localhost:8080，你应该能看到用户列表，能够添加和删除用户，同时也能看到实时的饼状图反映用户分布。

总结

通过本文的示例，我们展示了如何在 Vue 3 中利用 Axios 实现基本的增删改查操作。你可以根据自己的需求拓展此示例，进一步实现更复杂的功能。这套组合将帮助你更高效地处理前端数据交互，使你的应用响应迅速、界面友好。希望你能在自己的项目中灵活运用这些知识！