react项目实战四 主页面开发以及boss和genius页面的开发

源码下载 (觉得不错的话，希望可以给个star)

https://github.com/TH226/react-muke

文件结构

│  .gitignore
│  list.txt
│  package-lock.json
│  package.json
│  
├─config       
├─public   
├─scripts
├─server
│      model.js
│      server.js
│      user.js
└─src
    │  config.js
    │  index.css
    │  index.js
    │  reducer.js
    │  util.js
    │  
    ├─component
    │  ├─authroute
    │  │      authroute.js
    │  │      
    │  ├─avatar-selector
    │  │      avatar-selector.js  用户信息完善的头像选择组件
    │  │      
    │  ├─boss
    │  │      boss.js
    │  │      
    │  ├─dashboard
    │  │      dashboard.js                    主页面的组合显示，（即头、内容、脚组件的拼接在此处完成）
    │  │      
    │  ├─genius
    │  │      genius.js
    │  │      
    │  ├─img    存放用户可选择的头像
    │  │      
    │  ├─logo
    │  │      job.png
    │  │      logo.css
    │  │      logo.js
    │  │      
    │  ├─navlink
    │  │  │  navlink.js
    │  │  │  
    │  │  └─img   存放主页面脚部几个导航栏的图片
    │  │          boss-active.png
    │  │          boss.png
    │  │          job-active.png
    │  │          job.png
    │  │          msg-active.png
    │  │          msg.png
    │  │          user-active.png
    │  │          user.png
    │  │          
    │  ├─usercard    用户信息展示的卡片组件
    │  │      usercard.js
    │          
    ├─container
    │  ├─bossinfo
    │  │      bossinfo.js   boss信息完善页
    │  │      
    │  ├─geniusinfo
    │  │      geniusinfo.js  牛人信息完善页
    │  │      
    │  ├─login
    │  │      login.js
    │  │      
    │  └─register
    │          register.js
    │          
    └─redux
            chatuser.redux.js
            user.redux.js
            

一、用户信息的完善

预期效果：

• 1、在完成注册之后，自动跳转到完善信息的页面
• 2、未完善信息的用户在登录时也直接跳转到完善信息页面

在这里插入图片描述

从图中可以看出，boss和牛人的信息完善页在头像选择上是一样的，所以我们可以将这部分抽离出来，写成公共组件

头像组件位置：src\component\avatar-selector\avatar-selector.js

然后再创建boss信息页和genius信息页
boss信息页：src\container\bossinfo\bossinfo.js
genius信息页：src\container\geniusinfo\geniusinfo.js

二、主页面

预期效果

• 1、当牛人登录的时候，显示boss信息列表
• 2、当boss登录的时候，显示牛人信息列表
  
  

框架

• 头部导航栏
• 中间内容栏
• 脚部导航栏
• 主页面的整体组建是在dashboard.js页面中完成的，

            <div>
                <!--头部-->
                <NavBar className='fixd-header' mode='dard'>{navList.find(v=>v.path===pathname).title}</NavBar>
                <!--内容-->
                <div style={{marginTop:45}}>
                    <Switch>
                        {navList.map(v=>(
                            //component中是组件的名字
                            <Route key={v.path} path={v.path} component={v.component}></Route>
                        ))}
                    </Switch>
                </div>
                <!--脚部-->
                <div className="fixd-footer">
                     <NavLinkBar data={navList}></NavLinkBar>
                </div>
               
            </div>

头部

navBar

脚部

TabBar

D:\MyPracticeProject\react-muke\src\component\navlink\navlink.js

内容

• boss

D:\MyPracticeProject\react-muke\src\component\boss\boss.js

• genius

D:\MyPracticeProject\react-muke\src\component\genius\genius.js

在boss和genius页面都是采用卡片的形式展示信息，因此可以将此卡片组件抽离出来。

• 用户信息卡片组件单独抽离

src\component\usercard\usercard.js

• boss页面与genius页面的实现

src\component\boss\boss.js

src\component\genius\genius.js