后台项目做多了就会发现,在一个成熟的后台项目中,列表页面的结构以及逻辑都是相对固定的,怎样才能把重复的这部分提取出来呢

哪些需要提取

项目里用的 UI 库是 Element UI 。一个列表页从 UI 表现来看上至下通常包含这么几部分:筛选栏,列表,分页。在 vue 单文件组件中看的话,主要是模板区和 js 区,项目里列表页一般是统一风格,所以公共样式不会写在列表组件里。首先模板部分我认为是不需要提取出来的,一方面是因为用了 element 表格组件,二次封装会使传值等变的更为复杂,另一方面是封装过后在可读性上有很大的损失

怎么封装

由于只提取了公共的逻辑,模板部分未有提取,而且每个列表页调用的 api 也不同,选择采用 mixin 的方式,在 mixin 中定义公共的数据变量以及方法,在对应的业务单文件组件中引入。mixin 的特性可以在 官方文档 中了解,通过这种方式优点是可以提取公共逻辑,并且可以在混入的地方通过新声明覆盖旧声明的方式重写;缺点是通过 mixin 引入的内容在业务页面是没法直接看到的,这也是使用 mixin 的主要问题。在项目的协作开发,我们采用约定开发的方式,使用者要了解页面所使用的 mixin ,这样可以降低使用 mixin 导致出问题的几率

成果

/**
 * list.js 列表 mixin
*/

import { TIMER_DURATION } from '@/config'

