React全家桶+共享单车实战开发——项目主页工程搭建 3-3 项目主页结构开发

项目主页结构开发

项目主页结构开发是前端架构的一部分，项目前端的架构是非常核心的部分，比如，说我们做一个业务要搞清楚业务和模型是怎么样的。比如说，我们的主页分左侧菜单，头部header,以及底部的footer，中间的内容区域。同时，我们的业务还要求我们有一个独立的详情页面

一、主页结构定义

• 页面结构定义

如果说一开始对我们的业务模型不是很清楚的话，先明白我们要做哪些页面？把我们要做的页面定义清楚就是了。页面结构的定义直接取决于我们的代码怎么去控制页面的层次和页面的结构。

• 目录结构的定义

首先从业务层面把它拆分成几大类的页面，其次，从代码层面控制这几大类应该按照什么样的页面结构去设定。再其次，就是在设定的过程中，怎么取定义目录

• 栅格系统使用

我们在做页面结构的定义的时候呢，会使用栅格系统，本次我们使用的是支付宝的AntD UI框架中的栅格系统，类似于大家之前使用的bootstrap

• calc计算方法使用

二、页面

项目结构定义： 我们先看一下我们要完成的一个目的，这个是主页，看到主页后不要轻易的去下手，先看一下页面是一个怎么的结构，方便后面代码的开发。看到，左侧是一个菜单，右侧分上、中、下三部分。上侧是header，header又分2块，上面一块喝下面一块。中间是内容区域，下面是footer,版权部分。总结：页面结构为，左、右，右侧分为上中下。

目录结构定义： src下建立admin.js文件，与components组件文件夹。大家一定要区分组件和页面，组件是某个页面的一部分，页面是网页上呈现的一张张页面。

栅格系统：  刚才我们已经说了，我们主页分为左侧和右侧两部分，我们怎么写这个结构，最好使用栅格系统  。如下图所示，col-12:把网页平分24等份，分成2部分；col-8:分成3部分；col-6:分成4部分。

示例代码：

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <Row>
      <Col span={12}>col-12</Col>
      <Col span={12}>col-12</Col>
    </Row>
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
    </Row>
    <Row>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
    </Row>
  </div>,
  mountNode
);

项目使用示例：

1. admin.js 文件中，首先导入antd:   import {Row,Col} from 'antd'

2. 增加代码：

import React from 'react'
import {Row,Col} from 'antd'

export default class Admin extends React.Component{

    render(){
        return (
            <Row>
                <Col span="3">
                    Left
                </Col>
                <Col span="21">
                    Right
                </Col>
            </Row>
        );
    }
}

3. index.js导入组件组件

import Admin from './admin'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Admin />, document.getElementById('root'));

4. 接着修改内容

此时，admin.js：

import React from 'react'
import {Row,Col} from 'antd'
import Header from './components/Header'  
 //若下面的文件为index.js,则引入时只需写到上级路径，自动打入
import Footer from './components/Footer'

export default class Admin extends React.Component{

    render(){
        return (
            <Row>
                <Col span="3">
                    Left
                </Col>
                <Col span="21">
                    <Header>Header</Header>
                    <Row>
                        Content
                    </Row>
                    <Footer></Footer>
                </Col>
            </Row>
        );
    }
}

Header下的index.js：

import React from 'react'

export default class Header extends React.Component{
    render(){
        return(
            <div>
                This is Header
            </div>
        )
    }
}

Footer下的index.js

import React from 'react'

export default class Footer extends React.Component{
    render(){
        return(
            <div>
                This is Footer
            </div>
        )
    }
}

结果：

 

ant-design地址打不开，可能和网络有关，用下面的镜像地址就可以打开

ant-design-pro镜像地址：
http://ant-design-pro.gitee.io/index-cn
antd-mobile镜像地址：
https://antd-mobile.gitee.io/index-cn
ant-design像地址
http://ant-design.gitee.io/index-cn

附上正常地址

ant-design
https://ant.design/index-cn
ant-design-pro:  
https://pro.ant.design/index-cn
antd-mobile
https://mobile.ant.design/index-cn