这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战。

一、 使用fetch获取轮播图数据

git地址

https://github.com/liujun8892/reactshop

1.1 先测试接口是否正常返回数据

componentDidMount(){
    this.getSwiperData()
    new Swiper('.swiper-container', {
        loop:true,
        autoplay: 3000,//可选选项，自动滑动
        pagination : '.swiper-pagination',
        autoplayDisableOnInteraction : false
    })
    window.addEventListener('scroll', this.handlePageScroll.bind(this), false)
}
// 获取轮播图数据
getSwiperData() {
    fetch(`http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f`)
        .then(res => {
            return res.json()
        }).then(res => {
        console.log(res,'轮播图数据')
    })
}

获取数据正常

1.2 完成数据的渲染

state中
this.state = {
    // 滚动导航栏变色开关
    isScroll: false,
    aSwiper: []
}

fetch中
if(res.code === 200) {
    this.setState({
        aSwiper: res.data
    }, () => {
        new Swiper('.swiper-container', {
            loop:true,
            autoplay: 3000,//可选选项，自动滑动
            pagination : '.swiper-pagination',
            autoplayDisableOnInteraction : false
        })
    })
}

render中
{this.state.aSwiper.map((item,index) => (
    <div className="swiper-slide" key={index}>
        <a href={item.webs} target='_blank' rel='noreferrer noopener'>
            <img src={item.image} alt={item.title}/>
        </a>
    </div>
))}

轮播图渲染成功

1.3 解决fetch兼容性问题

1. 安装
npm i whatwg-fetch --save
2. 在src/index.js中引入
import 'whatwg-fetch'

1.4 配置本地开发代理，解决跨域问题

proxy:{
  "/proxy": {
    "target": "http://vueshop.glbuys.com",
    "changeOrigin": "true",
    "pathRewrite": {
      "^/proxy":""
    }
  }
},

1.5 封装fetch请求

js/conf/config.js

let prodUrl="http://vueshop.glbuys.com";
let devUrl="/proxy";
let baseUrl=process.env.NODE_ENV==='development'?devUrl:prodUrl;
export default {
    baseUrl:baseUrl,
    path:"/",
    token:"1ec949a15fb709370f"
}

js/libs/request.js
import config from  '../conf/config'

function request(url,method = 'get') {
    return  fetch(`${config.baseUrl}${url}?token=${config.token}`,{method: method})
        .then(res => res.json())
}

export {request}

首页通过封装的request获取数据
import {request} from "../../../assets/js/libs/request";
request('/api/home/index/slide')
    .then(res => {
        if(res.code === 200) {
            this.setState({
                aSwiper: res.data
            }, () => {
                new Swiper('.swiper-container', {
                    loop:true,
                    autoplay: 3000,//可选选项，自动滑动
                    pagination : '.swiper-pagination',
                    autoplayDisableOnInteraction : false
                })
            })
        }
    })

二、获取快速导航栏数据

componentDidMount(){
    this.getSwiperData()
    this.getQuickNavs()
    window.addEventListener('scroll', this.handlePageScroll.bind(this), false)
}


// 获取快速导航栏数据
getQuickNavs() {
    request('/api/home/index/nav')
        .then(res => {
            if(res.code === 200) {
                this.setState({
                    quickNavs: res.data
                })
            }
        })
}


<div className="quick-nav">
    {this.state.quickNavs.map((item,index) => (
        <div className="quick-nav-item" key={index}>
            <img src={item.image} alt={item.title} className="nav-icon" />
            <span className="nav-title">{item.title}</span>
        </div>
    ))}

</div>

渲染成功

三、显示主商品列表数据

// 获取主商品数据
getMainGoodsList() {
    request('/api/home/index/goodsLevel')
        .then(res => {
            if(res.code === 200) {
                this.setState({
                    mainGoodsList: res.data
                })
            }
        })
}

使用www.json.cn/ 在线解析数据

后面使用双层循环遍历渲染数据

{this.state.mainGoodsList.map((item,index) => (
    <div className="recommend-list" key={index}>
        <div className={index === 0 ? "title title-red" : index === 1 ? 'title title-orange': 'title title-green'} >
            —— {item.title} ——
        </div>
        <div className="goods-level-1">
            {index % 2 === 1? (
                item.items.slice(0,2).map((item2,index2) => (
                    <div className="goods-level-1-3 goods-level-1-3-left" key={index2}>
                        <div className="level-1-3-title">{item2.title}</div>
                        <div className="level-1-3-desc">火爆开售</div>
                        <img className="level-1-3-img" src={item2.image} alt={item.title} />
                    </div>
                ))
            ) : (
                <React.Fragment>
                    <div className="left">
                        <div className="goods-name">
                            {item.items[0].title}
                        </div>
                        <div className="goods-desc">
                    <span className="goods-text">
                        精品打折
                    </span>
                            <span className="goods-price">
                         {item.items[0].price}元
                    </span>
                        </div>
                        <div className="goods-img">
                            <img src={item.items[0].image} alt={item.items[0].title} />
                        </div>
                    </div>
                    <div className="right">
                        <div className="right-items top">
                            <div className="left-goods">
                                <div className="main-title">{item.items[1].title}</div>
                                <div className="sub-title">品质精挑</div>
                            </div>
                            <div className="goods-right">
                                <img src={item.items[1].image} alt={item.items[0].title} />
                            </div>
                        </div>
                        <div className="right-items">
                            <div className="left-goods">
                                <div className="main-title">{item.items[2].title}</div>
                                <div className="sub-title">品质精挑</div>
                            </div>
                            <div className="goods-right">
                                <img src={item.items[2].image} alt={item.items[2].title}/>
                            </div>
                        </div>
                    </div>
                </React.Fragment>
            )}
        </div>
        <div className="goods-level-2">
            {item.items.slice(index % 2 === 1 ? 2 : 3).map((item2,index2) => (
                <div className="goods-level-2-item" key={index2}>
                    <div className="level-2-title">
                        {item2.title}
                    </div>
                    <img className="level-2-img" src={item2.image} />
                    <div className="level-2-current-price">
                        ¥{item2.price}
                    </div>
                    <div className="level-2-old-price">
                        ¥ <span>{item2.price *2}</span>
                    </div>

                </div>
            ))}
        </div>
    </div>
))}

四、获取商品推荐列表数据

getRecommendGoodsList() {
    request('/api/home/index/recom')
        .then(res => {
            console.log(res,'获取商品推荐数据')
            if(res.code === 200) {
                this.setState({
                    recommendGoodsList: res.data
                })
            }
        })
}

<div className="goods-list">
    {this.state.recommendGoodsList.map((item,index) => (
        <div className="goods-item" key={index}>
            <div className="goods-content">
                <img className="goods-cover" src={item.image} alt={item.title}/>
                <div className="goods-title">{item.title}</div>
                <div className="goods-price">¥{item.price}.00</div>
            </div>
        </div>
    ))}
</div>

好了，首页的接口就调完了， 效果如下