一文了解 Vue + Axios 实现 CRUD 的逻辑

作者：Terry2025.12.08来源：Web前端之家浏览：36评论:0

关键词：CRUD

vuejs

不少刚入门前端开发的朋友,想做个带增删改查功能的项目时，总会被“Vue.js 和 Axios 咋配合实现 CRUD”这类问题难住，怎么用 Axios 发不同请求？Vue 里的数据咋和后端互动？增删改查每个环节具体咋写？”今天咱就从基础概念到实战代码，把 Vue + Axios 实现 CRUD 的逻辑掰碎了讲，看完你也能自己搭个小 Demo～

CRUD 是增（Create）、查（Read）、改（Update）、删（Delete）的缩写，是前后端交互最核心的场景，Vue.js 负责页面结构搭建和数据响应式渲染（比如表单输入自动同步到变量、列表数据变化自动更新页面）；Axios 是个专门发 HTTP 请求的库，帮前端和后端接口“对话”——新增数据时发 POST 请求，查数据时发 GET 请求，改数据发 PUT 请求，删数据发 DELETE 请求。

简单说,Vue 管“前端页面长啥样、数据咋展示”，Axios 管“前端怎么把数据传给后端、怎么从后端拿数据”，两者配合就能完成 CRUD 全流程。

先搭能跑通的基础项目环境

想写代码前，得先把项目架子搭好：

创建 Vue 项目：用命令行执行 vue create crud-demo（选默认或手动配置都成），创建好后进入项目目录 cd crud-demo。
安装 Axios：执行 npm install axios 把 Axios 装到项目里。

全局引入 Axios：打开 src/main.js，加入这两行代码：

import axios from 'axios'
Vue.prototype.$axios = axios // 把 Axios 挂载到 Vue 原型，组件里能通过 this.$axios 调用

假设后端接口：咱先模拟后端给的接口（实际项目里后端同学会提供），
要是没真实后端,也能用 Mock.js 模拟接口返回，先focus前端逻辑。

新增用户：POST /api/users，传参 { name: '张三', age: 20 }
查询用户列表：GET /api/users，返回 [{ id: 1, name: '张三', age: 20 }, ...]
编辑用户：PUT /api/users/1（1 是用户 ID），传修改后的 { name: '李四', age: 22 }
删除用户：DELETE /api/users/1（1 是用户 ID）

Create（新增）：从表单到后端的“数据投递”

新增功能核心是收集表单数据 → 发 POST 请求 → 处理响应，举个“添加用户”的例子：

<template>
  <div class="create-section">
    <!-- 表单：双向绑定收集数据 -->
    <input v-model="newUser.name" placeholder="请输入姓名" />
    <input v-model="newUser.age" type="number" placeholder="请输入年龄" />
    <button @click="addUser">添加用户</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newUser: { name: '', age: '' } // 绑定表单的变量
    }
  },
  methods: {
    async addUser() {
      try {
        // 1. 发 POST 请求给后端
        const res = await this.$axios.post('/api/users', this.newUser)
        // 2. 成功后清空表单，方便下次输入
        this.newUser = { name: '', age: '' }
        // 3. 通知列表组件刷新（比如用 $emit 传事件，后面讲列表时细说）
        this.$emit('user-added')
      } catch (err) {
        // 失败时给用户提示（实际项目用弹窗，这里先打日志）
        console.error('添加失败：', err)
      }
    }
  }
}
</script>

逻辑很顺：用 v-model 把输入框和 newUser 变量绑起来，点击“添加”时，Axios 发 POST 请求把 newUser 传给后端，成功后清空表单，还能通知列表组件“新增了数据，该刷新啦”～

Read（查询）：把后端数据变成页面列表

查询功能核心是发 GET 请求 → 拿后端数据 → 渲染到页面，比如做个“用户列表”：

<template>
  <div class="list-section">
    <ul>
      <!-- 循环渲染用户数据 -->
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ age }}岁
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: [] // 存后端返回的用户列表
    }
  },
  mounted() {
    // 组件刚加载完，就发请求拿数据
    this.getUsers()
  },
  methods: {
    async getUsers() {
      try {
        // 发 GET 请求
        const res = await this.$axios.get('/api/users')
        // 把后端返回的数据（假设在 res.data 里）赋值给 userList
        this.userList = res.data
      } catch (err) {
        console.error('获取列表失败：', err)
      }
    }
  }
}
</script>

这里用 mounted 钩子（组件挂载到页面后执行）触发 getUsers 方法，Axios 发 GET 请求拿到数据后，v-for 循环把用户信息渲染成列表，注意 key="user.id" 是为了让 Vue 高效更新 DOM，避免重复渲染～

