day21

一、项目准备工作

1.下载接口项目

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

解压

进入项目根目录，执行命令

npm i

下载好依赖后，运行项目

npm start

接口项目就会运行在localhost:3000

2.初始化react项目

(1)初始化

create-react-app react-music

(2)安装依赖

npm i axios http-proxy-middleware react-router-dom qs --save

(3)初始化index.js和App.js

3.移动端项目准备

(1)reset.css

/public/static/css/reset.css

html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-weight:normal;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}
ol,ul,li {
    list-style:none;
}
blockquote,q {
    quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
    content:'';
    content:none;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
th,td {
    vertical-align:middle;
}
/* custom */
a {
    outline:none;
    color:#16418a;
    text-decoration:none;
    -webkit-backface-visibility:hidden;
}
a:focus {
    outline:none;
}
input:focus,select:focus,textarea:focus {
    outline:-webkit-focus-ring-color auto 0;
}
​

引入

/public/index.html

 <link rel="stylesheet" href="/static/css/reset.css" />

(2)rem.js

/public/static/js/rem.js

!function (n) {
    var e = n.document,
        t = e.documentElement,
        i = 720,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function () {
            var n = t.clientWidth || 320; n > 720 && (n = 720);
            t.style.fontSize = n / d + "px"
        };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);

引入

/public/index.html

<script src="/static/js/rem.js"></script>

4.代理转发配置

/src/setupProxy.js

const proxy = require('http-proxy-middleware')
module.exports = function(app){
    app.use(proxy.createProxyMiddleware('/api',{
        target:'http://localhost:3000',
        pathRewrite:{
            '^/api':''//网易云接口地址中不包含/api这个关键词，所以要替换掉
        }
    }))
}

二、配置路由规则

1.一级路由规则

/src/router/AppRoutes.js

import Index from '../components/pages/Index'
import SongList from '../components/pages/SongList'
import Play from '../components/pages/Play'
const routes = [
    { path:'/songlist',component:SongList,isExact:true },
    { path:'/play',component:Play,isExact:true },
    { path:'/',component:Index,isExact:false }
]
export default routes;

2.App.js设置路由出口

import React from 'react'
import MyRouter from './router'
import AppRoutes from './router/AppRoutes'
function App(){
    return(
        <div className="page">
            <MyRouter routes={ AppRoutes }></MyRouter>
        </div>
    )
}
export default App;

3.二级路由规则

/src/router/IndexRoutes.js

import Recommend from '../components/pages/Recommend'
import Hot from '../components/pages/Hot'
import Search from '../components/pages/Search'
const routes = [
    { path:'/recommend',component:Recommend,isExact:false },
    { path:'/hot',component:Hot,isExact:false  },
    { path:'/search',component:Search,isExact:false  },
]
export default routes;

4.首页设置路由出口

import React, { Component } from 'react'
import MyRouter from '../../router'
import IndexRoutes from '../../router/IndexRoutes'
export default class Index extends Component {
    render() {
        return (
            <div>
                <h1>首页</h1>
                <MyRouter routes={ IndexRoutes }></MyRouter>
            </div>
        )
    }
}
​

三、轮播图插件

1.安装

npm install react-awesome-swiper

2.基本使用

引入

import AwesomeSwiper from 'react-awesome-swiper';

定义配置选项

const config = {
    loop: true,
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazy: true,
    speed: 500,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        bulletElement: 'li',
        hideOnClick: true,
        clickable: true,
    }
};
export default class Recommend extends  Component{..}

在页面组件将要挂载的生命周期钩子函数中请求接口获取数据

export default class Recommend extends Component {
    state = {
        bannerArr :[]
    }
    UNSAFE_componentWillMount(){
        axios.get('/api/banner').then(res=>{
            this.setState({
                bannerArr:res.data.banners
            })
        })
    }
}

获取到数据后，在页面组件中遍历数据，展示图片标签

render() {
        return (
            <div className="recommend">
                <AwesomeSwiper ref={ref => (this.swiperRef = ref)} config={config} className="swiper">
                    <div className="swiper-wrapper">
                        {
                            this.state.bannerArr.map((item,index)=>{
                                return(
                                    <div key={ index } className="swiper-slide">
                                        <img src={ item.imageUrl } alt=""/>
                                    </div>
                                )
                            })
                        }
                        
                    </div>
                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                    <div className="swiper-pagination"></div>
                </AwesomeSwiper>
            </div>
        )
    }