vue商城项目(二)

大家好，今天是关于vue商城的开发的首页布局相关内容，记录一下其中遇到的大大小小问题，以及解决方法，项目已在github上托管，有感兴趣的可以看看vue商城github托管地址

底部组件的封装

tabbar

tabbar组件我在之前已经封装过了，所以这里就没有费时间再重新封装，所以我直接就拿来使用了，后面会写一篇关于tabbar的封装文章！这里就不多叙述了。
我直接将封装好的组件复制到项目中，tabbar组件，我放到了components文件夹下的common文件夹中，因为这是一个公共的组件，在其他有需要的项目中也可以进行使用，主要的视图文件放在了views文件夹中，进行一些调试，比如其中一些路径什么的！
就是这样的一个组件

项目小图标的修改

在public目录下有两个文件，里面存放的就是一些关于小图标的内容
我找了一个适合的小图标，把其中的favicon.ico文件给替换掉，然后重新执行了一下，刷新一下，就可以把小图标给更改了
就是这样的一个小图标！

首页导航栏的封装

简述

我们在购物车最上方，往往会显示一些内容，但是不可能我们每个页面都单独写一个，这样会非常麻烦，所以我封装了一个组件进行封装！只需要预留几个插槽就可以在很多个页面进行使用了！
同样这是一个公共的组件，在其他项目中也可以使用，所以将它封装在components文件夹中的common文件夹下！

NavBar.vue

在common文件夹下新建一个navbar文件夹，里面用于存放导航栏的组件！
然后建一个NavBar.vue文件，在首页导航栏，我们不可能只放一个东西，比如会放转发，消息等等，所以一般我们需要放三个插槽，然后对这三个内容进行flex三栏布局，如果只有一个内容的话当然不会受到影响
NavBar.vue

<template>
  <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>

<script>
export default {
  name:"NavBar",
  data(){
    return {
    }
  },
  methods:{},
  props:{},
  components:{},
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
  .nav-bar{
    /* 采用flex三栏布局 */
    display: flex;
    height: 44px;
    line-height: 44px;
    text-align: center;
    
  }
  .left, .right{
    width: 60px;
    /* background-color: red; */
    /* background-color: rgb(46, 220, 194);  */

  }
  .center{
    flex:1;
    /* background-color: rgb(46, 220, 194); 换个位置设置背景颜色*/
  }

</style>

在进行调试的时候，我以为line-height:44px;即使没有内容也会把高度撑起来，结果很尴尬，并没有！所以又加了一个height，如果里面有文字的话，应该是不需要的！具名插槽是为了便于使用，这里不再过多叙述。
然后在home.vue文件中，进行一些配置，这个文件在tabbar封装的过程中，我已经建了这个文件！在home.vue文件中，导入NavBar.vue。然后在里面使用这个组件即可！

<template>
  <div id='home'>
    <!-- <h1>购物街</h1> -->
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
  </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar';
</script>

请求首页的数据

request.js

在network中新建一个request.js文件
request.js

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: '接口就不提供了，有需要可以私我',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求
  return instance(config)
}

home.js

然后再建一个home.js文件
我们不会直接在home.vue文件中直接发送网络请求，所以一般新建一个home.js文件用于发送请求，所有对首页数据的请求都在其中！这样便于后期维护！因为首页会有很多请求，在这个文件中进行统一的管理，这样便于查找和修改！便于管理！首页只需要面对这个模块开发就可以了！
home.js

import {request} from './request';
// 获取首页的多个数据
export function getHomeMultidata(){
  return request({
    url:'/home/multidata'
  })
};

发送网络请求

当组件创建完之后我们就需要立刻发送网络请求，所以我们需要生命周期函数。所以在home.vue中的create中，我们需要请求到数据

data(){
    return {
      // result:null,
      banners:[],
      recommends:[],
    }
  },
created(){
    // 首页组件创建完成，发送网络请求

    // 1.请求多个数据
    getHomeMultidata().then(res=>{
      // console.log(res);
      // this.result = res;
      this.banners = res.data.banner.list;
      // 获取recommends数据
      this.recommends = res.data.recommend.list;
    })
  },

这样就可以拿到数据了，将数据存放到data中。

轮播图

轮播图的组件我以前已经封装过了，这里直接拿来进行使用！当然你也可以直接拿框架进行使用，但是了解其中的原理还是有必要的！
直接在home.vue文件中进行导入，当然在使用过程中不可能把代码都放到home.vue中，这样会使得代码量很臃肿，不便于维护，home.vue中只放一些大框架的代码就可以了，所以我在home文件中新建一个childComps文件夹，然后新建了一个homeSwiper.vue文件，里面用于存放主要的代码
homeSwiper.vue

<template>
 <swiper>
      <!-- 现在v-for得使用必须要加:key -->
      <swiper-item v-for="(item,index) in banners" :key="index">
        <a :href="item.link">
            <img :src="item.image" alt="">
        </a>
      </swiper-item>
    </swiper>
</template>

<script>
// 导入Swiper SwiperItem
import {Swiper,SwiperItem} from 'components/common/swiper' 
export default {
  name:"HomeSwiper",
  data(){
    return {
    }
  },
  methods:{},
  props:{
    banners:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  components:{
    Swiper,
    SwiperItem
  },
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
</style>

vue中使用v-for现在必须要加":key"这个属性了，不然会报错，虽然可以正常运行，但是看着很不舒服，我纳闷了很久因为这个原因，算是一个小坑吧

推荐信息的展示

在轮播图下面，我布局了一个推荐信息，便于用户进入！
在childComps文件夹中新建了一个RecommendView.vue文件
RecommendView.vue

<template>
  <div class="recommend">
    <div v-for="(item,index) in recommends" :key="index" class="recommend-item">
      <a :href="item.link">
        <img :src="item.image" alt="">
        <div>{{item.title}}</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name:"RecommendView",
  data(){
    return {
    }
  },
  methods:{},
  props:{
    recommends:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  components:{},
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
  .recommend{
    display:flex;
    width: 100%;
    //居中
    text-align: center;
    font-size: 12px;
    padding: 10px 0 20px;
    border-bottom: 10px solid #eee;
  }
  .recommend-item{
    flex:1;
  }
  .recommend-item img{
    width:80%;
    height: 80%;
    margin-bottom: 10px;
  }
</style>

导入之后图片的大小以及布局需要单独进行调试，调试的苦就不在这里叙述了！父传子的话需要props，我们需要将recommends传递出去，所以需要配置一些props，然后在home.vue中引入这个文件使用一些这个组件即可！

<template>
  <div id='home'>
    <!-- <h1>购物街</h1> -->
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <home-swiper :banners="banners"></home-swiper>
    <recommend-view :recommends="recommends"></recommend-view>
  </div>
</template>

今天大概就是完成了这么一些内容！效果图如下

这里说的比较碎，感兴趣的可以去github上面看看，里面比较完整，整个过程都会及时上传代码vue商城github托管地址