2.0.1 • Published 2 years ago
hc-micro-common v2.0.1
数据中台前端公共模块
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
。倒出时以对象方式导出。表示是特定的工具方法。
如何发布/更新模块
修改代码并测试通过提交
更新版本
版本更新依据 语义化版本规范
常用:
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
构建与发布
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