中後臺專案 - 查詢表格業務最佳實踐

小程式開發 MobX 程式設計師 · 發表 2019-04-03 11:37:30

摘要：查詢表格業務是中後臺系統最常用的業務系統之一，我相信該業務場景會在你的專案中會大量出現。既然該此場景在專案中大量的出現，所以對其進行必要的封裝會極大的提升業務的複用性以及專案的可維護性。以下是不採取封裝可能會帶來的問題。會出現大量重複的業務程式碼不同開發人員對公共業務實現...

查詢表格業務是中後臺系統最常用的業務系統之一，我相信該業務場景會在你的專案中會大量出現。既然該此場景在專案中大量的出現，所以對其進行必要的封裝會極大的提升業務的複用性以及專案的可維護性。以下是不採取封裝可能會帶來的問題。

會出現大量重複的業務程式碼
不同開發人員對公共業務實現的方式/命名不同
在 store 層，不同的開發人員可能會定義不同的資料模型
相同業務的程式碼分散，不利於形成良好的開發規範

以上的幾點總結起來就是不利於專案的維護和形成規範。

查詢表格業務 - 設計思路

該業務場景如此常見，所有相信大家都有自己的實現。所以這裡僅僅是提出一個設計思路，你可以用來參考案然後考慮是否對你的專案有幫助。設計圖如下；

HOC 定義公共業務介面，預留插槽

這裡會在 HOC 中繫結到 Store

const TableHoc = config => (WrappedComponent) => {
const {
store, // 繫結 store
className,
NoPager, // 是否需要外接翻頁器
noNeedReloadPathname = [], // 不需要重新載入資料的返回頁面
dealFormatData = data => data, // 清理列表資料方法
} = config || {};

@inject(store)
@observer
class BaseTable extends Component {
static defaultProps = {
fixClass: 'baseTable-wrapper',
};

static propTypes = {
fixClass: PropTypes.string,
className: PropTypes.string,
location: PropTypes.object.isRequired,
match: PropTypes.object.isRequired,
};

componentDidMount() {
const {
match: { params: { id } = {} },
location: { pathname },
} = this.props;
/* eslint-disable */
const {
tableData: { count, needReload },
} = this.props[store];

const preLocation = window.RouterPathname.find((item) => item !== pathname); // [preLocation, curLocation]

const noNeedReloadTag = !preLocation
? false
: noNeedReloadPathname.some((item) => {
return preLocation.startsWith(item);
});

// 資料沒有更新使用快取資料
if (count !== 0 && !needReload && noNeedReloadTag) {
return null;
}

if (id) {
// 如果根據路由獲取 id 則拿 id 進行呼叫
this.props[store].getData({ id });
} else {
this.props[store].getData();
}
return null;
}

/**
* 頂部搜尋 介面
* 具體實現在 store 中
*/
handleSearch = (values) => {
this.props[store].handleSearch(values); // eslint-disable-line
};

/**
* 重置搜尋 介面
* 具體實現在 store 中
*/
handleResetSearch = () => {
this.props[store].handleResetSearch(); // eslint-disable-line
};

/**
* 翻頁 介面
* 具體實現在 store 中
*/
handlePageChange = (page) => {
this.props[store].handlePageChange(page); // eslint-disable-line
};

/**
* 改變pageSize 介面
* 具體實現在 store 中
*/
handlePageSizeChange = (page, pageSize) => {
this.props[store].handlePageSizeChange(page, pageSize); // eslint-disable-line
};

/**
* 排序 介面
* 具體實現在 store 中
*/
handleSort = (data) => {
this.props[store].handleSort(data); // eslint-disable-line
};

render() {
const { fixClass } = this.props;
// 傳遞 Store， 讓頁面能夠呼叫 Store 中的自定義方法
const Store = this.props[store]; // eslint-disable-line
const { tableData: data } = Store;
const tableData = toJS(data);
const classes = classnames(fixClass, { [className]: className });

const { loading, count, listItems, pageNo, pageSize, query } = tableData;

const formatData = dealFormatData(listItems);

return (
<div className={classes}>
<WrappedComponent
loading={loading}
query={query}
tableData={formatData}
handleSort={this.handleSort}
handleSearch={this.handleSearch}
handleResetSearch={this.handleResetSearch}
store={Store}
{...this.props}
/>

{NoPager ? null : (
<div className="pagWrapper">
<Pagination
showQuickJumper
showSizeChanger
showTotal={() => `共 ${count} 條`}
onChange={this.handlePageChange}
onShowSizeChange={this.handlePageSizeChange}
current={pageNo}
total={count}
pageSize={pageSize}
/>
</div>
)}
</div>
);
}
}

return BaseTable;
};
複製程式碼