Update（编辑）：修改已有数据的“双向奔赴”

编辑功能得先把要改的用户数据“回显”到表单 → 修改后发 PUT 请求 → 更新前端列表，举个带弹窗的编辑例子：

<template>
  <div class="edit-section">
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.age }}岁
        <button @click="startEdit(user)">编辑</button>
      </li>
    </ul>
    <!-- 编辑弹窗：v-if 控制显示隐藏 -->
    <div v-if="editingUser" class="edit-modal">
      <input v-model="editingUser.name" placeholder="新姓名" />
      <input v-model="editingUser.age" type="number" placeholder="新年龄" />
      <button @click="saveEdit">保存修改</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: [],
      editingUser: null // 存当前正在编辑的用户
    }
  },
  methods: {
    // 点击“编辑”时，把要改的用户数据复制到 editingUser（避免直接改原列表数据）
    startEdit(user) {
      this.editingUser = { ...user } // 深拷贝，防止双向绑定影响原数据
    },
    async saveEdit() {
      try {
        const { id } = this.editingUser
        // 发 PUT 请求，路径带用户 ID，传修改后的数据
        await this.$axios.put(`/api/users/${id}`, this.editingUser)
        // 找到原列表里的用户，替换成新数据
        const index = this.userList.findIndex(u => u.id === id)
        this.userList.splice(index, 1, this.editingUser)
        // 关闭编辑弹窗
        this.editingUser = null
      } catch (err) {
        console.error('编辑失败：', err)
      }
    }
  }
}
</script>

逻辑拆解：点“编辑”时，把用户数据复制到 editingUser（用扩展运算符深拷贝，避免直接改原列表导致意外）；修改完点“保存”，Axios 发 PUT 请求（路径带用户 ID），后端更新数据后，前端找到列表里对应的用户，用新数据替换，最后关闭弹窗。

Delete（删除）：一键移除数据的“干净利落”

删除功能核心是点击按钮触发 → 发 DELETE 请求 → 前端列表同步删除，给每个列表项加“删除”按钮：

<template>
  <div class="delete-section">
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.age }}岁
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: []
    }
  },
  methods: {
    async deleteUser(id) {
      try {
        // 发 DELETE 请求，路径带用户 ID
        await this.$axios.delete(`/api/users/${id}`)
        // 前端列表过滤掉已删除的用户（因为后端已经删了，前端同步更新）
        this.userList = this.userList.filter(u => u.id !== id)
      } catch (err) {
        console.error('删除失败：', err)
      }
    }
  }
}
</script>

点击“删除”时，Axios 发 DELETE 请求给后端，后端处理完后，前端用 filter 把列表中对应 ID 的用户过滤掉，页面就会自动刷新，用户瞬间消失～

实战避坑：错误处理与体验优化

光实现功能还不够，得让项目更健壮、用户体验更好，这几个细节要注意：

错误处理：Axios 的 catch 里别只打日志，得给用户反馈！比如用 Element UI 的 $message 弹提示：this.$message.error('网络波动，请重试～')。
Loading 状态：发请求时显示“加载中”，让用户知道系统没卡，比如加个 loading 变量，请求前设为 true，请求结束（成功或失败）后设为 false，页面用 v-if="loading" 显示加载动画。
数据自动刷新：新增/编辑/删除后，列表要自动刷新，可以把 getUsers 方法提取出来，新增成功后调用 this.getUsers()，不用用户手动刷新。
表单验证：新增/编辑时，要检查“姓名是否为空、年龄是否是数字”，简单的自己写逻辑（if (!this.newUser.name) return alert('姓名必填')），复杂的用 Vee-Validate 这类表单验证库。
权限控制：如果某些用户没删除权限，前端要隐藏“删除”按钮（比如用 v-if="user.canDelete"），后端也要做权限校验（防止别人抓包伪造请求）。

把 Vue.js 和 Axios 结合做 CRUD，核心是“前端页面交互 + 后端数据通信”的循环——新增用 POST、查询用 GET、编辑用 PUT、删除用 DELETE，每个环节里 Vue 负责“数据绑定和页面渲染”，Axios 负责“和后端接口对话”，只要把每个环节拆解开（先写表单、再写请求、最后处理响应），再加上错误处理和体验优化，就能做出流畅的增删改查功能，现在可以动手搭个小项目（比如待办清单、用户管理系统），把这些知识点串起来练手，很快就能掌握～

赏您的支持是我们创作的动力！