当前位置：首页 > VUE

vue实现crud功能

2026-01-19 17:47:04VUE

Vue 实现 CRUD 功能

搭建基础环境

确保已安装 Vue CLI 或 Vite，创建一个新项目。使用以下命令初始化项目：

npm init vue@latest  # Vue CLI
npm create vite@latest  # Vite

安装必要的依赖（如 Axios 或 Vue Router）：

npm install axios vue-router

数据模型与 API 交互

定义数据模型（如 src/models/User.js）：

export class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }
}

创建 API 服务层（如 src/services/api.js）：

import axios from 'axios';
const API_URL = 'https://api.example.com/users';

export default {
  async fetchUsers() {
    return axios.get(API_URL);
  },
  async createUser(user) {
    return axios.post(API_URL, user);
  },
  // 其他 CRUD 方法...
};

组件设计与状态管理

创建主组件（如 src/components/UserCrud.vue）：

<template>
  <div>
    <button @click="showCreateForm">Add User</button>
    <table>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.name }}</td>
        <td>
          <button @click="editUser(user)">Edit</button>
          <button @click="deleteUser(user.id)">Delete</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import api from '../services/api';
export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    this.users = (await api.fetchUsers()).data;
  },
  methods: {
    async deleteUser(id) {
      await api.deleteUser(id);
      this.users = this.users.filter(u => u.id !== id);
    }
    // 其他方法...
  }
};
</script>

表单处理与验证

创建表单组件（如 src/components/UserForm.vue）：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="user.name" required />
    <input v-model="user.email" type="email" required />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: ['userData'],
  data() {
    return {
      user: this.userData || { name: '', email: '' }
    };
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.user);
    }
  }
};
</script>

路由配置（可选）

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import UserCrud from '../components/UserCrud.vue';

const routes = [
  { path: '/users', component: UserCrud }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

状态管理（可选）

对于复杂场景可使用 Pinia：

// src/stores/userStore.js
import { defineStore } from 'pinia';
import api from '../services/api';

export const useUserStore = defineStore('users', {
  state: () => ({
    users: []
  }),
  actions: {
    async fetchUsers() {
      this.users = (await api.fetchUsers()).data;
    }
  }
});

完整功能集成

在主组件中集成所有功能：

<template>
  <div>
    <UserForm 
      v-if="showForm"
      :userData="currentUser"
      @submit="handleFormSubmit"
    />
    <UserCrud @edit="editUser" />
  </div>
</template>

<script>
import UserCrud from './UserCrud.vue';
import UserForm from './UserForm.vue';

export default {
  components: { UserCrud, UserForm },
  data() {
    return {
      showForm: false,
      currentUser: null
    };
  },
  methods: {
    editUser(user) {
      this.currentUser = { ...user };
      this.showForm = true;
    },
    async handleFormSubmit(user) {
      if (user.id) {
        await api.updateUser(user);
      } else {
        await api.createUser(user);
      }
      this.showForm = false;
    }
  }
};
</script>