前端代碼設計之優雅的CRUD

業務場景

在代碼標準換行的狀況下，使用100行之內代碼實現下圖白色區域除新建和編輯外的全部功能。

這種頁面在管理系統裏多的很，排除掉新建和編輯，那麼大體功能以下：

• 搜索
• 重置
• 刪除
• 批量刪除
• 導入
• 導出
• 分頁
• 切換頁容量
• 按指定列排序

開始設計

一如既往，做爲8年前端的我，喜歡先想好如何使用。我指望，我能夠像下面這樣來完成這樣一套頁面。

<template>
  <!-- 搜索條件表單（略） -->
  <!-- 操做按鈕 -->
  <el-button @click="search">搜索</el-button>
  <el-button @click="importExcel">導入</el-button>
  <el-button @click="exportExcel">導出</el-button>
  <el-button @click="reset">重置</el-button>
  <el-button @click="deleteBatch">批量刪除</el-button>
  
  <!-- 表格 -->
  <el-table>
    <el-table-column label="操做" min-width="120" >
      <template slot-scope="{row}">
        <el-button @click="deleteById(row)>刪除</el-button> </template> </el-table-column> </el-table> <!-- 分頁 --> <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination" ></pagination>
</template>

<script> export default { name: 'MyPage', extends: BaseTable, // 繼承BaseTable，獲取功能默認實現方法 data () { return { form: { 表單搜索條件字段定義 } } }, created () { this.config({ module: '權限', // 模塊名稱 api: '/system/permission', // 接口文件 sorts: [{ // 默認排序字段配置 property: 'perm.CREATE_TIME', direction: 'DESC' }] }) this.search() } } </script>

複製代碼

整個頁面經過這樣的結構呢，就能夠完成上述9個繁瑣的功能。那麼會存在如下幾個問題。

1. 默認的功能實現不知足當前頁面的需求怎麼處理？

覆蓋！例如刪除，咱們從BaseTable下繼承下來的方法爲deleteById，那麼咱們在methods中編寫deleteById方法便可，以下

methods: {
  deleteById(row) {
    // 自定義實現
  }
}
複製代碼

這樣呢，繼承下來的方法被覆蓋，調用的是本頁面的deleteById方法，同理，若是當前頁面有更多功能，新增方法便可。

2. 頁面中只包含了部分功能如何處理？

不用處理！雖然繼承了9個默認實現，不去使用即可。

WHY？

爲何這麼設計？咱們能夠試想一下，若是每一個頁面都獨立去寫這些功能是多麼冗餘的工做量。而且，每一個開發的實現邏輯是有差別的，默認實現知足大部分的實現邏輯就意味着咱們能夠統一維護，而且也不會丟失獨特的業務處理。

代碼實現

代碼的具體實現得根據項目的設計特色來決定。我在個人開源框架Eva中有一套默認的實現。在src/components/base/BaseTable.vue中。因爲代碼實現超過了200行，因此這裏就不貼出來了，只是實現功能而已，但設計思路已經講述完畢了。

• Eva開源框架GITEE：gitee.com/coderd-repo…
• Eva開源框架GITHUB：github.com/coderd-repo…

歡迎star！

關注我，和你一塊兒探討代碼設計的藝術。