React实战项目--02电商系统底部导航、router

一、项目结构

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

1. 在public全局的css中初始化样式，并把背景设置成灰色 ，做好移动端的rem适配
*{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
input{outline: none;border-radius: 0px;border:0 none;}
html,body {
    font-size: 20px!important;
    min-height: 100%;
    overflow-x:hidden;
    background-color: #f5f5f9;
   -webkit-tap-highlight-color:rgba(0,0,0,0); /*禁止链接高亮*/     
   -webkit-touch-callout:none;    /*禁止链接长按弹出选项*/
}
@media screen and (min-width: 400px) {
    html,body {
        font-size: 21.3px!important;
    }
}
@media screen and (min-width: 414px) {
    html,body {
        font-size: 22.08px!important;
    }
}
@media screen and (min-width: 480px) {
    html,body {
        font-size: 25.6px!important;
    }
}
@media screen and (min-width: 768px) {
    html,body {
        font-size: 40.96px!important;
    }
}
2. 在home.css中写一个50px的底部导航栏
.footer-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
}
home/index.js
import React from 'react';
import Css from '../../../assets/css/home/home/index.css';
export default class  IndexComponent extends React.Component{
    componentDidMount(){

    }
    render(){
        return(
            <div class="app">
                首页
                <div className={Css['footer-nav']}></div>
            </div>
        );
    }
}

底部导航栏的基本样式就好了

二、使用flex布局完成导航栏静态

home/index.js
import React from 'react';
import Css from '../../../assets/css/home/home/index.css';
export default class  IndexComponent extends React.Component{
    componentDidMount(){

    }
    render(){
        return(
            <div class="app">
                首页
                {/*底部导航栏*/}
                <div className={Css['footer-nav']}>
                    <div className={Css['footer-nav-item']}>
                        <div className={Css['footer-nav-item-icon'] + ' ' + Css['home'] + ' ' + Css['active']}></div>
                        <div className={Css['footer-nav-item-title'] + ' ' + Css['active']}>首页</div>
                    </div>
                    <div className={Css['footer-nav-item']}>
                        <div className={Css['footer-nav-item-icon'] + ' ' + Css['cart']}></div>
                        <div className={Css['footer-nav-item-title']}>购物车</div>
                    </div>
                    <div className={Css['footer-nav-item']}>
                        <div className={Css['footer-nav-item-icon'] + ' ' + Css['my']}></div>
                        <div className={Css['footer-nav-item-title']}>我的</div>
                    </div>
                </div>
            </div>
        );
    }
}
home/index.css
.footer-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 0 10px rgba(239,239,239,1);
}
.footer-nav .footer-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-nav .footer-nav-item .footer-nav-item-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.footer-nav .footer-nav-item .footer-nav-item-title {
    font-size: 0.6rem;
}

