@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>

刪除用戶非常簡單，定義一個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>

修改用戶

修改用戶需要定義一個組件，這里就是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項目用戶管理系統 代碼：

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

總結

以上是生活随笔為你收集整理的四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能（完成篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。