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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

源码下载 (觉得不错的话，希望可以给个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

以上是 react项目实战四 主页面开发以及boss和genius页面的开发 的全部内容， 来源链接： utcz.com/z/384123.html

回到顶部