使用ant Design Pro笔记

文件目录结构：

    assets    静态文件夹，如logo，背景图等。

    common    react-router 路由文件夹

        menu.js    antd写好的导航列表

        router.js    路由类

        '/': {    path

          component: dynamicWrapper(

            app, ['user', 'login'], user和login是传入model类

             () => import('../routes/Otc/Index')), ../routes/Otc/Index 是目标html所在位置

            },

    components    控件文件夹，只接受传入的参数，自己不获取数据。可多次重复使用的控件。

    e2e    不知道做什么的，没用到。

    layouts    框架html文件夹，最顶层的html文件。

    models    模型文件夹，通过dva框架获取和封装数据。

    routes    页面html文件夹，单独的页面，里面调取components控件。

    services    url路径，真正进行数据交互的地方。

    utils    antd 封装的一些工具类。

框架运行流程：

    浏览器输入路径->脚手架获取路径->通过common匹配路径(分级匹配)->加载layouts页面->加载routes页面，调用

dispatch()请求数据,加载->models模型接收，并调取services请求，并返回且封装->将请求到的参数传入components控件中->加载components控件，通过数据渲染，返回控件html。

        大概流程就是这样，antd pro框架已经集成了dva请求框架，和react-router路由框架，开发需要的只是去common中添加新页面的path，去routers中新增页面，如果有可复用的页面控件的话还可以去components中封装起来，然后去models中新增加一个模型，services中增加一个访问路径。

碰到的坑：

    不熟悉react生命周期，所以很多函数不知道干什么的。

        开发之前要先看看dva和react-router，要不然会一脸懵逼。

        antd和antd pro是两个东西，antd是样式，antd pro是一个重型框架。

        antd pro 有自己的权限控制体系。

        dva 异步请求 有自己的方法来获取是否请求成功和结果。

        components中的请求要传给父页面来请求。

        style中的属性 "-" 要用大写来代替 如 background-color = backgroundColor

纯净页面：

    

import React, { PureComponent } from 'react'; //加载react

import { connect } from 'dva'; //dva请求框架

import {

  Card,

} from 'antd'; //antd的控件库

import BlankLayout from '../../layouts/BlankLayout'; //html框架

import { getAuthority } from '../../utils/authority';//权限控制的工具类

import {  routerRedux } from 'dva/router';//react-router路由框架

import styles from './index.less';//本页面的css样式

import RenderAuthorized from '../../components/Authorized';//antd的权限控制控件

const FormItem = Form.Item;//定义form内的属性。

const Authorized = RenderAuthorized(getAuthority());

@connect(({ transaction,loading }) => ({ //dva的方法

  transaction,    //加载模型

  loading:loading.models.transaction,    //模型内的请求是否完成

  submitting: loading.effects['transaction/create'],    //单请求是否完成

}))

@Form.create()    //from

export default class Bland extends PureComponent {

constructor(props) {  //初始化

   super(props);  

console.log('Bland初始化');

};

    state = {    //定义state

'xxx' :null,

}

componentWillMount() {     //render之前请求一次数据

    this.props.dispatch({

      type: 'xx/xx',

      payload:{id:1},

    });

  }

  

  render() { //渲染页面

    const { transaction,submitting} = this.props;     //props内的属性

    const { getFieldDecorator, getFieldValue } = this.props.form;

    

return (//html

     <Card

     bordered = {false}

     >

     

     </Card>

    );

  }

}