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

人生最重要的不是所站的位置，而是內(nèi)心所朝的方向。只要我在每篇博文中寫(xiě)得自己體會(huì)，修煉身心；在每天的不斷重復(fù)學(xué)習(xí)中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會(huì)有所收獲，不留遺憾 （作者：Runsen ）

作者介紹：Runsen目前大三下學(xué)期，專(zhuān)業(yè)化學(xué)工程與工藝，大學(xué)沉迷日語(yǔ)，Python， Java和一系列數(shù)據(jù)分析軟件。導(dǎo)致翹課嚴(yán)重，專(zhuān)業(yè)排名中下。.在大學(xué)60%的時(shí)間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！

上次完成了用戶(hù)管理系統(tǒng)的添加用戶(hù)功能，具體效果如下所示。

但是現(xiàn)在需要彈出的時(shí)候，有彈窗。這樣就可以顯示出添加用戶(hù)成功。

在這里我選擇了可關(guān)閉的警告框

文章目錄

• 添加彈窗
• 傳遞參數(shù)
• 實(shí)現(xiàn)搜索功能
• 詳細(xì)頁(yè)功能完成

添加彈窗

添加彈窗，我們只需要在Customers.vue添加一個(gè)組件，這里取名叫做Alert，因此新建一個(gè)Alert.vue。

彈出的信息用message傳遞。Alert.vue代碼如下。

<template> <div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>{{message}}</strong> </div> </template> <script> export default {name: 'alert',props:["message"],data () {return { }} } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

現(xiàn)在就在Customers.vue中引用就可以了。

import Alert from './Alert' components:{Alert}

在template的模板上添加<Alert message="test"></Alert>。

傳遞參數(shù)

下面需要設(shè)置彈出的信息，這樣就簡(jiǎn)單，通過(guò)Add.vue在this.$router.push({path:"/",query:{alert:"用戶(hù)信息添加成功!"}});設(shè)置query彈出的信息。

具體的Add.vue的代碼如下。

