当前位置：首页 > VUE

vue实现CRUD

2026-01-08 00:44:12VUE

Vue 实现 CRUD 操作

Vue 提供了响应式数据绑定和组件化开发能力，结合后端 API 可以轻松实现 CRUD（增删改查）功能。以下是基于 Vue 3 和 Axios 的完整实现方案。

安装依赖

确保项目中已安装 axios 用于 HTTP 请求：

npm install axios

基础组件结构

创建一个 UserList.vue 组件作为示例：

<template>
  <div>
    <button @click="showAddModal">添加用户</button>
    <table>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.name }}</td>
        <td>
          <button @click="editUser(user)">编辑</button>
          <button @click="deleteUser(user.id)">删除</button>
        </td>
      </tr>
    </table>

    <!-- 添加/编辑模态框 -->
    <dialog v-if="showModal">
      <input v-model="currentUser.name" placeholder="姓名">
      <button @click="saveUser">保存</button>
      <button @click="closeModal">取消</button>
    </dialog>
  </div>
</template>

数据与状态管理

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const users = ref([])
    const showModal = ref(false)
    const currentUser = ref({ id: null, name: '' })
    const isEditMode = ref(false)

    const fetchUsers = async () => {
      const response = await axios.get('/api/users')
      users.value = response.data
    }

    onMounted(fetchUsers)

    return {
      users,
      showModal,
      currentUser,
      isEditMode,
      fetchUsers
    }
  }
}
</script>

CRUD 方法实现

methods: {
  showAddModal() {
    this.currentUser = { id: null, name: '' }
    this.isEditMode = false
    this.showModal = true
  },

  editUser(user) {
    this.currentUser = { ...user }
    this.isEditMode = true
    this.showModal = true
  },

  async saveUser() {
    if (this.isEditMode) {
      await axios.put(`/api/users/${this.currentUser.id}`, this.currentUser)
    } else {
      await axios.post('/api/users', this.currentUser)
    }
    this.fetchUsers()
    this.closeModal()
  },

  async deleteUser(id) {
    if (confirm('确定删除吗？')) {
      await axios.delete(`/api/users/${id}`)
      this.fetchUsers()
    }
  },

  closeModal() {
    this.showModal = false
  }
}

样式优化

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
dialog {
  padding: 20px;
  border-radius: 5px;
}
</style>

进阶优化方案

使用 Pinia 进行状态管理

创建 usersStore.js：

import { defineStore } from 'pinia'

export const useUsersStore = defineStore('users', {
  state: () => ({
    users: [],
    currentUser: null
  }),
  actions: {
    async fetchUsers() {
      const res = await axios.get('/api/users')
      this.users = res.data
    },
    async saveUser(user) {
      if (user.id) {
        await axios.put(`/api/users/${user.id}`, user)
      } else {
        await axios.post('/api/users', user)
      }
      this.fetchUsers()
    }
  }
})

表单验证

添加 Vuelidate 进行验证：

import { useVuelidate } from '@vuelidate/core'
import { required } from '@vuelidate/validators'

export default {
  setup() {
    const rules = {
      name: { required }
    }
    const v$ = useVuelidate(rules, currentUser)
    return { v$ }
  }
}

API 服务封装

创建 apiService.js：

vue实现CRUD

const API_URL = '/api/users'

export default {
  getAll() {
    return axios.get(API_URL)
  },
  create(user) {
    return axios.post(API_URL, user)
  },
  update(id, user) {
    return axios.put(`${API_URL}/${id}`, user)
  },
  delete(id) {
    return axios.delete(`${API_URL}/${id}`)
  }
}