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

程序员文章站 2022-06-06 10:03:05

...

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

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

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

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

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

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

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

添加弹窗

添加弹窗，我们只需要在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>。

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

传递参数

下面需要设置弹出的信息，这样就简单，通过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>

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

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

实现搜索功能

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

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

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

关键是如何实现搜索功能，其实就是一过滤函数，这里定义为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>

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

详细页功能完成

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

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

于是新建一个组件，叫做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

上一篇：手把手教你学单链表

下一篇： android 的android httpClient详解

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

文章目录

添加弹窗

传递参数

实现搜索功能

详细页功能完成

云指建站：不用花钱做优化，就能实现网站上首页

4个关键词，告诉你如何快速提升网站用户体验！

米拓企业建站系统MetInfo V6.1.2 版本发布上线

利用selenium 3.7和python3添加cookie模拟登陆的实现

建站资源：企业建站系统免费下载（内含响应式模板1套）

微店：确定目标消费群体的关键和技巧有哪些？

python中学习K-Means和图片压缩

Word实用小技巧锦集搜索整理的会了之后可以提高效率

为什么要使用微信外卖系统自建本地外卖平台？

网站建设系统程序如何选择？

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

文章目录

添加弹窗

传递参数

实现搜索功能

详细页功能完成

云指建站：不用花钱做优化，就能实现网站上首页

4个关键词，告诉你如何快速提升网站用户体验！

米拓企业建站系统MetInfo V6.1.2 版本发布上线

利用selenium 3.7和python3添加cookie模拟登陆的实现

建站资源：企业建站系统免费下载（内含响应式模板1套）

微店：确定目标消费群体的关键和技巧有哪些？

python中学习K-Means和图片压缩

Word实用小技巧锦集搜索整理的会了之后可以提高效率

为什么要使用微信外卖系统自建本地外卖平台？

网站建设系统程序如何选择？

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