vue实现curd

Vue实现CRUD操作

初始化Vue项目

使用Vue CLI创建新项目，安装必要依赖如axios用于HTTP请求

vue create crud-demo
cd crud-demo
npm install axios

组件结构设计

创建主要组件文件，通常包括列表显示、表单编辑等组件

// src/components/
- UserList.vue    // 展示数据列表
- UserForm.vue    // 新增/编辑表单
- App.vue         // 主入口组件

状态管理配置

使用Vuex管理共享状态，定义CRUD相关状态和mutations

// store.js
const store = new Vuex.Store({
  state: {
    users: [],
    currentUser: null
  },
  mutations: {
    SET_USERS(state, users) {
      state.users = users
    },
    ADD_USER(state, user) {
      state.users.push(user)
    }
  }
})

API服务层

封装axios请求方法，与后端API交互

// api/user.js
import axios from 'axios'

export default {
  getUsers() {
    return axios.get('/api/users')
  },
  createUser(user) {
    return axios.post('/api/users', user)
  }
}

列表组件实现

展示数据并提供操作按钮

<template>
  <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>
</template>

<script>
export default {
  computed: {
    users() {
      return this.$store.state.users
    }
  },
  methods: {
    editUser(user) {
      this.$emit('edit', user)
    }
  }
}
</script>

表单组件实现

处理数据创建和更新

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="Name">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formData: this.user || { name: '' }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.formData)
    }
  }
}
</script>

主组件整合

协调各子组件功能

<template>
  <div>
    <user-form @submit="saveUser"></user-form>
    <user-list @edit="editUser"></user-list>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['fetchUsers', 'createUser']),
    saveUser(user) {
      this.createUser(user)
    }
  },
  created() {
    this.fetchUsers()
  }
}
</script>

路由配置（可选）

如需多页面，配置Vue Router管理导航

const routes = [
  { path: '/users', component: UserList },
  { path: '/users/create', component: UserForm }
]