第九课时通讯录列表-前端实现

最新推荐文章于 2026-03-04 13:42:43 发布

原创最新推荐文章于 2026-03-04 13:42:43 发布 · 590 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

java1234课程aliyu 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue2+jwt+springboot+mybaits

8 篇文章

订阅专栏

本篇博客介绍如何组件化实现通讯录列表。主要包括Header、Search和List组件的创建。Header组件位于顶部，Search组件用于搜索，List组件则展示按字母排序的联系人，采用绝对布局。同时，对颜色样式进行了封装，并在PhoneBook中引入和配置这些组件。

概述

组件化界面，三个区域。
在这里插入图片描述
“通讯录” +符合 - src/pages/components/Header.vue，相对布局：

<template>
    <div class="header">
      通讯录
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style lang="stylus" scoped>

  .header
    position: relative
    overflow: hidden
    height: 0.86rem
</style>

搜索 -src/pages/components/Search.vue

<template>
  <div class="search">
    <input type="text" placeholder="搜索"/>
  </div>
</template>

<script>
    export default {
        name: "Search"
    }
</script>

<style lang="stylus" scoped>

  .search
    height: 0.72rem
</style>

列表 -src/pages/components/List.vue：
每个字母为一个div，里面是字母和字母下的联系人，用了绝对布局

<template>
    <div class="list">
      <div class="phoneBook">
        <div class="title">A</div>
        <div class="item">
          <img src="http://www.open1111.com:80/image/default.jpg" >
          <div class="content border-bottom">阿里巴巴A</div>
        </div>
      </div>
      <div class="phoneBook">
        <div class="title">B</div>
        <div class="item">
          <img src="http://www.open1111.com:80/image/010.png" >
          <div class="content border-bottom">Bibi</div>
        </div>
        <div class="item">
          <img src="http://www.open1111.com:80/image/20190905093006.jpg">
          <div class="content border-bottom">B哥</div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "List"
    }
</script>

<style lang="stylus" scoped>

  @import "~@/assets/styles/varibles.styl"

  .border-bottom
    &:before
      border-color: $borderColor

  .list
    overflow: hidden
    position: absolute
    top: 1.58rem
    left: 0
    right: 0
    bottom: 0
    .title
      line-height: .54rem
      background: $bgColor
      padding-left: .2rem
      color: #666
      font-size: .26rem
    .item
      line-height: .76rem
      margin: .2rem
      img
        float: left
        width: .8rem
        height: .8rem
        border-radius: .2rem
      .content
        padding-left: 1rem
        font-size: .4rem
        padding-bottom: .3rem

</style>

顶部和底部用相对布局，滚动的用绝对布局。

对颜色样式进行封装：
定义在这里插入图片描述
引入：

@import "~@/assets/styles/varibles.styl"

使用：
在这里插入图片描述
将它们引入PhoneBook：

<template>
  <div>
    <phone-book-header></phone-book-header>
    <phone-book-search></phone-book-search>
    <phone-book-list></phone-book-list>
  </div>
</template>

<script>
  import axios from 'axios'
  import {getServerUrl} from '@/config/sys.js'
  import PhoneBookHeader from './components/Header'
  import PhoneBookSearch from './components/Search'
  import PhoneBookList from './components/List'

  export default {
    name: "PhoneBook",
    components:{
      PhoneBookHeader,
      PhoneBookSearch,
      PhoneBookList
    },
    methods:{
      refreshToken(){
        let token=window.localStorage.getItem("token")
        axios.defaults.headers.common['token']=token
        let url=getServerUrl("refreshToken");
        axios.get(url)
          .then(response=>{
            console.log("token刷新："+response.data.token)
            window.localStorage.setItem("token",response.data.token);
          }).catch(error=>{
          console.log(error)
        })
      },
      getPhoneBooks(){
        let token=window.localStorage.getItem("token")
        axios.defaults.headers.common['token']=token
        let url=getServerUrl("phoneBook/loadAll");
        /* axios.get(url)
           .then(response=>{
             console.log(response)
           }).catch(error=>{
           console.log(error)
         })*/
      }
    },
    mounted() {
      setInterval(this.refreshToken,1000*60*10); // 10分钟刷新一次token
      this.getPhoneBooks(); // 加载所有电话簿信息
    }
  }
</script>

<style scoped>

</style>