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 }
]
