## 新建列表頁面
1. 我們先做一個最簡單的列表頁面
2. 列表頁面完整代碼如下：
~~~
import React, { PureComponent } from 'react';
import { Button, Col, Form, Input, Row } from 'antd';
import Grid from '../../../components/Sword/Grid';
import Panel from '../../../components/Panel';
const FormItem = Form.Item;
@Form.create()
class Demo extends PureComponent {
// ============ 查詢表單 ===============
renderSearchForm = onReset => {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={6} sm={24}>
<FormItem label="標題">
{getFieldDecorator('title')(<Input placeholder="請輸入標題" />)}
</FormItem>
</Col>
<Col>
<div style={{ float: 'right' }}>
<Button type="primary" htmlType="submit">
查詢
</Button>
<Button style={{ marginLeft: 8 }} onClick={onReset}>
重置
</Button>
</div>
</Col>
</Row>
);
};
render() {
const code = 'demo';
const response = {
code: 200,
data: {
total: 3,
size: 10,
current: 1,
searchCount: true,
pages: 1,
records: [
{
id: '1',
title: '測試標題1',
content: '測試內容1',
date: '2018-05-08 12:00:00',
},
{
id: '2',
title: '測試標題2',
content: '測試內容2',
date: '2018-06-08 12:00:00',
},
{
id: '3',
title: '測試標題3',
content: '測試內容3',
date: '2018-07-08 12:00:00',
},
],
},
message: 'success',
success: true,
};
const data = {
list: response.data.records,
pagination: {
total: response.data.total,
current: response.data.current,
pageSize: response.data.size,
},
};
const { form, loading } = this.props;
const columns = [
{
title: '標題',
dataIndex: 'title',
},
{
title: '內容',
dataIndex: 'content',
},
{
title: '時間',
dataIndex: 'date',
},
];
return (
<Panel>
<Grid
code={code}
form={form}
onSearch={this.handleSearch}
renderSearchForm={this.renderSearchForm}
loading={loading}
data={data}
columns={columns}
/>
</Panel>
);
}
}
export default Demo;
~~~
3. 我們來詳細分析每一個代碼塊的作用及目的
4. 首先第一層import，是為了將所用到的組件、封裝都引入進來進行頁面的渲染使用
~~~
import React, { PureComponent } from 'react';
import { Button, Col, Form, Input, Row } from 'antd';
import Grid from '../../../components/Sword/Grid';
import Panel from '../../../components/Panel';
~~~
5. 接下來是定義整個類，進行完整的導出，用作路由發現并渲染頁面。FormItem定義后可直接變為可引用的標簽 `<FormItem>` 簡化了代碼
~~~
const FormItem = Form.Item;
@Form.create()
class Demo extends PureComponent {
}
~~~
6. renderSearchForm方法封裝了搜索模塊，只需定義搜索模塊的表單元素并傳入到下面封裝的Grid組件，即可自動生成查詢重置等功能，更復雜的功能，都可以通過這個函數進行拓展
~~~
renderSearchForm = onReset => {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={6} sm={24}>
<FormItem label="標題">
{getFieldDecorator('title')(<Input placeholder="請輸入標題" />)}
</FormItem>
</Col>
<Col>
<div style={{ float: 'right' }}>
<Button type="primary" htmlType="submit">
查詢
</Button>
<Button style={{ marginLeft: 8 }} onClick={onReset}>
重置
</Button>
</div>
</Col>
</Row>
);
};
~~~
7. render函數返回的就是Demo組件最終渲染的元素
~~~
render() {
}
~~~
8. `const code = 'demo';`定義了此模塊的菜單code是demo，傳入Grid組件后，便會根據設定好的code至去查找所擁有的按鈕集最后呈現在頁面上。若新建了另一個模塊demo1，則此時的code也改為demo1，與菜單code保持一致
9. 再往下的response和data，則定義了Grid組件所需呈現的數據源。response模擬了接口返回的數據，而data則是對返回數據進行了二次加工，從而變為組件可識別的數據格式
~~~
const response = {
code: 200,
data: {
total: 3,
size: 10,
current: 1,
searchCount: true,
pages: 1,
records: [
{
id: '1',
title: '測試標題1',
content: '測試內容1',
date: '2018-05-08 12:00:00',
},
{
id: '2',
title: '測試標題2',
content: '測試內容2',
date: '2018-06-08 12:00:00',
},
{
id: '3',
title: '測試標題3',
content: '測試內容3',
date: '2018-07-08 12:00:00',
},
],
},
message: 'success',
success: true,
};
const data = {
list: response.data.records,
pagination: {
total: response.data.total,
current: response.data.current,
pageSize: response.data.size,
},
};
~~~
10. 最后一段代碼則是定義了Grid所需顯示的字段，以及所有數據的匯總，都設定在了Grid組件里
~~~
const { form, loading } = this.props;
const columns = [
{
title: '標題',
dataIndex: 'title',
},
{
title: '內容',
dataIndex: 'content',
},
{
title: '時間',
dataIndex: 'date',
},
];
return (
<Panel>
<Grid
code={code}
form={form}
onSearch={this.handleSearch}
renderSearchForm={this.renderSearchForm}
loading={loading}
data={data}
columns={columns}
/>
</Panel>
);
~~~
11. 好了，源碼分析完了，我們打開系統查看下對應的效果，發現一個列表也已然生成，數據內容與我們設置的一樣
12. 如果頁面都把數據寫成固定的，那么這個模塊基本沒有價值，Grid顯示的數據必須是動態的對接接口的，所以我們下面來學習下如何將數據對接接口，讓他活起來。
<br>
## 對接列表接口
1. 在demo.js中加入`getFakeList`，定義數據返回（注意json格式要嚴格按照截圖中所來），否則grid組件加載會出問題
2. 打開postman調用mock接口查看返回成功
3. 我們到services文件夾下定義這個新增的接口
4. 優化列表頁代碼，加入接口動態對接
~~~
import React, { PureComponent } from 'react';
import { Button, Col, Form, Input, Row } from 'antd';
import Grid from '../../../components/Sword/Grid';
import Panel from '../../../components/Panel';
import { list } from '../../../services/demo';
const FormItem = Form.Item;
@Form.create()
class Demo extends PureComponent {
state = {
data: {},
};
componentWillMount() {
list().then(response => {
this.setState({
data: {
list: response.data.records,
pagination: {
total: response.data.total,
current: response.data.current,
pageSize: response.data.size,
},
},
});
});
}
// ============ 查詢表單 ===============
renderSearchForm = onReset => {
const { form } = this.props;
const { getFieldDecorator } = form;
return (
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={6} sm={24}>
<FormItem label="模塊名">
{getFieldDecorator('title')(<Input placeholder="請輸入模塊名" />)}
</FormItem>
</Col>
<Col>
<div style={{ float: 'right' }}>
<Button type="primary" htmlType="submit">
查詢
</Button>
<Button style={{ marginLeft: 8 }} onClick={onReset}>
重置
</Button>
</div>
</Col>
</Row>
);
};
render() {
const code = 'demo';
const { data } = this.state;
const { form, loading } = this.props;
const columns = [
{
title: '標題',
dataIndex: 'title',
},
{
title: '內容',
dataIndex: 'content',
},
{
title: '時間',
dataIndex: 'date',
},
];
return (
<Panel>
<Grid
code={code}
form={form}
onSearch={this.handleSearch}
renderSearchForm={this.renderSearchForm}
loading={loading}
data={data}
columns={columns}
/>
</Panel>
);
}
}
export default Demo;
~~~
5. 可以看出，我們將data放入了state，并在組件將要加載的時候調用api接口，返回的時候將數據重新寫入到state中，從而刷新渲染，顯示出了數據。
6. 打開頁面刷新，發現數據加載成功