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

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

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

上次完成了用户管理系统的添加用户功能，具体效果如下所示。

但是现在需要弹出的时候，有弹窗。这样就可以显示出添加用户成功。

在这里我选择了可关闭的警告框

文章目录

添加弹窗
传递参数
实现搜索功能
详细页功能完成

添加弹窗

添加弹窗，我们只需要在Customers.vue添加一个组件，这里取名叫做Alert，因此新建一个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>

现在就在Customers.vue中引用就可以了。

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

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

传递参数

下面需要设置弹出的信息，这样就简单，通过Add.vue在this.$router.push({path:"/",query:{alert:"用户信息添加成功!"}});设置query弹出的信息。

具体的Add.vue的代码如下。

<template><div class="add container"><h1 class="pag-header">添加用户</h1><form v-on:submit="addCustomer"><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>
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("请添加对应的信息!");this.alert = "请添加对应的信息!";}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:"用户信息添加成功!"}});})e.preventDefault();}e.preventDefault();}},
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

在拿到query的alert中的用户信息添加成功!信息，在创建用户的时候判断是否有弹出信息，template中的Alert通过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">用户管理系统</h1><table class="table table-striped"><thead><tr><th>姓名</th><th>电话</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: {// 连接数据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>

下面测试添加用户是否弹出弹框。

实现搜索功能

下面我们在主页上添加一个input标签实现搜索功能。

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

关键是如何实现搜索功能，其实就是一过滤函数，这里定义为filterBy，传入customers总人数和关键词参数。在v-for使用函数即可，customers.vue代码如下。

<template><div class="customers container"><Alert v-if="alert"  v-bind:message="alert"></Alert><h1 class="page-header">用户管理系统</h1><input type="text" class="form-control" placeholder="搜索" v-model="filterInput"><br><table class="table table-striped"><thead><tr><th>姓名</th><th>电话</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>

详细页功能完成

在主页中，我决定添加详细页，来做用户的删除和修改功能。

于是新建一个组件，叫做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添加一个按钮和路由。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)
// 设置路由
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="#">用户管理系统</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")

最后就是实现CustomerDetail.vue的效果，定义一个函数fetchCustomers传入ID属性，拿到API中的json数据，ID直接通过点击链接参数取得即可。

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

具体效果如下所示。

四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）相关推荐

四十一、Vue项目上手 | 用户管理系统实现用户修改和删除功能（完成篇）
@Author:Runsen @Date:2020/7/10 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
三十八、Vue项目上手 | 用户管理系统（上篇）
@Author:Runsen @Date:2020/7/7 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
三十九、Vue项目上手 | 用户管理系统实现添加用户功能（中篇）
@Author:Runsen @Date:2020/7/8 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
【Microsoft Azure 的1024种玩法】五十四. 十分钟快速上手创建部署Azure speech服务
[简介] Azure语音服务是Microsoft提供稳定可靠的云通信服务,其在单个 Azure 订阅中统合了语音转文本.文本转语音以及语音翻译功能,我们可以通过各种方式(语音 CLI.语音 SDK.S ...
第四阶段vue项目总结(新手小白一枚，不建议参考。 )
第四阶段vue项目总结(新手小白一枚,本人第一篇文,不建议参考. ) 问题 1.数据传输问题(后端收不到数据) 2.性别和状态0和1的转换 3.elementUI组件的处理 4.switch开关的处理 ...
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
vue项目中如何利用lodop控件实现多页打印
针对windows环境下的vue项目中如何利用lodop控件实现打印的功能,不支持mac环境下载安装首先去lodop官网下载中心下载相关的包,完成安装重点关注前四个文件,安装第一个文件,在第二个 ...
六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...

四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）

文章目录

添加弹窗

传递参数

实现搜索功能

详细页功能完成

四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）相关推荐

最新文章

热门文章

四十、Vue项目上手 | 用户管理系统 实现弹窗，搜索和详细页功能（下篇）

文章目录

添加弹窗

传递参数

实现搜索功能

详细页功能完成

四十、Vue项目上手 | 用户管理系统 实现弹窗，搜索和详细页功能（下篇）相关推荐

最新文章

热门文章

四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）

四十、Vue项目上手 | 用户管理系统实现弹窗，搜索和详细页功能（下篇）相关推荐