四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能(完成篇)
发布日期:2021-07-01 02:07:35
浏览次数:2
分类:技术文章
本文共 3083 字,大约阅读时间需要 10 分钟。
@Author:Runsen
@Date:2020/7/10人生最重要的不是所站的位置,而是内心所朝的方向。只要我在每篇博文中写得自己体会,修炼身心;在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰难,奋勇前行,不忘初心,砥砺前行,人生定会有所收获,不留遗憾 (作者:Runsen )
作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件。导致翘课严重,专业排名中下。.在大学60%的时间,都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海!
上次完成了用户管理系统的 实现弹窗,搜索和详细页功能,接下来就是在详细页实现用户的修改和删除。
文章目录
删除用户
首先在用户详情的CustomerDetail,vue
中的template中添加两个按钮,代码如下。
编辑
删除用户非常简单,定义一个deleteCustomer
函数就可以了。v-on:click
就是当点击的时候,就执行删除的逻辑,然后向3000端口发起删除的请求。
返回 { { customer.name}}
编辑
- { { customer.phone}}
- { { customer.email}}
- { { customer.education}}
- { { customer.graduationschool}}
- { { customer.profession}}
- { { customer.profile}}
修改用户
修改用户需要定义一个组件,这里就是Edit.vue
下面就是在main.js中定义修改用户的路由。
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import VueRouter from 'vue-router'import VueResource from 'vue-resource'import App from './App'import Customers from './components/Customers.vue'import About from './components/About.vue'import Add from './components/Add.vue'import CustomerDetail from './components/CustomerDetail.vue'import Edit from './components/Edit.vue'Vue.config.productionTip = falseVue.use(VueRouter)Vue.use(VueResource)// 设置路由const router = new VueRouter({ mode:"history", base: __dirname, routes:[ { path:'/',component:Customers}, { path:'/about',component:About}, { path:'/add',component:Add}, { path:'/customer/:id',component:CustomerDetail}, { path:"/edit/:id",component:Edit}, ]})/* eslint-disable no-new */new Vue({ router, template: ``}).$mount("#app")
修改用户的模板就是添加用户的模板,直接复制过来。就是把POST写成
编辑用户
本次Vue项目用户管理系统 代码:
https://github.com/MaoliRUNsen/User.git
转载地址:https://maoli.blog.csdn.net/article/details/107252130 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月21日 00时52分58秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
scala list
2019-05-01
svn服务器安装
2019-05-01
spark 笔记1
2019-05-01
shell dirname basename
2019-05-01
未来已至,5G加持下的云游戏将走向何方?
2019-05-01
计算机网络 —— 网络层 1.
2019-05-01
Android生命周期
2019-05-01
Android 之 ContentProvider 与 ContentResolver
2019-05-01
【接口自动化】
2019-05-01
Spring Boot 安全框架 Shiro 入门
2019-05-01
如何用一句话激怒互联网人?
2019-05-01
用 Python 爬了点你们喜欢的电影
2019-05-01
推荐一位川大零基础转行 Python 的人生勇士
2019-05-01
讲真,做Python一定不要只会一个方向!
2019-05-01
Python解惑之:True与False
2019-05-01
你要的微信小程序终于来了
2019-05-01
有了这些 Chrome 插件,效率提升10倍(建议收藏)
2019-05-01
Python 开发者都会遇到的错误:UnboundLocalError
2019-05-01
只有1%的程序员搞懂过浮点数陷阱
2019-05-01
一名 Google 工程师的大数据处理经验
2019-05-01