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托管地址

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页