本文共 3083 字，大约阅读时间需要 10 分钟。

@Author：Runsen

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾 （作者：Runsen ）

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海！

上次完成了用户管理系统的 实现弹窗，搜索和详细页功能，接下来就是在详细页实现用户的修改和删除。

删除用户

首先在用户详情的CustomerDetail,vue中的template中添加两个按钮，代码如下。

	
    
     		编辑	
    	删除

删除用户非常简单，定义一个deleteCustomer函数就可以了。v-on:click就是当点击的时候，就执行删除的逻辑，然后向3000端口发起删除的请求。

修改用户

修改用户需要定义一个组件，这里就是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 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！