VueCli3.x全栈开发-微信聊天(node/express/mongodb/vuecli3.x)

登陆，注册功能，以及后端所需要的接口等已经在上一个项目实现：微信朋友圈

1.通讯录组件AddressBook.vue 的搭建

<template>
    <div class="address-book">
        <Header
            title='通讯录'
            btn_icon='user-plus'>
        </Header>
        <div class="container">
            <!--搜索框-->
            <div class="search_wrap">
                <div class="search_content">
                    <i class="fa fa-search"></i>
                    <input type="text" placeholder="搜索" v-model="search_value">
                </div>
            </div>
            <!--用户列表-->
            <div class="cell-wrap">
                <UserCell
                        v-for="(user,index) in selectUser"
                        :key="index"
                        :user="user"
                        @click.native="getUserInfomation(user)"
                />
            </div>
            <div class="count_wrap">
                <span>{
  {selectUser.length}}位联系人</span>
            </div>
        </div>
    </div>
</template>

<script>
import Header from "../../components/Header";
import UserCell from "../../components/UserCell";
export default {
    
  name: "book",
    data(){
    
      return{
    
          allUsers:[],//全部用户
          selectUser:[],//被搜索的用户
          search_value:''//输入框内容
      }
    },
  components: {
    
    Header,UserCell
  },
    created(){
    
      this.getAllUser();
    },
    watch:{
    
      //搜索用户
      search_value(){
    
          this.getSelectUsers();
      }
    },
    methods:{
    
        //获取所有用户
        getAllUser(){
    
          this.$axios.get("/api/users/all").then((res,err)=>{
    
              if(err) return alert("获取所有用户信息失败");
              this.allUsers = res.data;
              this.selectUser=res.data;
          })
      },
        //获得被选中的用户列表
        getSelectUsers(){
    
          this.selectUser = this.allUsers.filter(user=>{
    
              return user.name.includes(this.search_value);
          })
        },
        // ...mapActions({}),
        getUserInfomation(user){
    
            // alert("hah");
            this.$store.dispatch("setTargetUser",user);
            this.$router.push("/userInformation")
        }
    }
};
</script>

<style scoped>
    .address-book{
    
        width: 100%;
        height: 100%;
        /*overflow: hidden;*/
        /*margin-bottom: 50px;*/
        margin-bottom: 10px;
    }
    .container{
    
        overflow: auto;
        width: 100%;
        /*height: 100%;*/
        height: calc(100% - 50px);
        margin-top: 50px;
        /*margin-bottom: 100px;*/
        /*padding-bottom: 150px;*/
    }
    .container::-webkit-scrollbar{
    
        display: none;
    }
    .search_wrap{
    
        background-color: #f1f1f1;
        padding: 8px;
        box-sizing: border-box;
        width: 100%;
    }
    .search_content{
    
        height: 40px;
        background: #ffffff;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 16px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }
    .search_content i{
    
        color: #888888;
        margin-right: 10px;
    }
    .search_content input{
    
        height: 36px;
        width: 90%;
        outline: none;
        border: none;
        font-size: 14px ;
    }
    .count_wrap{
    
        text-align: center;
        line-height: 14px;
        font-size: 14px;
        font-weight: lighter;
    }
</style>

2.用户信息组件UserCell.vue

<template>
    <div class="user-cell">
        <div class="cell-wrapper">
            <div class="cell-title" v-if="user">
                <img :src="user.avatar" alt="">
                <span v-show="count" class="badge">{
  {count}}</span>
                <span>{
  {user.name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
    
        name: "UserCell",
        props:{
    
            user:Object,
            count:Number
        }
    }
</script>

<style scoped>

    .cell-wrapper{
    
        background-color: #fff;
        box-sizing: border-box;
        color: inherit;
        min-height: 50px;
        display: flex;
        font-size: 16px;
        /*line-height: 1;*/
        overflow: hidden;
        padding: 0 8px;
        width: 100%;
        line-height: 50px;
        border-top: 1px solid gainsboro;
    }
    .cell-title{
    
        flex: 1;
        margin-top: 10px;
        /*vertical-align: center;*/
        /*align-items: center;*/
        /*text-align: ;*/
        display: flex;
    }
    .cell-title img{
    
        width: 2.5rem;
        height: 2.5rem;
        vertical-align: center