2017.11.6 - ant design table等组件的使用，以及 chrome 中 network 的使用

一、今日主要任务

悉尼小程序后台管理开发：

景点管理页面： 获取已有数据列表，选取部分数据呈现在表格中，根据景点名称、分类过滤出对应的景点。

 

二、难点

1. 项目技术选取：

　　ant design、react、es6；

2. 在此之前，只看过一点点 es6 的语法，未实操；react 也只是看过语法，未实操；ant design 是个什么鬼，第一次听说。

3. 所遇的主要问题：

（1）ant design 中 table 组件的使用：

　　引入 Table、Buttton、Col、Row、Select 组件 => import {Table, Button, Col, Row, Select} from 'antd';

　　申明 Select 下的 Option => const Option = Select.Option, 使用 => <Select><Option></Option></Select>;

　　将 Button 组件化 => const ButtonGroup = Button.Group, 使用 => <ButtonGroup><Button></Button></ButtonGroup>;

　　创建Table =>

　　　　<Table rowKey={(record) => record.id} columns={columns} dataSource={sites} pagination={false} bordered size="middle" />

　　　　record 是从 dataSources 里面获取的每行数据，在创建行的时候，ant design 会自动为每行创建一个唯一的 id；

　　在 columns 中创建列，如

　　const columns = [

　　　　{

　　　　　　title: '中文名称', // 列的名称

　　　　　　dataIndex: 'cnTitle', // 列的数据，值从 dataSource 的对象中取，要求属性名是相同的才能取到正确的值

　　　　　　key: 'cntitle', 

　　　　},

　　　　{　　　　　

　　　　　　title: '英文名称',

　　　　　　dataIndex: 'enTitle',

　　　　　　key: 'entitle',

　　　　}

　　]

（2）报错信息，500 服务器错误，401 未授权，（看一下application里的user信息是否过期），network中的请求信息，请求结果；

　　network - Headers：查看请求 url，请求 method，以及请求 status；

　　network - Request Payload：查看该请求返回的字段及其值；