<template><div class="add container"><h1 class="pag-header">添加用戶(hù)</h1><form v-on:submit="addCustomer"><div class="well"><h4>用戶(hù)信息</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>電話(huà)</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>學(xué)歷</label><input type="text"class="form-control"placeholder="education"v-model="customer.education"></div><div class="form-group"><label>畢業(yè)學(xué)校</label><input type="text"class="form-control"placeholder="graduationschool"v-model="customer.graduationschool"></div><div class="form-group"><label>職業(yè)</label><input type="text"class="form-control"placeholder="profession"v-model="customer.profession"></div><div class="form-group"><label>個(gè)人簡(jiǎn)介</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> export default {name: 'add',data() {return {customer:{}}},methods:{addCustomer(e){// console.log(123);if (!this.customer.name || !this.customer.phone || !this.customer.email) {// console.log("請(qǐng)?zhí)砑訉?duì)應(yīng)的信息!");this.alert = "請(qǐng)?zhí)砑訉?duì)應(yīng)的信息!";}else{let newCustomer = {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.post("http://localhost:3000/users",newCustomer).then(function(response){// console.log(response);this.$router.push({path:"/",query:{alert:"用戶(hù)信息添加成功!"}});})e.preventDefault();}e.preventDefault();}}, } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

在拿到query的alert中的用戶(hù)信息添加成功!信息，在創(chuàng)建用戶(hù)的時(shí)候判斷是否有彈出信息，template中的Alert通過(guò)v-bind:message綁定傳給Alert.vue，Add.vue代碼如下。

<template><div class="customers container"><Alert v-if="alert" v-bind:message="alert"></Alert><h1 class="page-header">用戶(hù)管理系統(tǒng)</h1><table class="table table-striped"><thead><tr><th>姓名</th><th>電話(huà)</th><th>郵箱</th><th></th></tr></thead><tbody v-for="customer in customers"><tr><td>{{customer.name}}</td><td>{{customer.phone}}</td><td>{{customer.email}}</td><td></td></tr></tbody></table></div> </template> <script> import Alert from './Alert' export default {name: 'customers',data() {return {customers :[],alert:""}},methods: {// 連接數(shù)據(jù)fetchCustomers(){this.$http.get("http://localhost:3000/users").then(function(response){console.log(response)this.customers = response.body})}},created() {if(this.$route.query.alert){this.alert = this.$route.query.alert;}this.fetchCustomers();},updated() {this.fetchCustomers();},components:{Alert} } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

下面測(cè)試添加用戶(hù)是否彈出彈框。

實(shí)現(xiàn)搜索功能

下面我們?cè)谥黜?yè)上添加一個(gè)input標(biāo)簽實(shí)現(xiàn)搜索功能。

<input type="text" class="form-control" placeholder="搜索" v-model="filterInput">

關(guān)鍵是如何實(shí)現(xiàn)搜索功能，其實(shí)就是一過(guò)濾函數(shù)，這里定義為filterBy，傳入customers總?cè)藬?shù)和關(guān)鍵詞參數(shù)。在v-for使用函數(shù)即可，customers.vue代碼如下。

<template><div class="customers container"><Alert v-if="alert" v-bind:message="alert"></Alert><h1 class="page-header">用戶(hù)管理系統(tǒng)</h1><input type="text" class="form-control" placeholder="搜索" v-model="filterInput"><br><table class="table table-striped"><thead><tr><th>姓名</th><th>電話(huà)</th><th>郵箱</th><th></th></tr></thead><tbody><tr v-for="customer in filterBy(customers,filterInput)"><td>{{customer.name}}</td><td>{{customer.phone}}</td><td>{{customer.email}}</td><td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">詳情</router-link></td></tr></tbody></table></div> </template><script> import Alert from './Alert' export default {name: 'customers',data () {return {customers:[],alert:"",filterInput:""}},methods:{fetchCustomers(){this.$http.get("http://localhost:3000/users").then(function(response){// console.log(response);this.customers = response.body;})},filterBy(customers,value){return customers.filter(function(customer){return customer.name.match(value);})}},created(){if (this.$route.query.alert) {this.alert = this.$route.query.alert;}this.fetchCustomers();},updated(){this.fetchCustomers();},components:{Alert} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

詳細(xì)頁(yè)功能完成

在主頁(yè)中，我決定添加詳細(xì)頁(yè)，來(lái)做用戶(hù)的刪除和修改功能。

于是新建一個(gè)組件，叫做CustomerDetail.vue，用的是about.vue的模板，就是改了一下name和class。

<template><div class="details container">details</div> </template> <script> export default {name: 'cumstomerdetails',data() {return {}} } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

下面就在main.js中的template添加一個(gè)按鈕和路由。main.js代碼如下。定義的路由是/customer/:id

// 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'Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueResource) // 設(shè)置路由 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}] }) /* 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="#">用戶(hù)管理系統(tǒng)</a></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><router-link to="/">主頁(yè)</router-link></li><li><router-link to="/about">關(guān)于我們</router-link></li></ul><ul class="nav navbar-nav navbar-right"><li><router-link to="/add">添加用戶(hù)</router-link></li></ul></div></div></nav><router-view></router-view></div>` }).$mount("#app")

最后就是實(shí)現(xiàn)CustomerDetail.vue的效果，定義一個(gè)函數(shù)fetchCustomers傳入ID屬性，拿到API中的json數(shù)據(jù)，ID直接通過(guò)點(diǎn)擊鏈接參數(shù)取得即可。

<template><div class="details container"><router-link to="/" class="btn btn-default">返回</router-link><h1 class="page-header">{{customer.name}}</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;})},},created(){this.fetchCustomers(this.$route.params.id);} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

具體效果如下所示。

總結(jié)

以上是生活随笔為你收集整理的四十、Vue项目上手 | 用户管理系统 实现弹窗，搜索和详细页功能（下篇）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。