vue分类页开发--axios数据获取，localstorage数据缓存

效果图

 

1、首先在app.vue中，给路由添加keep-alive，使其能够被缓存

 

 

2、配置路由 router/index.js

 

 

3、书写各部分组件

src/pages/category/header.vue

<template>
    <div class="header">
        <i class="iconfont icon-scan header-left"></i>
        <div class="header-center">搜索框</div>
        <i class="iconfont icon-msg header-right"></i>
    </div>
</template>

<script>
export default {
    name:'CategoryHeader'
}
</script>

<style lang="scss" scoped>
    .header{
        background-color:rgba(222,24,27,0.9);
        transition:background-color 0.5s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:5px 20px;

        .iconfont{
            font-size:24px;
            color:#fff;
        }

        .header-center{
            flex:1;
        }
    } 
</style>

 

src/pages/category/tab.vue

<template>
    <div class="tab-container">
        <ul class="tab">
            <li class="tab-item" :class="{'tab-item-active':item.id===curId}" v-for="(item,index) in items" :key="index" @click="switchTab(item.id)">
                {{item.name}}
            </li>
        </ul>
    </div>
</template>

<script>
import {categoryNames} from './config';

export  {
    name:'CategoryTab',data(){
        return{
            items:categoryNames,curId:""
        }
    },created(){
        this.switchTab(this.items[0].id);
    },methods:{
        switchTab(id){
            this.curId=id;
            this.$emit("switch-tab",id);//派发事件，传递id
        }
    }
}
</script>

<style lang="scss" scoped>
    .tab-container{
        width:100%;
        height:100%;
        overflow:auto;
    }
  .tab {
    width: 100%;
    height:auto;

    &-item {
      height: 46px;
      background-color: #fff;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      color: #080808;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 46px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

      &:last-child {
        border-bottom: none;
      }
    }

    &-item-active {
      background: none;
      border-right: none;
      color: #f23030;
    }
  }
</style>

 

src/pages/category/content.vue

<template>
<div class="content-wrapper">
    <div class="loading-container" v-if="isLoading">
      <div class="loading-wrapper">
        <me-loading/>
      </div>
    </div>
    <scrollbar ref="scroll" @pull-up="pullUp" @pull-down="pullRefresh">
      <div class="content">
        <div class="pic" v-if="content.banner">
          <a :href="content.banner.linkUrl" class="pic-link">
            <img @load="updateScroll" :src="content.banner.picUrl" class="pic-img">
          </a>
        </div>
        <div class="section" v-for="(section,index) in content.data" :key="index" >
          <h4 class="section-title">{{section.name}}</h4>
          <ul class="section-list">
            <li class="section-item" v-if="item.picUrl">
                  <img v-lazy="item.picUrl" class="section-img" />
                </p>
                <p class="section-name">{{item.name}}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </scrollbar>
    <div class="g-backtop-container">
        <me-backtop :visible="backtopVisible" @backtop="backtop" />
    </div>
  </div>
</template>

<script>
import {getCategorys} from 'api/category';
import MeLoading from 'components/loading';
import Scrollbar from 'components/scroll';
import MeBacktop from 'components/backtop';
import storage from 'assets/js/storage.js';
import {CATEGORY_CONTENT_KEY,CATEGORY_CONTENT_UPDATE_TIME} from './config' {
    name:'CategoryContent'default:''{
            content:{},isLoading:falsethis.isLoading=true;
            this.getContent(id).then(()=>{
                ;
                this.backtop();回到顶部
            });
        }
    },methods:{
        getContent(id){
          let content=storage.get(CATEGORY_CONTENT_KEY);
          let updateTime;
          const curTime=new Date().getTime();

          if(content && content[id]){
            updateTime=content[id].updateTime||0;
            
            if(curTime-updateTime<CATEGORY_CONTENT_UPDATE_TIME){未超时
              console.log('从缓存获取');
              return this.getContentByStorage(content[id]);从缓存获取
            }else{
              console.log('从服务器获取'this.getContentByHTTP(id).then(()=>{从服务器获取
                this.updateStorage(content,id,updateTime);更新缓存
              });
            }
          }{
            console.log('从服务器获取');
            从服务器获取
                          });
          }           
        },getContentByStorage(content){
          this.content=content.data;
          return Promise.resolve();返回一个成功的promise对象
        },getContentByHTTP(id){
          return getCategorys(id).then(data=>{
            new Promise(resolve=>{
              if(data){
                data.content;
                resolve();
              }
            })              
          })
        },updateStorage(content,curTime){
          content=content || {};
          content[id]={};
          content[id].data=this.content;
          content[id].updateTime=curTime;
          storage.set(CATEGORY_CONTENT_KEY,content);
        },updateScroll(){
            this.$refs.scroll && .$refs.scroll.update();
        },scrollEnd(translate,swiper,pulling){下拉刷新结束
            显示回到顶部按钮
            this.backtopVisible=translate<0 && -translate>swiper.height;向下拉并且距离大于一屏          
this.$refs.scroll.scrollTop();this.getContent(this.curId).then(()=>                end();
          });
        }
    }
}
</script>