定義查詢表格通用資料介面

通過高階元件屬性代理：統一專案對於此類場景的具體呼叫方法。

搜尋
篩選
翻頁
改變每頁條目
排序
重置
配置可顯示列

預留插槽

通過傳入 hoc 一些使用者自定義處理方法

例如：

傳入對映函式，兼容表格 column 的展示
傳入資料清理函式，清洗後端返回的資料，通過屬性代理傳播

定義公共業務模型

:warning: 本文是基於 mobx 進行資料流管理。redux管理的是純JavaScript物件，應該更容易實現公共模型的抽離。

class TableModel {
constructor({ pageSize = 10 } = {}) {
this.tableData = {
loading: false, // 載入資料狀態
count: 0, // 資料條目
pageNo: 1, // 當前頁碼
pageSize, // 單頁資料條目
listItems: [], // 資料條目 id 集合
byId: {}, // 資料條目的對映
query: {}, // 其他請求引數物件
errorMessage: undefined, // 錯誤資訊
needReload: false, 資料是否需要重新載入，用於資料快取優化
};
}

// 獲取請求引數
getParams(data) {
return {
pageNo: this.pageNo,
pageSize: this.pageSize,
...this.query,
...data,
};
}
}
複製程式碼

該模型是比較好的實踐，具有普遍通用性;

通過 listItems 和 byId。扁平化資料集合。
query 拓展可選的請求引數。
needReload，可以控制是否需要重新拉去資料

定義專案Store

class Table {
@observable
tableData;

/**
* more observable to add
*/

constructor(Model) {
this.tableModel = new Model(); // 之前定義的模型
this.tableData = this.tableModel.tableData;
}

@action
handleSearch(values) {
const params = Object.assign(values, { pageNo: 1 });
this.getData(this.tableModel.getParams(params));
}

@action
handleResetSearch() {
this.getData({
pageNo: 1,
grade: undefined,
name: undefined,
startTime: undefined,
endTime: undefined,
});
}

@action
handlePageChange(pageNo) {
this.getData(this.tableModel.getParams({ pageNo }));
}

@action
handlePageSizeChange(pageNo, pageSize) {
this.getData(this.tableModel.getParams({ pageNo, pageSize }));
}

@action
getData({
name = undefined,
grade = undefined,
pageNo = 1,
pageSize = 10,
startTime = undefined,
endTime = undefined,
} = {}) {
this.tableData.loading = true;
api
.initTableData({
params: {
name,
grade,
pageNo,
itemsPerPage: pageSize,
startTime,
endTime,
},
})
.then((resp) => {
const { count, items: listItems } = resp;
const byId = listItems.map(item => item.id);

this.tableData = {
loading: false,
pageNo: pageNo || this.tableData.pageNo,
pageSize: pageSize || this.tableData.pageSize,
count,
listItems,
byId,
errorMessage: undefined,
needReload: false,
query: {
grade,
name,
startTime,
endTime,
},
};
});
}

/**
* more action to add
*/

}
複製程式碼

頁面元件

這裡的頁面元件當然是作為一個容器元件，內部通常包含；

搜尋表單
列表
外部翻頁器
other

元件開發的一種思想 ，展示性元件對於同一呼叫通常會有不同實現。基於降低元件的耦合度，通常只會定義呼叫介面具體實現由外部實現。

這裡的頁面元件會實現除公共業務以外的所有實現，同時也可以拓展其他store不呼叫定義好的業務。

搜尋表單

表單接受 query， query 會填充到表單
搜尋回撥返回搜尋引數
重置回撥

列表

接受listItems 資料集合
跳轉回調
開啟 modal 回撥
other 自定義回撥

外部翻頁器

如果你自定義了列表，並且內部沒有封裝翻頁器，就是用外部翻頁器。

// 可以使用快取資料的返回頁面
const noNeedReloadPathname = ['/form/baseForm', '/detail/baseDetail/'];

