vue增删改查axios 实例

原创

mob64ca12f6aae1 2024-09-04 06:37:07 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f6aae1的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue 和 Axios 的增删改查实例解析

在现代前端开发中，Vue.js 与 Axios 是两个非常流行的工具。Vue.js 是一种渐进式框架，用于构建用户界面，而 Axios 是一个基于 Promise 的 HTTP 客户端，可以轻松进行网络请求。这篇文章将通过一个示例介绍如何在 Vue 应用中实现增删改查（CRUD）功能，并通过 Axios 与后端进行交互。

创建 Vue 项目

首先，确保你已经安装了 Vue CLI。然后使用以下命令创建一个新的 Vue 项目：

vue create my-crud-app

进入项目目录：

cd my-crud-app

接着，安装 Axios：

npm install axios

结构设计

在这个示例中，我们将构建一个简单的任务管理系统，其中包含任务的增加、删除、更新和查看功能。假设我们的 API 提供了以下路由：

GET /tasks：获取所有任务
POST /tasks：添加新任务
PUT /tasks/:id：更新任务
DELETE /tasks/:id：删除任务

状态图

在进制实现之前，我们需要了解系统状态。下面是任务管理系统的状态图，展示了不同操作的状态转移。

stateDiagram
    [*] --> 显示任务列表
    显示任务列表 --> 添加任务 : 点击添加按钮
    显示任务列表 --> 删除任务 : 点击删除按钮
    显示任务列表 --> 更新任务 : 点击更新按钮
    添加任务 --> 显示任务列表 : 提交成功
    删除任务 --> 显示任务列表 : 删除成功
    更新任务 --> 显示任务列表 : 更新成功

Vue 组件实现

接下来，我们将实现一个 Vue 组件，来执行上述的 CRUD 操作。创建一个新的组件 TaskManager.vue：

<template>
  <div>
    任务管理
    <form @submit.prevent="addTask">
      <input v-model="newTask" placeholder="添加新任务" />
      <button type="submit">添加任务</button>
    </form>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <span>{{ task.name }}</span>
        <button @click="updateTask(task)">更新</button>
        <button @click="deleteTask(task.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tasks: [],
      newTask: ''
    }
  },
  methods: {
    async fetchTasks() {
      const response = await axios.get('/tasks');
      this.tasks = response.data;
    },
    async addTask() {
      if (this.newTask.trim() === '') return;
      await axios.post('/tasks', { name: this.newTask });
      this.newTask = '';
      this.fetchTasks();
    },
    async deleteTask(id) {
      await axios.delete(`/tasks/${id}`);
      this.fetchTasks();
    },
    async updateTask(task) {
      const newName = prompt('更新任务:', task.name);
      if (newName && newName !== task.name) {
        await axios.put(`/tasks/${task.id}`, { name: newName });
        this.fetchTasks();
      }
    }
  },
  mounted() {
    this.fetchTasks();
  }
}
</script>

<style scoped>
/* 可添加样式 */
</style>

代码解析

在上述代码中，我们定义了一个 Vue 组件 TaskManager：

data：包含任务列表和新任务的输入字段。
**methods**：
- fetchTasks：从后端获取所有任务并更新状态。
- addTask：将新任务发送到后端，这里做了输入校验。
- deleteTask：根据任务 ID 删除任务，并更新列表。
- updateTask：用户输入新的任务名，并提交更新。
mounted：组件加载完成后自动调用 fetchTasks 方法，加载任务列表。