<style lang="scss" scoped>
    .g-backtop-container{
        position: absolute;
        z-index:1100;
        right:10px;
        bottom:60px;
    }
 .content-wrapper {
    position: relative;
    height: 100%;
  }

  .loading-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1190;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 100%;

    .mine-loading {
      color: #fff;
      font-size: 14px;
    }
  }
  .loading-wrapper {
    width: 50%;
    padding: 30px 0;
    background-color: rgba(0,0.4);
    border-radius: 4px;
  }

  .content {
    padding: 10px;
  }

  .pic {
    margin-bottom: 12px;

    &-link {
      display: block;
    }

    &-img {
      width: 100%;
    }
  }

  .section {
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    &-title {
      height: 28px;
      line-height: 28px;
      color: #080808weight: bold;
    }

    &-list {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      padding: 10px 10px 0item {
      width: (100% / 3);
    }

    &-pic {
      position: relative;
      width: 80%;
      padding-bottom: 80%;
      margin: 0 auto;
    }

    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%name {
      height: 36px;
      line-height: 36px;
      text-align: center;
        overflow: hidden;
        text-space: nowrap;
    }
  }
  .g-backtop-container {
    bottom: 10px;
  }
</style>

 

src/pages/category/index.vue

<template>
    <div class="category">
        <div class="g-header-container">
            <category-header />
        </div>
        <div class="g-content-container">
            <div class="sidebar">
                <category-tab @switch-tab="getCurId" />
            </div>
            <div class="main">
                <category-content :curId="curId" />
            </div>
        </div>
    </div>
</template>

<script>
import CategoryHeader from './header';
import CategoryTab from './tab';
import CategoryContent from './content' {
    name:'Category'{
            curId:''id;
        }
    }
}
</script>

<style lang="scss" scoped>
    html,body{
        width:100%;
    }
    .category {
        overflow:hidden;
        width:100%;
        background-color: '#f5f5f5';
    }

    .g-content-container {
        width:100%;
        display: flex;
    }
    .sidebar {
        width: 80px;
        height: 100%;
    }
    .main {
        flex: 1;
        height: 100%;
    }
</style>

 

4、储存常量和服务器获取来的数据

src/pages/category/config.js

export const CATEGORY_CONTENT_KEY='cyymall-category-content-key';
export const CATEGORY_CONTENT_UPDATE_TIME=1*24*60*60*1000;1天

export const categoryNames = [
    {
      'name': '热门推荐'
    },{
      'name': '慕淘超市''name': '国际名牌''name': '奢侈品''name': '全球购''name': '男装''name': '女装''name': '男鞋''name': '女鞋''name': '内衣配饰''name': '箱包手袋''name': '美妆个护''name': '钟表珠宝''name': '手机数码''name': '电脑办公''name': '家用电器''name': '食品生鲜''name': '酒水饮料''name': '母婴童鞋''name': '玩具乐器''name': '医药保健''name': '计生情趣''name': '运动户外''name': '汽车用品''name': '家居厨具''name': '家具家装''name': '礼品鲜花''name': '宠物生活''name': '生活旅行''name': '图书音像''name': '邮币''name': '农资绿植''name': '特产馆''name': '慕淘金融''name': '拍卖''name': '房产''name': '二手商品'
    }
  ];

 

5、axios获取数据

src/api/category.js

import axios from 'axios';

 CancelToken：快速发送多个请求时，取消前面的请求，以最后一个为准
const CancelToken=axios.CancelToken;
let cancel;

获取数据 ajax
export const getCategorys=(id)=>{
    cancel && cancel("取消了前一次请求");
    cancel=null;

    let url='http://www.jb51.cc/api/category/content/'+id;

     axios.get(url,{
        cancelToken:new CancelToken(function executor(c){
            cancel=c;
        })
    }).then(res=>{
        
        if(res.data.code===0){
            console.log("获取category成功" res.data;
        }

        throw new Error('没有成功获取到数据');
    }).catch(err=>{
        console.log(err);
    });
}

 

6、localstorage操作缓存

const storage = window.localStorage;

export  {
  set(key,val) {
    if (val === undefined) {
      ;
    }
    storage.setItem(key,serialize(val));
  },get(key,def) {
    const val = deserialize(storage.getItem(key));
    return val === undefined ? def : val;
  },remove(key) {
    storage.removeItem(key);
  },clear() {
    storage.clear();
  }
};

 serialize(val) {
   JSON.stringify(val);
}

 deserialize(val) {
  if (typeof val !== 'string') {
     undefined;
  }
  try {
     JSON.parse(val);
  } catch (e) {
    return val || undefined;
  }
}

 

最后补充一下，关于 $nextTick