学习coderwhy老师利用vue开发supermall

网络请求

request.js

import axios from 'axios'

export function request(config) {
   
  // 1、创建axios的实例
  const instance = axios.create({
   
    baseURL: 'http://',
    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.js

import {
   request} from "./request";

// 首页的网络请求都从这边发出
export function getHomeMultiData() {
   
  return request({
   
    url: '/home/multidata'
  })
}

export function getHomeGoods(type, page) {
   
  return request({
   
    url: '/home/data',
    params: {
   
      type,
      page,
    }
  })
}

detail.js

• 商品细节页面到网络请求 detail.js

import {
   request} from './request'

export function getDetail(iid) {
   
  return request({
   
    url: '/detail',
    params: {
   
      iid,
    }
  })
}

export function getRecommend() {
   
  return request({
   
    url: '/recommend',
  })
}

export class Goods {
   
  constructor(itemInfo, columns, services) {
   
    this.title = itemInfo.title
    this.desc = itemInfo.desc
    this.newPrice = itemInfo.price
    this.oldPrice = itemInfo.oldPrice
    this.discount = itemInfo.discountDesc
    this.columns = columns
    this.services = services
    this.realPrice = itemInfo.lowNowPrice
  }
}

export class Shop {
   
  constructor(shopInfo) {
   
    this.logo = shopInfo.shopLogo
    this.name = shopInfo.name
    this.fans = shopInfo.cFans
    this.sells = shopInfo.cSells
    this.score = shopInfo.score
    this.goodsCount = shopInfo.cGoods
  }
}

export class GoodsParam {
   
  constructor(info, rule) {
   
    // images可能没有值（某些商品有值，某些商品没有值）
    this.image = info.images ? info.images[0] : ''
    this.infos = info.set
    this.sizes = rule.tables
  }
}

代码与思路

home页面

一、导航栏封装成组件

• 分了左、中、右三个插槽，使用的使用随意用

• 让文字居中

  display: flex;
  text-align: center;
  

二、轮播图（直接拿的组件）

三、推荐目录RecommendView

• 从网络接口中获取数据

  import {
       getHomeMultiData, getHomeGoods} from "network/home";
  
  getHomeMultiData(){
       
          // getHomeMultiData()表示调用方法
          getHomeMultiData().then(res =>{
       
            // this.result = res;
            // res和result指向同一个对象 即使res被回收 result也有值
            this.banners = res.data.banner.list;
            this.recommends = res.data.recommend.list;
          })
        }
  

• 父组件获取数据后传递给子组件，子组件进行展示

<template>
    <div class="recommend">
      <div v-for="item in recommends" 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",
    props: {
      recommends: {
        type: Array,
        default() {
          return [];
        }
      }
    }
  }
</script>

四、FeatureView

• 独立组件封装FeatureView

  • div>a>img

五、TabControl

• 独立组件封装
  • props -> titles
  • div->根据titles v-for遍历 生成多少个div div->span{ {title}}
  • css相关
  • 选中哪一个tab，哪一个tab文字颜色变色，并且下面border-bottom
    • currentIndex

<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles"
         class="tab-control-item" 
         :class="{active: index === currentIndex}" @click="itemClick(index)">
      <span>{
  {item}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TabControl",
    props: {
      titles: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        currentIndex: 0,
      }
    },
    methods: {
      itemClick(index) {
        this.currentIndex = index;
      //  内部数据往外面传送,点击后下面展示的数据也随之改变
        this.$emit('tabClick', index)
      }
    }
  }
</script>

<style scoped>
  .tab-control{
    display: flex;
    text-align: center;
    font-size: 15px;
  }

  .tab-control-item{
    flex: 1;
    height: 40px;
    line-height: 40px;
  }

  .tab-control-item span{
    padding: 5px;
  }

  .active {
    color: var(--color-high-text);
  }

  .active span{
    border-bottom: 3px solid var(--color-tint);
  }
</style>

六、首页商品数据的请求

6.1设计数据结构，用于保存数据

goods: {
          'pop