荐四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）

程序员文章站 2022-03-30 09:49:53

@Author：Runsen@Date：2020/7/10人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：Runsen ）作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。我的征...

@Author：Runsen
@Date：2020/7/10

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

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

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

删除用户

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

<span class="pull-right">
	<router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">
		编辑
	</router-link>
	<button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button>
</span>

荐
四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）

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

<template>
  <div class="details container">
  	<router-link to="/" class="btn btn-default">返回</router-link>
    <h1 class="page-header">
    	{{customer.name}}
    	<span class="pull-right">
    		<router-link class="btn btn-primary" v-bind:to="'/edit/'+customer.id">
    			编辑
    		</router-link>
    		<button class="btn btn-danger" v-on:click="deleteCustomer(customer.id)">删除</button>
    	</span>
    </h1>
    <ul class="list-group">
    	<li class="list-group-item">
    		<span class="glyphicon glyphicon-asterisk"> 
    			{{customer.phone}}
    		</span>
    	</li>
    	<li class="list-group-item">
    		<span class="glyphicon glyphicon-plus"> 
    			{{customer.email}}
    		</span>
    	</li>
    </ul>

    <ul class="list-group">
    	<li class="list-group-item">
    		<span class="glyphicon glyphicon-asterisk">
    			{{customer.education}}
    		</span>
    	</li>
    	<li class="list-group-item">
    		<span class="glyphicon glyphicon-plus"> 
    			{{customer.graduationschool}}
    		</span>
    	</li>

		<li class="list-group-item">
			<span class="glyphicon glyphicon-asterisk"> 
				{{customer.profession}}
			</span>
		</li>
		<li class="list-group-item">
			<span class="glyphicon glyphicon-plus"> 
				{{customer.profile}}
			</span>
		</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'cumstomerdetails',
  data () {
    return {
      customer:""
    }
  },
  methods:{
  	fetchCustomers(id){
      this.$http.get("http://localhost:3000/users/"+id)
          .then(function(response){
            console.log(response);
            this.customer = response.body;
          })
    },
    deleteCustomer(id){
    	// console.log(id);
    	this.$http.delete("http://localhost:3000/users/"+id)
    		.then(function(response){
    			this.$router.push({path:"/",query:{alert:"用户删除成功!"}});
    		})
    }
  },
  created(){
  	this.fetchCustomers(this.$route.params.id);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

荐
四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）

修改用户

修改用户需要定义一个组件，这里就是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 = false
Vue.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: `
	<div id="app">
		 <nav class="navbar navbar-default">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="#">用户管理系统</a>
	        </div>
	        <div id="navbar" class="collapse navbar-collapse">
	          <ul class="nav navbar-nav">
	            <li><router-link to="/">主页</router-link></li>
	            <li><router-link to="/about">关于我们</router-link></li>
	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li><router-link to="/add">添加用户</router-link></li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<router-view></router-view>
	</div>
  `
}).$mount("#app")

修改用户的模板就是添加用户的模板，直接复制过来。就是把POST写成

<template>
  <div class="edit container">
    <Alert v-if="alert" v-bind:message="alert"></Alert>
    <h1 class="page-header">编辑用户</h1>
    <form v-on:submit="updateCustomer">
    	<div class="well">
    		<h4>用户信息</h4>
    		<div class="form-group">
    			<label>姓名</label>
    			<input type="text" class="form-control" placeholder="name" v-model="customer.name">
    		</div>
    		<div class="form-group">
    			<label>电话</label>
    			<input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
    		</div>
    		<div class="form-group">
    			<label>邮箱</label>
    			<input type="text" class="form-control" placeholder="email" v-model="customer.email">
    		</div>
    		<div class="form-group">
    			<label>学历</label>
    			<input type="text" class="form-control" placeholder="education" v-model="customer.education">
    		</div>
    		<div class="form-group">
    			<label>毕业学校</label>
    			<input type="text" class="form-control" placeholder="graduationschool" v-model="customer.graduationschool">
    		</div>
    		<div class="form-group">
    			<label>职业</label>
    			<input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
    		</div>
    		<div class="form-group">
    			<label>个人简介</label>
    			<!-- <input type="text" class="form-control" placeholder="profile" v-model="customer.profile"> -->
    			<textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
    		</div>
    		<button type="submit" class="btn btn-primary">确认</button>
    	</div>
    </form>
  </div>
</template>

<script>
import Alert from './Alert'
export default {
  name: 'add',
  data () {
    return {
      customer:{},
      alert:""
    }
  },
  methods:{
    fetchCustomer(id){
        this.$http.get("http://localhost:3000/users/"+id)
            .then(function(response){
              // console.log(response);
              this.customer = response.body;
            })
    },
  	updateCustomer(e){
  		// console.log(123);
  		if (!this.customer.name || !this.customer.phone || !this.customer.email) {
        // console.log("请添加对应的信息!");
  			this.alert = "请添加对应的信息!";
  		}else{
  			let updateCustomer = {
  				name:this.customer.name,
  				phone:this.customer.phone,
  				email:this.customer.email,
  				education:this.customer.education,
  				graduationschool:this.customer.graduationschool,
  				profession:this.customer.profession,
  				profile:this.customer.profile
  			}
  			this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updateCustomer)
  				.then(function(response){
  					// console.log(response);
  					this.$router.push({path:"/",query:{alert:"用户信息更新成功!"}});
  				})
  			e.preventDefault();
  		}
  		e.preventDefault();
  	}
  },
  created(){
    this.fetchCustomer(this.$route.params.id);
  },
  components:{
    Alert
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

荐
四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）

本次Vue项目用户管理系统代码：

https://github.com/MaoliRUNsen/User.git

本文地址：https://blog.csdn.net/weixin_44510615/article/details/107252130

上一篇：奶茶妹妹列传

下一篇： [日常] Go语言圣经--Map习题

荐四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）

文章目录

删除用户

修改用户

C#实现自定义windows系统日志的方法

C#实现清空回收站的方法

Extjs4如何处理后台json数据中日期和时间

C#实现由四周向中心缩小的窗体退出特效

入门:CorelDRAW 12新增功能使用手册

PHP实现笛卡尔积算法的实例讲解

Hbase系统架构简述

C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

C#自定义事件监听实现方法

C#实现判断当前操作用户管理角色的方法

荐 四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能（完成篇）

文章目录

删除用户

修改用户

C#实现自定义windows系统日志的方法

C#实现清空回收站的方法

Extjs4如何处理后台json数据中日期和时间

C#实现由四周向中心缩小的窗体退出特效

入门:CorelDRAW 12新增功能使用手册

PHP实现笛卡尔积算法的实例讲解

Hbase系统架构简述

C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

C#自定义事件监听实现方法

C#实现判断当前操作用户管理角色的方法

荐四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）