export default {
  data () {
    return {
      // 接口的 api 方法
      getListApi: () => {},
      // 请求参数
      reqParams: {},
      // 过滤参数
      filterParams: {},
      // 列表数据
      list: [],
      // 分页数据
      page: {
        pageStart: 1,
        pageSize: 20
      },
      // 返回参对应列表数据的字段名
      responseListName: 'list',
      // 请求接口 loading flag
      listLoading: false,
      // 是否开启轮询
      needPolling: false,
      // 轮询的时间间隔,默认采用全局统一间隔时间
      timerDuration: TIMER_DURATION,
      // 轮询定义的定时器
      timer: null
    }
  },
  mounted () {
    // 方法调用放在页面中
    // this.getList()
    // this.startPolling()
  },
  beforeDestroy () {
    this.endPolling()
  },
  methods: {
    getList () {
      if (!this.listLoading) {
        this.listLoading = true
        this.getListApi({
          ...this.reqParams,
          ...this.filterParams,
          ...this.page
        }).then(res => {
          // 翻页可能连续点击,如果返回数据不是当前页,不执行赋值操作
          if (res.data && res.data.page && (this.page.pageStart !== res.data.page.pageStart)) {
            return
          }
          this.handleGetListResponse(res)
        }).catch(() => {
          this.handleGetListErr()
        }).finally(() => {
          this.listLoading = false
        })
      }
    },

    // 如果默认方法不能满足需求,可以在组件中重写这个方法来处理返回数据
    handleGetListResponse (res) {
      res.data = res.data || {}
      this.list = res.data[this.responseListName] || []
      res.data.page && (this.page = res.data.page)
    },

    handleGetListErr () {},

    // 翻页
    handleSizeChange (val) {
      this.page.pageStart = val
      this.getList()
    },

    // 过滤
    handFilterStatusChange (e) {
      // 结束当前的定时任务,避免和本次请求冲突
      this.endPolling()
      this.getList()
      this.startPolling()
    },

    // 开始轮询
    startPolling () {
      if (!this.needPolling) {
        return
      }
      this.timer = setInterval(this.getList, this.timerDuration)
    },
    // 结束轮询
    endPolling () {
      if (!this.needPolling) {
        return
      }
      clearInterval(this.timer)
    }
  }
}
/**
* 页面中引入 mixin 使用
*/
<template>
  <div class="user-manage">
    <basic-box-comp>
      <el-tabs v-model="reqParams.auditStatus" type="card" @tab-click="handleTabClick">
        <!-- 待审核 -->
        <el-tab-pane label="待审核" name="0" />
        <!-- 审核通过 -->
        <el-tab-pane label="审核通过" name="1" />
        <!-- 审核未通过 -->
        <el-tab-pane label="审核未通过" name="2" />
      </el-tabs>

      <!-- 查询栏 -->
      <div class="node-fliter-bar">
        <el-form ref="filterParams" :model="filterParams" :inline="true" class="search">
          <el-form-item label="用户名">
            <el-input v-model="filterParams.userName" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="用户类型">
            <el-select v-model="filterParams.userType" clearable placeholder="请选择用户类型">
              <el-option value="1" label="个人用户" />
              <el-option value="2" label="企业用户" />
              <el-option value="" label="不限" />
            </el-select>
          </el-form-item>
          <el-form-item label="用户名ID">
            <el-input v-model="filterParams.userId" placeholder="请输入用户名ID" />
          </el-form-item>
          <el-form-item label="是否可信">
            <el-select v-model="filterParams.trusted" clearable placeholder="请选择是否可信">
              <el-option value="1" label="是" />
              <el-option value="0" label="否" />
              <el-option value="" label="不限" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="search-btn" size="mini" type="primary"
              @click="handFilterStatusChange">查询</el-button>
            <el-button
              class="search-btn"
              size="mini"
              @click="handleResetFilterParams"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 列表表格 -->
      <el-table v-loading="listLoading" :data="list">
        <el-table-column prop="userName" label="用户名" />
        <el-table-column label="用户类型">
          <template slot-scope="scope">{{ scope.row.userType | fmtUserType}}</template>
        </el-table-column>
        <el-table-column label="企业名称">
          <template slot-scope="scope">{{ scope.row.companyName || '--' }}</template>
        </el-table-column>
        <el-table-column prop="chainName" label="所属链" />
        <el-table-column prop="userId" label="用户ID" width="200" />
        <el-table-column label="电话号码">
          <template slot-scope="scope">
            <span v-if="scope.row.phone">{{ scope.row.phone | hidePhoneNum }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="是否可信认证" width="110" align="center">
          <template slot-scope="scope">{{ scope.row.trusted | fmtTrusted}}</template>
        </el-table-column>
        <el-table-column label="时间" width="200">
          <template slot-scope="scope">{{ scope.row.createTime | fmtTimeFromTimestamp }}</template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" @click="handleGoDeatil(scope.row)">
              {{ scope.row.auditStatus === '0' ? '审核' : '详情' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pagination-box">
        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next"
          :current-page="page.pageStart"
          :page-size="page.pageSize"
          :total="page.pageTotal"
          @current-change="handleSizeChange" />
      </div>
    </basic-box-comp>
  </div>
</template>

<script>
import listMixin from '@/utils/mixins/list'
import { getUserListApi } from '@/api/user'

const defaultFilterParams = {
  code: '',
  userName: '',
  userType: '',
  userId: '',
  trusted: '',
}
export default {
  name: 'UserList',
  mixins: [listMixin],
  data () {
    return {
      getListApi: getUserListApi,
      responseListName: 'userList',
      listLoading: false,
      reqParams: {
        auditStatus: '0', // 0待审核 1 通过 2不通过
      },
      filterParams: { ...defaultFilterParams }
    };
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleTabClick (tab, event) {
      this.page = {
        pageStart: 1,
        pageSize: 20,
      }
      this.getList()
    },
    handleGoDeatil ({ userId, code }) {
      this.$router.push({
        name: 'UserDetail',
        params: { userId },
        query: { code }
      })
    },
    handleResetFilterParams () {
      this.filterParams = { ...defaultFilterParams }
      this.handFilterStatusChange()
    }
  },
};
</script>

上述示例是稍复杂的应用,若只是展示列表,只需重置 data 中的数据即可

总结

通过这样的方式,将同类业务中相同的逻辑抽离出来,列表页面的逻辑被简化,后续的业务迭代中只需很少的代码即可实现需求,公共的逻辑在 mixin 中统一维护,提高开发效率

标签: none

添加新评论