一、今日主要任務
悉尼小程序后台管理開發:
景點管理頁面: 獲取已有數據列表,選取部分數據呈現在表格中,根據景點名稱、分類過濾出對應的景點。
二、難點
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:查看該請求返回的字段及其值;