【react從入門到放棄】ant design pro + dva [第一篇]

1、從倉庫克隆最新的腳手架代碼

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project

$ cd my-project

2、安裝依賴

如果是正常電腦：npm install

如果電腦超級卡：用cnpm加速

如果電腦npm怎么都不成：換yarn來安裝是一個好選擇

3、跑起來

npm start

4、插件

可以下載nodemon這個插件來避免只要修改內容就要手動重啟項目，只要把package.json里的啟動配置修改了就好了

5、完美！！跑起來了呢！！！

6、試着新建一條菜單，以Zhimademo為例

（1）打開config文件夾下面的router.config.js，新加一條路由：

 

//芝麻菜單
      {
        path: '/zhima',
        name: 'zhima',
        icon: 'fullscreen',
        routes:[
          {
            path: '/zhima/demo',
            name: 'zhimademo',
            component: './Zhima/Zhimademo'
          },
          {
            path: '/zhima/qxaa',
            name: 'qxaa',
            component: './Zhima/Qxaa'
          }
        ],
      },

　　（2）新建頁面的文件夾在src下的pages文件夾下：

·  文件夾下可以寫這個一級菜單下的所有頁面js和less文件，最好相對應；

·  文件夾下的models文件夾是dva內容，主要用來調用接口、操作數據等，里面的每個js文件對應它負責的頁面

（3）建好空白的一堆東西之后，開始寫頁面：

上面引一下需要用到的東西，包括react，dva，ant design提供的一些組件，自己寫的樣式表

然后新建一個類

對應的models里的js也要規定一下命名空間等一些內容

 

好了，在頁面里給類前面連接dva：

開始正經寫頁面：

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import {Row, Col, Divider, message } from 'antd';
import styles from './Zhimademo.less';

// 寫了半天好像並沒有做成什么大事的頁面
 @connect(({ zhimademo }) => ({
    zhimademo
  }))

class Zhimademo extends PureComponent {
    // 剛渲染時執行的內容
    componentDidMount() {
        this.getPersonalInfo();
    }

    // 獲取基本信息
    getPersonalInfo = () =>{
        const {dispatch} =  this.props;
        dispatch({
            type: 'zhimademo/personalInfo'
        });
      
    };

    render() {
        const { zhimademo:{personalInfoData} } = this.props;

        return (
            <div>
                <Row gutter={24}>
                    <Col lg={6} md={24} style={{padding:10, background:'#fff', margin:10}}>
                        <div>基本信息</div>
                        <table className={styles.table}>
                            <tbody>
                                <tr>
                                    <td>工號：</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.number ? personalInfoData.data.number : '-'}</td>
                                </tr>
                                <tr>
                                    <td>年齡</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.age ? personalInfoData.data.age : '-'}</td>
                                </tr>
                                <tr>
                                    <td>性別</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.sex ? personalInfoData.data.sex : '-'}</td>
                                </tr>
                                <tr>
                                    <td>星座</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.star ? personalInfoData.data.star : '-'}</td>
                                </tr>
                                <tr>
                                    <td>血型</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.bloodType ? personalInfoData.data.bloodType : '-'}</td>
                                </tr>
                            </tbody>
                        </table>
                    </Col>
                    <Col lg={16} md={24} style={{padding:10, background:'#fff', margin:10}}>
                        <Row gutter={16} className={styles.center}>
                            <Col className="gutter-row" span={6} >
                                <i></i>
                                <span>加班</span>
                            </Col>
                            <Col className="gutter-row" span={6}>
                                <i></i>
                                <span>請假</span>
                            </Col>
                            <Col className="gutter-row" span={6}>
                                <i></i>
                                <span>外出</span>
                            </Col>
                            <Col className="gutter-row" span={6}>
                                <i></i>
                                <span>出差</span>
                            </Col>
                        </Row>
                        <Row gutter={24}>
                        <table className={styles.table}>
                            <tbody>
                                <tr>
                                    <td>公司</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.companyName ? personalInfoData.data.companyName : '-'}</td>
                                </tr>
                                <tr>
                                    <td>崗位</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.politicalOutlook ? personalInfoData.data.politicalOutlook : '-'}</td>
                                </tr>
                                <tr>
                                    <td>部門</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.bumen ? personalInfoData.data.bumen : '-'}</td>
                                </tr>
                                <tr>
                                    <td>職稱</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.zhichen ? personalInfoData.data.zhichen : '-'}</td>
                                </tr>
                                <tr>
                                    <td>婚姻狀況</td>
                                    <td>{personalInfoData && personalInfoData.data && personalInfoData.data.maritalStatus ? personalInfoData.data.maritalStatus : '-'}</td>
                                </tr>
                            </tbody>
                        </table>
                        </Row>
                    </Col>
                </Row>
            </div>
        );
    }
} 
export default Zhimademo;

　　models里的內容也補充：

export default {
  namespace: 'zhimademo',
  state: {
    payload: {
      code: 10000,
      data: {
        age: '12',
        companyName: '啦啦啦啦科技',
        number: '1111',
        star: '雙魚',
        birthday: null,
        bloodType: 'B',
        companyId: "11132515122222222",
        maritalStatus: "已婚",
        nation: "中國",
        politicalOutlook: "群眾",
        postalAddress: "通訊地址",
        qq: null,
        sex: "女",
        timeOfEntry: "2019-04-04",
        userId: "1098411014450745344",
        username: "admin",
        bumen: '前端組',
        zhichen: '助理初級'
      },
      message: "操作成功！",
      status: null,
      success: true
    }
  },
  effects: {
  },
  reducers: {
    personalInfo(state) {
      return {
        ...state,
        personalInfoData: state.payload,
      };
    },
  }
}

　　ps：因為沒有調接口，所以只寫了靜態的數據處理，沒有用到effects，只用state規定了數據，reducers里規定了一個獲取用戶個人信息的方法

對應的less文件也補充想要的樣式：

@import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less';

.center{
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    i{
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 1;
        text-align: center;
        vertical-align: middle;
        background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
    }
    div{
        height: 50px;
        cursor: pointer;
    }
    div:hover{
        text-shadow: 0 0 15px rgba(255, 163, 163, 0.2),0 0 15px rgba(255, 163, 163, 0.2);
    }
}
.table{
    width: 90%;
    margin: 10px 5%;
    border: 2px solid #eee;
    td{
        width: 50%;
        border: 1px solid #eee;
        padding: 10px;
        box-sizing: border-box;
    }
}

（4）跑起來瞅瞅，完美啊！

（5）如果做了國際化配置，會發現有報錯，說什么zh啥啥，這時打開src下面的locals下的zh-CN，打開menu.js,補充一下：

  // 芝麻的
  'menu.zhima': '芝麻a',
  'menu.zhima.zhimademo': '芝麻demo',
  'menu.zhima.qxaa': '芝麻-權限管理',

　完成！！！