.footer-nav .footer-nav-item .footer-nav-item-title.active {
    color: #eb1625;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.home {
    background: url("../../../images/common/home1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.home.active {
    background: url("../../../images/common/home2.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.cart {
    background: url("../../../images/common/cart1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.cart.active {
    background: url("../../../images/common/cart2.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.my {
    background: url("../../../images/common/my1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.my.active {
    background: url("../../../images/common/my2.png");
    background-size: 100% 100%;
}

静态效果已完成

二、配置主页的子路由

在router.js中

return(
    <React.Fragment>
        <Router>
            <React.Fragment>
                <Switch>
                    <Route  path="/home" component={HomeComponent} ></Route>
                </Switch>
            </React.Fragment>
        </Router>
    </React.Fragment>
)

在home/index.js中

import asyncComponents from '../../../components/async/AsyncComponent';
const IndexComponent=asyncComponents(()=>import('../index/index'));
<React.Fragment>
    <Switch>
        <Route path={'/home/index'} component={IndexComponent}></Route>
    </Switch>
</React.Fragment>

// 在子路由index/index.js中
import React from 'react';
import Css from '../../../assets/css/home/index/index.css';
export default class  IndexComponent extends React.Component{
    componentDidMount(){
        console.log($(".app").html());
    }
    render(){
        return(
            <div>
                首页
            </div>
        );
    }
}

第一个子路由配置完成

三、路由重定向

<Route  path="/home" component={HomeComponent} ></Route>
<Redirect to={'/home/index'}></Redirect>

当输入/的路由时，会自动重定向到/home/index

接下来做一个路由的配置，区分devUrl和proURL, 根目录的可配置，方便后期项目的部署

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

之后来改造我们之前的路由的根路径， config中的path

<Route  path={config.path + 'home'}  component={HomeComponent} ></Route>
<Redirect to={config.path  + 'home/index'}></Redirect>

四、路由点击事件 + 刷新默认选择tab

import React from 'react';
import Css from '../../../assets/css/home/home/index.css';
import {Route, Switch} from "react-router-dom";
import asyncComponents from '../../../components/async/AsyncComponent';
import config from "../../../assets/js/conf/config";
const IndexComponent=asyncComponents(()=>import('../index/index'));
const CartComponent=asyncComponents(()=>import('../cart/index'));
const UserComponent=asyncComponents(()=>import('../../user/index/index'));
export default class  HomeComponent extends React.Component{
    componentWillMount() {
        this.refreshDefaultTab()
    }

    componentDidMount(){

    }
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0
        }
    }
    // 切换tab
    goPage(url) {
        console.log(url,'7777')
        this.props.history.replace(url)
        let index = this.getTabIndex(url)
        this.setState({
            tabIndex: index
        })
    }
    // 获取页面索引
    getTabIndex(url){
        let index = 0
        switch (url) {
            case '/home/index':
                index = 0
            break
            case '/home/cart':
                index = 1
            break
            case '/home/my':
                index = 2
            break
            default:
                index = 0
        }
        return index
    }
    // 刷新选中默认的tab
    refreshDefaultTab() {
        let index = this.getTabIndex(this.props.history.location.pathname)
        this.setState({
            tabIndex: index
        })
    }
    render(){
        return(
            <div class="app">
                <React.Fragment>
                    <Switch>
                        <Route path={config.path + 'home/index'} component={IndexComponent}></Route>
                        <Route path={config.path + 'home/cart'} component={CartComponent}></Route>
                        <Route path={config.path + 'home/my'} component={UserComponent}></Route>
                    </Switch>
                </React.Fragment>
                {/*底部导航栏*/}
                <div className={Css['footer-nav']}>
                    <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/index')}>
                        <div className={this.state.tabIndex === 0 ?  Css['footer-nav-item-icon'] + ' ' + Css['home'] + ' ' + Css['active']: Css['footer-nav-item-icon'] + ' ' + Css['home']}></div>
                        <div className={this.state.tabIndex === 0 ? Css['footer-nav-item-title'] + ' ' + Css['active'] : Css['footer-nav-item-title']}>首页</div>
                    </div>
                    <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/cart')}>
                        <div className={this.state.tabIndex === 1 ? Css['footer-nav-item-icon'] + ' ' + Css['cart'] + ' ' + Css['active'] : Css['footer-nav-item-icon'] + ' ' + Css['cart'] }></div>
                        <div className={ this.state.tabIndex === 1 ? Css['footer-nav-item-title'] + ' ' + Css['active']: Css['footer-nav-item-title']}>购物车</div>
                    </div>
                    <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/my')}>
                        <div className={this.state.tabIndex === 2 ? Css['footer-nav-item-icon'] + ' ' + Css['my']  + ' ' + Css['active'] : Css['footer-nav-item-icon'] + ' ' + Css['my']}></div>
                        <div className={this.state.tabIndex === 2 ? Css['footer-nav-item-title'] + ' ' + Css['active']: Css['footer-nav-item-title'] }>我的</div>
                    </div>
                </div>
            </div>
        );
    }
}

项目：git地址 github.com/liujun8892/…