用vue组件+vue路由+vuex+axios实现增删改查

时间: 2023-07-28 16:09:49 浏览: 50
好的,下面是一个简单的示例: 首先,我们需要创建一个Vue组件,比如一个用户列表组件,用于展示用户列表和实现增删改查操作: ```html <template> <div> <h2>用户列表</h2> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td>{{ user.gender }}</td> <td> <button @click="editUser(user)">编辑</button> <button @click="deleteUser(user.id)">删除</button> </td> </tr> </tbody> </table> <button @click="addUser">添加用户</button> <UserForm ref="userForm" @submit="submitUser"></UserForm> </div> </template> <script> import UserForm from './UserForm.vue' import { mapGetters, mapActions } from 'vuex' export default { components: { UserForm }, computed: { ...mapGetters(['users']) }, methods: { ...mapActions(['fetchUsers', 'createUser', 'updateUser', 'deleteUser']), addUser () { this.$refs.userForm.show() }, editUser (user) { this.$refs.userForm.show(user) }, submitUser (user) { if (user.id) { this.updateUser(user) } else { this.createUser(user) } } }, mounted () { this.fetchUsers() } } </script> ``` 在上面的代码中,我们定义了一个用户列表组件,其中包含了一个表格用于展示用户列表,以及一个添加用户和编辑用户的按钮。点击添加用户按钮会弹出一个表单组件,用于输入新增用户的信息,点击编辑按钮同样会弹出该表单组件,并将选中用户的信息填充到表单中。在表单中填写完用户信息并点击确定后,会触发`submit`事件,我们根据用户是否存在`id`属性来判断是新增用户还是更新用户,然后调用相应的`createUser`或`updateUser`方法。 接下来,我们需要创建一个用户表单组件,用于输入用户信息: ```html <template> <div class="modal" v-show="visible"> <div class="modal-mask"></div> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> {{ formTitle }} </slot> </div> <div class="modal-body"> <form> <div> <label for="name">姓名</label> <input id="name" type="text" v-model="user.name" /> </div> <div> <label for="age">年龄</label> <input id="age" type="text" v-model="user.age" /> </div> <div> <label for="gender">性别</label> <select id="gender" v-model="user.gender"> <option value="男">男</option> <option value="女">女</option> </select> </div> </form> </div> <div class="modal-footer"> <button class="modal-default-button" @click="cancel">取消</button> <button class="modal-default-button" @click="submitForm">确定</button> </div> </div> </div> </div> </template> <script> export default { props: { user: { type: Object, default: () => ({}) } }, data () { return { formTitle: this.user.id ? '编辑用户' : '添加用户' } }, computed: { visible: { get () { return this.user.id !== undefined }, set (value) { this.$emit('update:visible', value) } } }, methods: { show (user = {}) { this.$emit('update:user', user) this.visible = true }, cancel () { this.visible = false }, submitForm () { this.$emit('submit', this.user) this.visible = false } } } </script> ``` 在上面的代码中,我们定义了一个用户表单组件,其中包含了姓名、年龄和性别三个输入框,以及确定和取消按钮。在表单中填写完用户信息并点击确定按钮后,会触发`submit`事件,并将用户信息作为参数传递给父组件。 接下来,我们需要创建一个Vuex模块,用于管理用户列表和实现增删改查操作: ```javascript import axios from 'axios' const state = { users: [] } const mutations = { setUsers (state, users) { state.users = users }, addUser (state, user) { state.users.push(user) }, updateUser (state, user) { const index = state.users.findIndex(u => u.id === user.id) if (index !== -1) { state.users.splice(index, 1, user) } }, deleteUser (state, userId) { const index = state.users.findIndex(u => u.id === userId) if (index !== -1) { state.users.splice(index, 1) } } } const actions = { async fetchUsers ({ commit }) { const response = await axios.get('/api/users') commit('setUsers', response.data) }, async createUser ({ commit }, user) { const response = await axios.post('/api/users', user) commit('addUser', response.data) }, async updateUser ({ commit }, user) { await axios.put(`/api/users/${user.id}`, user) commit('updateUser', user) }, async deleteUser ({ commit }, userId) { await axios.delete(`/api/users/${userId}`) commit('deleteUser', userId) } } const getters = { users: state => state.users } export default { state, mutations, actions, getters } ``` 在上面的代码中,我们定义了一个名为`users`的状态,用于存储用户列表。然后,我们定义了四个Mutation方法,分别用于设置用户列表、添加用户、更新用户和删除用户。接着,我们定义了四个Action方法,分别用于获取用户列表、创建用户、更新用户和删除用户。最后,我们定义了一个Getter方法,用于获取用户列表。 最后,我们需要配置Vue Router和创建一个入口文件,用于启动我们的应用: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Vuex from 'vuex' import App from './App.vue' import UserList from './components/UserList.vue' import UserStore from './store/user' Vue.use(VueRouter) Vue.use(Vuex) const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: UserList } ] }) const store = new Vuex.Store({ modules: { user: UserStore } }) new Vue({ el: '#app', router, store, render: h => h(App) }) ``` 在上面的代码中,我们首先引入了Vue、Vue Router和Vuex,并定义了一个Vue实例,其包含了一个`UserList`组件和一个名为`user`的Vuex模块。然后,我们创建了一个Vue Router实例,并将其传递给Vue实例。最后,我们启动了应用,并将Vue实例挂载到`#app`元素上。 到这里,我们就完成了用Vue组件、Vue Router、Vuex和Axios实现增删改查的示例。当然,这只是一个简单的示例,实际应用中可能需要更多的功能和处理更多的异常情况。

相关推荐

最新推荐

recommend-type

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
recommend-type

vue 实现axios拦截、页面跳转和token 验证

第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: ...
recommend-type

基于GEC6818五子棋游戏GEC6818_Gomoku.zip

五子棋游戏想必大家都非常熟悉,游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【技术】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
recommend-type

单片机C语言Proteus仿真实例左右来回的流水灯

单片机C语言Proteus仿真实例左右来回的流水灯提取方式是百度网盘分享地址
recommend-type

电能表接线错误分析软件.zip

电能表接线错误分析软件
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

用matlab绘制高斯色噪声情况下的频率估计CRLB,其中w(n)是零均值高斯色噪声,w(n)=0.8*w(n-1)+e(n),e(n)服从零均值方差为se的高斯分布

以下是用matlab绘制高斯色噪声情况下频率估计CRLB的代码: ```matlab % 参数设置 N = 100; % 信号长度 se = 0.5; % 噪声方差 w = zeros(N,1); % 高斯色噪声 w(1) = randn(1)*sqrt(se); for n = 2:N w(n) = 0.8*w(n-1) + randn(1)*sqrt(se); end % 计算频率估计CRLB fs = 1; % 采样频率 df = 0.01; % 频率分辨率 f = 0:df:fs/2; % 频率范围 M = length(f); CRLB = zeros(M,1); for
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。