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

小崽兒發表於2019-04-02

前言

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

會出現大量重複的業務程式碼
不同開發人員對公共業務實現的方式/命名不同
在 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 的展示
傳入資料清理函式，清洗後端返回的資料，通過屬性代理傳播

定義公共業務模型

⚠️ 本文是基於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。

我在專案中的具體實踐

clone專案，檢視專案的表格頁 -> 查詢表格

在小型專案中實行專案管理最佳實踐
2008-07-08
專案管理
PostgreSQL十億級模糊查詢最佳實踐
2017-04-26
SQL
基於大中臺架構的電商業務中臺最佳實踐之一：業務中臺總體架構介紹
2018-10-22
架構
go專案dockerfile最佳實踐
2020-07-29
GoDocker
JavaScript 專案最佳實踐指南
2017-07-20
JavaScript
Vue 小專案的最佳實踐
2017-04-18
Vue
10個專案文件最佳實踐
2012-11-23
10 個專案文件最佳實踐
2012-11-22
網站加速最佳實踐 – 減少DNS查詢
2010-01-28
網站DNS
國標是最佳業務實踐
2010-04-27
深入Django專案實戰與最佳實踐
2024-05-19
Django
VisionMobile：物聯網開發者專案最佳實踐調查（資訊圖）
2016-02-23
C 語言專案中標頭檔案包含的最佳實踐
2024-09-01
有贊開源專案最佳實踐
2018-05-22
執行專案管理的最佳實踐
2008-07-09
專案管理
重構 Rails 專案之最佳實踐
2013-03-06
AI
Module Federation在客服工單業務中的最佳實踐
2022-04-09
大型開發專案中 git 工作流的最佳實踐
2021-09-06
Git
在Django中查詢重複專案
2024-04-24
Django
怎麼查詢登陸網站後臺?(如何查詢網站後臺地址)
2024-10-07
網站
Vue 在大型專案中的架構設計和最佳實踐
2024-07-23
Vue架構
HBase 在統一內容平臺業務的最佳化實踐
2024-07-11
架構師必備：多維度查詢的最佳實踐
2022-05-22
架構
程式碼審查最佳實踐
2012-08-13
用mobx構建大型專案的最佳實踐
2019-03-03
什麼是框架？（最佳實踐、專案總結）
2019-09-08
框架
【CURL】PHP的CURL開發專案最佳實踐
2015-12-27
PHP
專案管理最佳實踐，企業如何進行有效的專案管理
2020-01-07
專案管理
基於大中臺架構的電商業務中臺最佳實踐之三：交易中臺技術要點設計之高效能
2018-11-06
架構
前後端分離專案實踐分析
2017-11-14
後端
js實現的查詢表格中的資料程式碼例項
2017-04-02
JS
用mobx構建大型專案的最佳實踐(2)
2019-02-17
阿里DDD專案最佳實踐-COLA 架構總覽
2021-09-21
阿里架構
TypeScript在react專案中的實踐
2018-08-27
TypeScriptReact
TypeScript在node專案中的實踐
2018-07-21
TypeScript
RDSSQLServer-最佳實踐-高CPU使用率系列之非SARG查詢
2017-03-20
SQLServer
千萬級資料深分頁查詢SQL效能最佳化實踐
2024-10-30
SQL
前後端分離，最佳實踐
2016-11-07
後端