// dealFormatData -> 清理列表資料方法
@TableHoc({ store: 'TableStore', dealFormatData, noNeedReloadPathname })
class SearchTable extends Component {
static defaultProps = {
titleValue: ['本次推廣專屬小程式二維碼', '本次推廣專屬小程式連結'],
};

static propTypes = {
loading: PropTypes.bool,
tableData: PropTypes.array, // 表格資料
query: PropTypes.object, // 表單查詢資訊
titleValue: PropTypes.array, // 彈窗提示
store: PropTypes.object, // @TableHoc 高階元件中繫結的 mobx store 物件
routerData: PropTypes.object.isRequired, // 路由資料
history: PropTypes.object.isRequired, // router history
handleSearch: PropTypes.func.isRequired, // @TableHoc 表單搜尋介面
handleResetSearch: PropTypes.func.isRequired, // @TableHoc 表單重置介面
};

constructor(props) {
super(props);
this.state = {
visibleModal: false,
record: {},
};
}

get columns() {
return [
{
title: '建立時間',
dataIndex: 'createdAt',
key: 'createdAt',
},
{
title: '地區',
dataIndex: 'address',
key: 'address',
},
{
title: '學校',
dataIndex: 'school',
key: 'school',
},
{
title: '年級',
dataIndex: 'grade',
key: 'grade',
},
{
title: '班級',
dataIndex: 'className',
key: 'className',
},
{
title: '使用者數',
dataIndex: 'registerNumber',
key: 'registerNumber',
},
{
title: '訂單金額',
dataIndex: 'totalPayMoney',
key: 'totalPayMoney',
},
{
title: '我的收益',
dataIndex: 'totalShare',
key: 'totalShare',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
width: 155,
render: (text, record) => {
const shareStyle = {
width: 70,
color: '#1574D4',
marginRight: 5,
cursor: 'pointer',
};
const detailStyle = {
width: 70,
color: '#1574D4',
marginLeft: 5,
cursor: 'pointer',
};
return (
<div className="operations-orgGo">
<span style={shareStyle} onClick={() => this.handleOpenShareModal(record)}>
立即分享
</span>
<span style={detailStyle} onClick={() => this.redirectToDetail(record)}>
檢視詳情
</span>
</div>
);
},
},
];
}

redirectToCreatePromotion = () => {
const {
history: { push },
} = this.props;
push({ pathname: '/form/baseForm' });
};

redirectToDetail = (record) => {
const {
history: { push },
} = this.props;
push({ pathname: `/detail/baseDetail/${record.id}` });
};

handleOpenShareModal = (record) => {
this.setState({
visibleModal: true,
record,
});
const { store } = this.props;
store.getWeiCode({ promotionId: record.id, record });
};

handleCloseShareModal = () => {
const { store } = this.props;
this.setState(
{
visibleModal: false,
record: {},
},
() => store.delWeiCode(),
);
};

handleReset = () => {
const { handleResetSearch } = this.props;
handleResetSearch();
};

handleSearch = (value) => {
const { timeLimit = [undefined, undefined], grade } = value;
let { queryCond: name } = value;
const startTime = timeLimit[0] && timeLimit[0].format('YYYY-MM-DD HH:mm:ss');
const endTime = timeLimit[1] && timeLimit[1].format('YYYY-MM-DD HH:mm:ss');
name = name ? name.replace(/^(\s|\u00A0)+/, '').replace(/(\s|\u00A0)+$/, '') : undefined;

const { handleSearch } = this.props;
handleSearch({
startTime,
endTime,
name,
grade: grade || undefined,
});
};

render() {
const { visibleModal, record } = this.state;

const {
routerData: { config },
titleValue,
loading,
tableData,
query,
} = this.props;

return (
<WithBreadcrumb config={config}>
<Helmet>
<title>查詢表格 - SPA</title>
<meta name="description" content="SPA" />
</Helmet>
<div className="table-search-wrapper">
<ModuleLine title="查詢表格">
<Button
size="middle"
type="primary"
className="promotionBtn"
onClick={this.redirectToCreatePromotion}
>
新增
</Button>
</ModuleLine>

<SearchForm
handleReset={this.handleReset}
onSubmit={this.handleSearch}
initialValue={query}
/>
</div>

<Table
bordered
className="self-table-wrapper"
loading={loading}
dataSource={tableData}
pagination={false}
columns={this.columns}
/>
<ShareModal
key="base-table-modal"
width={600}
record={record}
showTitle={false}
titleDownImg="儲存"
recordType="string"
visible={visibleModal}
titleValue={titleValue}
handleClose={this.handleCloseShareModal}
/>
</WithBreadcrumb>
);
}
}
複製程式碼

總結

總結一下，這裡管理查詢列表的所有抽象和模組功能:

hoc 中定義公共業務介面，並且作為中間層實現一些業務插槽，比如進行資料清理。
定義公共模型。抽離該模組的公共狀態，使用扁平化資料利於資料快取。
基於公共模型拓展該模組的多有業務和狀態。
展示型元件，只是更具資料進行展示。業務處理基於回撥傳遞給容器元件，容器元件決定是容器內部實現還是公共業務實現。
容器元件，組合公共業務元件和自定義元件。並且可以拓展其他Store。