数据中台前端公共模块

hc-micro-common前端公共模块，提供数据中台各应用公共功能。

项目结构

| -- dist //打包后的目标文件夹
| -- lib
      | -- config //配置文件
      | -- core //核心工具方法，采用默认导出
         | -- baseApi.ts // 各个微服务在网关的baseApi
         | -- is.ts // 提供基础的类型判断方法
         | -- verify.ts // 提供emial,url,mobile,verifycode等校验方法
      | core-types //对core中方法的类型统一说明
      | -- directives // vue2方式自定义指令。提供copy,debounce,throttle,watermarker指令
      | -- page //预留的公共组件。
      | -- plugins //预留的第三方集成应用配置，如dayjs
      | -- request //统一的axios封装
      | -- styles //预留的公共样式
      | -- tools //模块开发工具类
      | -- utils // 其他工具类
      | -- index.ts //入口文件

安装使用

npm install hc-micro-common@latest --save

如何添加工具类

请把工具类放在 core 或者 utils下。约定core下放基础的工具方法，且默认导出，方便使用默认导入。utils中放特定的工具类。如notification。倒出时以对象方式导出。表示是特定的工具方法。

如何发布/更新模块

1. 修改代码并测试通过提交

2. 更新版本

   版本更新依据 语义化版本规范

   常用：

   npm version patch # 补丁。 效果：1.0.0  --> 1.0.1
   npm version minor # 小版本 效果：1.0.0  --> 1.1.0
   npm version major # 大版本 效果：1.0.0  --> 2.0.0

3. 构建与发布

   npm run build # 构建代码  ts -> js
   npm publish # 发布到仓库

使用示例

http请求

具体请求方法约定放在@/api目录下

import { hcRequest as request, BaseApi, HcResponseData } from 'hc-micro-common'
import { QUERY_TYPE, TB_FD_TYPE, BUSINESS_TYPE } from '@/api/constant'

const Api = {
  database: '/dbs', // datasource crud operation
}

/**
 * 添加数据源
 * @param {{businessType: number}} params 业务类型
 * @param {import('../reqTypes').AddDsDTO} data 数据源信息
 * @returns {Promise<HcResponseData<import("../resTypes").DsVo>>} 数据源完整信息
 */
export function addDataSource(params, data) {
  return request({
    url: BaseApi.HCMETA_API + Api.database,
    method: 'post',
    params,
    data,
  })
}

使用定义的方法

在hc-micro-common中请求封装对业务错误(retCode不为0)也作为异常抛出。

add(params, data) {
    addDataSource(params, data).then((res) => {
        notification.success(res.retCode, '添加成功')
        this.$emit('done', this.type, res.data)
        this.form.resetFields()
    }).catch((error) => {
        notification.error(error.retCode, error.retMsg)
    })
},

或

async add(params, data) {
    try {
        const res = await addDataSource(params, data)
        notification.success(res.retCode, '添加成功')
        this.$emit('done', this.type, res.data)
        this.form.resetFields()
    } catch (error) {
        notification.error(error.retCode, error.retMsg)
    }
},

通用notification

import { hcNotification as notification } from 'hc-micro-common'

notification.error(error.retCode, error.retMsg)
notification.error(error) //同上一行代码

自定义指令

version <= 1.0.19

// 全局注册指令。包含copy,debounce,throttle等
import { hcDirectives } from 'hc-micro-common'
Vue.use(hcDirectives)

<a-button v-copy="'复制文本xxx'">测试copy</a-button>
<div
    style="width: 300px; height: 300px"
    v-waterMarker="{ text: 'xxx', textColor: 'red' }"
>
    测试waterMarker
</div>

<a-button
    type="primary"
    v-debounce="{
    callback: () => debounceClick(),
    time: 4000,
    }"
>
    测试防抖
</a-button>
<a-button
    type="primary"
    v-throttle="{
    callback: () => throttleClick(),
    time: 4000,
    }"
>
    测试节流
</a-button>

version >= 1.0.20新版本去除了自定义指令的注册。用户可自行注册：

import { vue2_directives} from 'hc-micro-common'
vue2_directives.copy
vue2_directives.debounce
...

日期格式化

| 方法名 | 功能 | 结果示例 | | -------------- | -------------- | ----------------- | | format2Day | 格式化到天 | 2022-01-27 星期四 | | format2Minute | 格式化到分 | 2022-01-27 09:16 | | formatRelative | 格式化相对时间 | 2 天前 |

以上方法是基于dayjs做的封装。使用者也可以直接引入dayjs使用其自带的方法。

import {
  format2Day,
  format2Minute,
  formatRelative,
  dayjs,
} from 'hc-micro-common'
console.log('day', format2Day(Date.now()))
console.log('min', format2Minute(Date.now()))
console.log('rel', formatRelative(new Date('2022-01-25')))

可能你想把这些方法用于模板渲染，可把方法注册到filters中，作为过滤器使用。

import { formatRelative } from 'hc-micro-common'

filters: {
    formatRelative,
}

<div>
    {{ new Date('2022-01-25') | formatRelative }}
</div>

屏幕媒体查询

主要用于页面响应式显示。比如表格在不同屏幕下的拉伸效果。

import { enquireNoteBookScreen } from 'hc-micro-common'

mounted() {
    //根据屏幕宽度 动态设置表格出于可拉伸模式or滚动模式
    enquireNoteBookScreen((isNoteBook) => {
      this.changeMode(isNoteBook)
    })
  },
  methods: {
    changeMode(isNoteBook) {
      if (isNoteBook) {
        this.tableComponents = {}
        this.scroll = { x: 1500 }
      } else {
        this.scroll = undefined
        this.tableComponents = genComponents(this.columns)
      }
      this.key++
    },
  }

使用公共插件

dayjs

import { dayjs } from 'hc-micro-common'

日期格式化无法处理的，可使用dayjs原生处理

axios

import { axios } from 'hc-micro-common'

可基于axios做封装

使用Jest测试

因项目使用TypeScript开发, 因此使用ts-jest执行jest测试.

#执行所有测试
npm test
# 执行单个文件测试
npx jest ./test/utils/HierarchyUtils.test.ts