ant design pro(一)

一、ant design pro学习连接：

英文官方文档https://pro.ant.design/docs/getting-started

中文官方文档：

https://pro.ant.design/docs/router-and-nav-cn#%E6%96%B0%E5%A2%9E%E5%B8%83%E5%B1%80%E6%A8%A1%E6%9D%BF

流程介绍连接：http://www.javashuo.com/article/p-fcwagdpm-kh.html

二、ant design 各类DOM:

官方连接：http://design.alipay.com/develop/web/components/spin/

三、dva API 学习连接：

https://github.com/dvajs/dva/blob/master/docs/API.md

四、import { } from '';

import { getRouterData } from './common/router';

解析：{ }中的内容是./common/router中的 变量或者方法；

五、React中文文档：

http://www.css88.com/react/docs/react-api.html

react route中文文档：http://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

六、ES6的语法：

 阮一峰的博客：

http://es6.ruanyifeng.com/#docs/destructuring#%E6%95%B0%E5%80%BC%E5%92%8C%E5%B8%83%E5%B0%94%E5%80%BC%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC

6.一、let 、var 、const命令

let { path } = item;//等价于let path = item.path

解析：es6的解构赋值。大括号中的key对应item的key  其值也是相对应的。

let 命令：ES6 新增了let命令，用来声明变量。它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效。

let命令，它所声明的变量必定要在声明后使用，不然报错。

var命令会发生”变量提高“现象，即变量能够在声明以前使用，值为undefined。

var命令声明的，在全局范围内都有效。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须当即初始化，不能留到之后赋值。

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const的做用域与let命令相同：只在声明所在的块级做用域内有效。

const命令声明的常量也是不提高，一样存在暂时性死区，只能在声明的位置后面使用。

const声明的常量，也与let同样不可重复声明。

ES6 声明变量的六种方法：
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。因此，ES6 一共有 6 种声明变量的方法。

// var 的状况
console.log(foo); // 输出undefined
var foo = 2;

// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;

6.二、

七、ant design pro连接 

组件：https://pro.ant.design/components/Ellipsis-cn/

7.一、ant design pro 代码解析：

7.1.一、实现时间的展现：

import moment from ‘moment’;

7.1.二、展现时间的组件：

import {Form} from 'antd';

const FormItem = Form.Item;

<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}  label="建立时间">
  {form.getFieldDecorator('ctSTime',{
    rules: [{ required: true }],
  })(<DatePicker style={{ width: '100%' }} placeholder="请输入建立时间" />)}
</FormItem>

八、ant design Pro 项目流程：

针对查询表格流程的分析：（自我理解）

渲染的是index.ejs

step1：src/index.js：渲染网页的入口

step2：src/Utils/request.js

step2.1：src/services/api.js

step3：src/common/menu.js：页面的登陆页和首页的侧边栏；

step4：common/router.js（浏览器上的url）：实现models和routes中某组件的绑定

step5：src/router.js：

-step6：src/models/login.js：

-step6.1：src/routes/User/Login.js

step7：src/models/rule.js：

step7.1：src/routes/List/TableList.js：

先执行组件的render(){}函数，效果以下：

无数据：

而后执行：

componentDidMount（）{}函数，效果以下：

有数据：（是在该生命周期中发起了一个action，用来fetch数据）

step8：在src/routes/List/TableList.js中的componentDidMount(){}，跳到src/models/rule.js中的effects中实现异步；

step9：在src/models/rule.js中的effects中跳到src/services/api.js：在api.js中经过request发起请求；

step10：在.roadhogrc.mock.js中去匹配step9中request的参数来执行相应的方法。（疑问：怎么知道是post仍是get呐？）

step11：找到的request请求对应的mock方法时，执行mock某js文件中的方法。（注意，mock中模拟数据时，数据的field要跟src/routes/List/TabelList.js中columns对象中的dataIndex一致）

九、ant design Pro使用中碰见的问题：

<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="ID">
        {form.getFieldDecorator('ctId', {
          rules: [{ required: false, message: '' }],
        })(<Input disabled='false'/>)}

应写成：

<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="ID">
        {form.getFieldDecorator('ctId', {
          rules: [{ required: false, message: '' }],
        })(<Input disabled={false}/>)}

十、ant design Pro 的生命周期：

摘自：https://blog.csdn.net/ElinaVampire/article/details/51813677