@huanbo99/core NPM

@huanbo99/core

介绍：环博前端开发核心基础业务包，基于vue2开发，如果是vue3开发请使用@huanbo99/core-plus，包里包含了core, filter, http, mixins, router, store, theme, utils等工具

1.core

1.1 appStart:

描述：项目启动，自动注册local,session,http,$clone,自动加载前端项目配置，自动加载字典等功能

import { Core } from '@huanbo99/core'


Core.appStart(App);


//组件里可以自动使用
local: this.$ls.setItem()；this.$ls.getItem()等方法
session: this.$ls.setItem()；this.$ls.getItem()等方法
http:  this.$http(); this.$axios.get(); this.$axios.post()等方法
clone: this.$clone()进行数据深拷贝

1.2 storage

描述：内存操作，免去获取时JSON.parse，存储时JSON.stringify等繁琐操作

import {sessionStorage,localStorage} from '@huanbo99/core/src/core/storage'


//localStorage手动注册
Vue.use(localStorage);
//组件就可以使用
local: this.$ls.setItem()；this.$ls.getItem()等方法


//sessionStorage手动注册
Vue.use(sessionStorage);
//组件就可以使用
session: this.$ss.setItem()；this.$ss.getItem()等方法

2.filter

2.1 translate

描述：翻译过滤器

源码：

/**
*@feature 根据系统语言翻译目标字符串
*@param key: 需要翻译的目标字符串
*@param moduleName: 模块（页面）名
*@param data: 动态参数
*@returns 翻译结果字符串
*/
translate: (key: string, moduleName?: string, data?: {[key:string]: string}) => string

示例：

import { setLang } from '@huanbo99/core/src/i18n';

//设置语言和语言包
setLang('zhcn',{ 
	hb: '环博',
    key: 'string',
    param: '你好{name}',
    page: { 
    	yes: '确认',
    	no: '取消'，
    	subPage: { i18n: '国际化' }
    }  
})

//in template

//通用翻译
<div>{{ 'hb' | translate }}</div>  //渲染结果: 环博

//在页面里或者模块里
<div>{{ 'yes' | translate('page') }} //渲染结果: 确认

//子页面用 “.” 拼接
<div>{{ 'i18n' | translate('page.subPage') }} //渲染结果: 国际化

//子页面放数组里
<div>{{ 'i18n' | translate(['page','subPage']) }} //渲染结果: 国际化

//匹配不上翻译
<div>{{ 'missing' | translate }}</div>  //渲染结果: missing

//动态参数
<div>{{ 'param' | translate(null,{ name: '小明' }) }}</div>  // 渲染结果: 你好小明

2.2 numFormat

描述：字符串或者数字格式化过滤器

源码：

/**
*@feature 123456 -> 123,456
*@param value 目标字符串或数字
*@param digit 格式化位数
*@param split 拼接符号
*returns 格式化以后的字符串
*/
numFormat: ( value: number | string, digit?: number = 3, split?:string = ',') => string

示例：

<div>{{123456 | numFormat }}</div>  //渲染结果  123,456
<div>{{123456 | numFormat(2) }}</div>  //渲染结果  12,34,56
<div>{{123456 | numFormat(2,'-') }}</div>  //渲染结果  12-34-56

2.3 dateFormat

描述：格式化时间

源码：

/**
*@feature: 时间过滤器
*@param value: 目标时间
*@param format: 格式，与moment的格式一样
*@returns 格式化结果
*/
dateFormat: ( value: string, format?: string = 'YYYY-MM-DD HH:mm:ss') => string

示例：

<div>{{ 'Tue, 13 Apr 2021 06:32:43 GMT' | dateFormat }}</div>
//渲染结果： 2021-04-13 16:14：43


<div>{{ 'Tue, 13 Apr 2021 06:32:43 GMT' | dateFormat('YYYY年MM月DD日') }}</div>
//渲染结果： 2021年04月13日

2.4 uppercase

描述：字符串转大写

源码：

/**
*@feature: 字符串转大写字母
*@param key: 目标字符串
*@returns 大写字符串
*/
uppercase: (key: string) => string

示例：

<div>{{ 'abcd' | uppercase }}</div> //渲染结果: ABCD

2.5 lowercase

描述：字符串转小写

源码：

/**
*@feature: 字符串转小写字母
*@param key: 目标字符串
*@returns 小写字符串
*/
lowercase: (key: string) => string

示例：

<div>{{ 'ABCD' | lowercase }}</div> //渲染结果: abcd

2.6 substr

描述：字符串转大写

源码：

/**
*@feature: 截取字符串
*@param key: 目标字符串
*@param len: 截取长度
*@param key: 是否反向截取
*@returns 截取到的字符串
*/
substr (key: string, len: number: reverse?: boolean) => string

示例：

<div>{{ 'abcdqwer' | substr(2) }}</div> //渲染结果: ab

<div>{{ 'abcdqwer' | substr(3,true) }}</div> //渲染结果: wer

2.7 dictFormat

描述：字典回显为中文

源码：

/**
*@feature: 字典回显中文
*@param targetKey: 目标字典
*@param dictionaryKey 用什么字典回显
*@param resultKey 字典的中文在什么key上
*@param targetKey 字典的值在什么key上
*@param join 多个字典时链接方式
*@returns 字典回显的值
*/
dicFormat: (targetKey: string, dictionaryKey: string, resultKey?: string = 'Name',targetKey?: string = 'Value', join?: string=',' ) => string

示例：

//字典 
{ RunStatus: [
        {Name: '超级管理员',Value: 'SUPERADMIN'},
        {Name:'学生',Value:"STUDENT"},
        {Name: '家长',Value: 'PARENT'}
    ] 
}

<div>{{'STUDENT' | dicFormat('RunStatus')}}</div> //渲染结果：学生
<div>{{'PARENT,STUDENT' | dicFormat('RunStatus')}}</div> //渲染结果：家长，学生

2.8 optionFormat

描述：选项回显

源码：

/**
*@feature: 选项回显
*@param key: 选项的值
*@param cols: 所有选项
*@param valueKey: 选项的值所在键
*@param nameKey： 选项的标题所在键
*@param split： 选项以什么符号(,)分隔
*@param join： 结果以什么符号(,)连接
*@retetuns 选项回显字符串
*/
optionFormat:(key: string, cols: any[], valueKey?:string = 'Value', nameKey?: string = 'Name', split?: string = ',', join?: string = ',') => string

示例：

//选项
options =  [
        {Name: '超级管理员',Value: 'SUPERADMIN'},
        {Name:'学生',Value:"STUDENT"},
        {Name: '家长',Value: 'PARENT'}
] 
	

<div>{{'STUDENT' | optionFormat(options)}}</div>  //渲染结果：学生
<div>{{'PARENT,STUDENT' | optionFormat(options)}}</div>  //渲染结果：家长，学生

2.9 pcdFormat

描述：省市区回显，与utils工具包里city.util中 getPCDName方法一直

源码：

/**
*@feature: 省市区回显
*@param key: 目标code
*@param join： 结果以什么符号(/)连接
*@retetuns 省市区回显字符串
*/
pcdFormat: (key: string, join?: string = '/') => string

示例：

<div>{{'510000,510100,510107' | optionFormat}}</div>  //渲染结果：四川省/成都市/武侯区
<div>{{'PARENT,STUDENT' | pcdFormat('-')}}</div>  //渲染结果：四川省-成都市-武侯区

3. http

描述：根据环博自己的业务和后端约定的配置进行封装的工具，可以自动提示错误，自动分析成功回调里的错误信息，让使用者能够在response里只处理成功回调。错误自动提示，让使用者能够免去错误处理的繁琐操作。还有token失效自动去登录页面，post请求包裹request，拼接网关，请求静态化，代理接口，消息提示等功能

3.1 HttpMessage

描述：消息提示方法。由使用者传入，不受UI组件库的约束，使用者需要满足约定的接口。使用者通过 register传入（用法见3.6 register）

export interface IHttpMessage {
  //用于请求和后端的错误提示
  notify?: IHttpMessageNotify 
  //用于用户行为反馈等功能
  toast?: IHttpMessageToast
}

type IHttpMessageNotify = (title: string, message: string) => void

export interface IHttpMessageToast {
  loading?: (message: string) => void
  success?: (message: string) => void
  failed?: (message: string) => void
  clear?: () => void
}

HttpMessage: IHttpMessage = {}


//使用
import { HttpMessage } from '@huanbo99/core/src/http';

3.2 install

描述：封装vue插件注册方法，通过Vue.use(http) 注册插件

import { Http } from "@huanbo99/core";

Vue.use(http);

//组件内可以使用
this.$request()      //用法见3.5.1 request
this.$http()         //用法见3.5.2 http
this.$axios.get()    //用法见3.5.3 get
this.$axios.post()   //用法见3.5.4 post
this.$axios.delete() //用法见3.5.5 delete
this.$axios.put()    //用法见3.5.6 put
this.$axios.patch()  //用法见3.5.7 patch
this.$axios.static() //用法见3.5.8 static

3.3 getUrlByApi

描述：根据api和配置生成完整的URL，与3.4用法一模一样。为兼容之前已有项目，保留现在这个接口。0.2.x及以后的版本勿使用

3.4 getHttpUrl

描述：根据api和配置生成完整的URL

源码：

/**
*@feature: 获取请求的url
*@param api: 1.为字符串的时候，请求默认为get
*     2.为对象的时候{ 
*          api: string, //请求api
*          method?: string = 'get', //请求方式
*          gateway?: string, //网关项 window.SYS_CONFIG.${gateway}
*          full?: boolean, //是不是全地址，和pathFull一样,优先级小于pathFull（兼容老项目）
*          pathFull?: boolean //是不是全地址，如果不是全地址，会拼接网关地址
*    }
*
*@param config:  {
*    	gateway?: string, //与参数api.gateway功能一样。优先级高于api.gateway
*    	pathFull: boolean,//与参数api.pathFull功能一样。优先级>api.pathFull>api.full
*     	[key:string]: any
*} 
*@returns 返回url
*/
getHttpUrl: (
    api: string | { 
          api: string,
          method?: string = 'get',
          gateway?: string,
          full?: boolean,
          pathFull?: boolean
    },
    config?: {
    	gateway?: string,
    	pathFull: boolean,
    	[key:string]: any
    } 
) => string

示例：

若前端配置： {
	GATEWAY: 'http://192.168.0.1:9000'
	[key:string]: any
}

网关为SYS_CONFIG = { 
	SERVER_API_DATACENTER: {
      Code: "SERVER_API_DATACENTER",
      Name: "数据中心接口地址",
      Value: "datacenter"
	},
	...
}

import { getHttpUrl } from '@huanbo99/core/src/http';

//示例1
api = '/rs/user/getAllUser'
getHttpUrl(api) 
//结果： http://192.168.0.1:9000/rs/user/getAllUser


//示例2
api = {api: '/rs/user/getAllUser',gateway: 'SERVER_API_DATACENTER'}
getHttpUrl(api) 
//结果： http://192.168.0.1:9000/datacenter/rs/user/getAllUser

//示例3
api = {api: 'http://192.168.16.16:9001/rs/user/getAllUser',pathFull: true}
getHttpUrl(api) 
//结果： http://192.168.16.16:9001/rs/user/getAllUser

3.5 http

描述：具体工具方法

3.5.1 request

源码：

/**
*@feature: http请求封装入口
*@param api: 接口api
*@param options: 请求配置 {   
*   isNotHb?: boolean //是不是环博的后端，环博后端默认会把data再包一层：{ Data:data,IsSuccess: *		boolean ,ErrorList: any []}
*   disabledAutoNotifyError?: boolean // 是否关闭自动的错误提示
*   wrap?: 'request' | string // body 包裹request
*        gateway?: string // 网关字段
*        pathFull?: boolean // url是不是完整的
*        loading?: string //请求中的文字提示
*        success?: string //请求成功的文字提示
*        failed?: string //请求失败的文字提示  
*    }
*@returns Promise对象
*/
request: (api: string, options?: {
    isNotHb?: boolean, 
    disabledAutoNotifyError?: boolean, 
    wrap?: string =  'request', 
    gateway?: string, 
    pathFull?: boolean, 
    loading?: string,
    success?: string,
    failed?: string
}): Promise

示例：

//方法1： 直接引入使用
import { request } from '@huanbo99/core/src/http';
request(api,config).then(res=> {  })

//方法2： 注册http后，组件内使用
this.$reuqest(api,config).then(res=> {  })

3.5.2 http

描述：废弃，老版本还能使用，0.2.x以后版本推荐是哟request替代

源码:

/**
*@feature: v1版本http封装
*@params api: 接口路径 string | {
* 				api: string, //
*				gateway?: string,
*				full?: boolean,
*				method: string
*			  }
*@param data： 请求参数
*@options: 请求配置 {
*		isNotHB?:boolean
*       isNotHb?: boolean //是不是环博的后端，环博后端默认会把data再包一层：{ Data:data,IsSuccess:
*       boolean ,ErrorList: any []}
*       disabledAutoNotifyError?: boolean // 是否关闭自动的错误提示 //V2版本
*       handleError?: boolean  //是否关闭自动的错误提示 //V1版本
*       wrapBody?: string;  // body 包裹request
*       wrap?: 'request' | string // body 包裹request
*       gateway?: string // 网关字段
*       pathFull?: boolean // url是不是完整的
*       loading?: string //请求中的文字提示
*       success?: string //请求成功的文字提示
*       failed?: string //请求失败的文字提示  
*}
*/
http: (api: string | {api: string,gateway?: string,full?: boolean,method?: string},data:any,options: {
    isNotHb?: boolean, 
    disabledAutoNotifyError?: boolean, 
    wrap?: string =  'request', 
    gateway?: string, 
    pathFull?: boolean, 
    loading?: string,
    success?: string,
    failed?: string
}) => Promise

示例：

//方法1： 直接引入使用
import { http } from '@huanbo99/core/src/http';
http(api,{key:string}).then(res=> {})

//方法2： 注册http后，组件内使用
this.$http(api,{key:string}).then(res=> {})

3.5.3 get

源码：

/**
*@feature: get请求
*@param api： 接口名称
*@param params: 请求参数 
*@params options: 与3.5.1 request方法options一致
*/
getMethod: (api:string,params,options) => Promise

示例：

//方法1： 直接引入使用
import { getMethod } from '@huanbo99/core/src/http';
getMethod('/api/user/info',{id: '1'}).then(res=> {})


//方法2： 注册http后，组件内使用
this.$axios.get('/api/user/info',{id: '1'}).then(res=> {})

3.5.4 post

源码：

/**
*@feature: post请求
*@param api： 接口名称
*@param params: 请求参数 
*@params options: 与3.5.1 request方法options一致
*/
postMethod: (api:string,params,options) => Promise

示例：

//方法1： 直接引入使用
import { postMethod } from '@huanbo99/core/src/http';
postMethod('/api/user/insert',{name: '小明'}).then(res=> {})


//方法2： 注册http后，组件内使用
this.$axios.post('/api/user/insert',{name: '小明'}).then(res=> {})

//wrap作用演示：
this.$axios.post('/api/user/insert',{name: '小明'},{wrap: 'request'}).then(res=> {})
//实际提交到后端的请求参数为： {request: { name: '小明' }}

3.5.5 delete

源码：

/**
*@feature: delete请求
*@param api： 接口名称
*@param params: 请求参数 
*@params options: 与3.5.1 request方法options一致
*/
deleteMethod: (api:string,params,options) => Promise

示例：

//方法1： 直接引入使用
import { deleteMethod } from '@huanbo99/core/src/http';
deleteMethod('/api/user/deleteById',{id: '1'}).then(res=> {})


//方法2： 注册http后，组件内使用
this.$axios.delete('/api/user/deleteById',{id: '1'}).then(res=> {})

3.5.6 put

源码：

/**
*@feature: put请求
*@param api： 接口名称
*@param params: 请求参数 
*@params options: 与3.5.1 request方法options一致
*/
deleteMethod: (api:string,params,options) => Promise

示例：

//方法1： 直接引入使用
import { putMethod } from '@huanbo99/core/src/http';
putMethod('/api/user/action',{id: '1'}).then(res=> {})


//方法2： 注册http后，组件内使用
this.$axios.put('/api/user/action',{id: '1'}).then(res=> {})

3.5.7 head

源码：

/**
*@feature: head请求
*@param api： 接口名称
*@param params: 请求参数 
*@params options: 与3.5.1 request方法options一致
*/
headMethod: (api:string,params,options) => Promise

示例：

//方法1： 直接引入使用
import { headMethod } from '@huanbo99/core/src/http';
headMethod('/api/user/action',{id: '1'}).then(res=> {})


//方法2： 注册http后，组件内使用
this.$axios.head('/api/user/action',{id: '1'}).then(res=> {})

3.5.8 patch

源码：

/**
*@feature: patch请求
*@param api： 接口名称
*@param params: 请求参数 
*@params options: 与3.5.1 request方法options一致
*/
patchMethod: (api:string,params,options) => Promise

示例：

//方法1： 直接引入使用
import { patchMethod } from '@huanbo99/core/src/http';
patchMethod('/api/user/action',{id: '1'}).then(res=> {})


//方法2： 注册http后，组件内使用
this.$axios.patch('/api/user/action',{id: '1'}).then(res=> {})

3.6 register

描述：通过register注册消息提示插件，notify为服务消息提示，toast为行为操作提示。对应的方法需要满足3.1的接口

源码：

register: ({notify,toast}) => { 
	HttpMessage.notify = notify; 
	HttpMessage.toast = toast; 
}

示例：

//组件库为ant-design-vue
import notification from 'ant-design-vue/es/notification'
import message from 'ant-design-vue/es/message'

 const notify = (message,description) => {
    notification.open({
        type: 'error',
        message,
        description
    })
  
}

const toast = {
    loading: (content)=>{
        message.open({
            type: 'loading',
            content
        })
    },
    success: (content) => {
        message.open({
            type: 'success',
            content
        })
    },
    failed: (content) => {
        message.open({
            type: 'error',
            content
        })
    },
    clear: () => {
        message.destroy()
    }
}

//基于ant-design-vue的使用
import {  Http } from "@huanbo99/core";
Http.register({
  toast,
  notify
})

4.i18n

描述：多语言，国际化

源码：

/**
*@feature: 语言包设置
*@param lang： 语言名称
*@param langPackage: 语言包
*/
setLang(lang: string,langPackage: {[key:string]: any})

示例：

import { i18n, setLang } from '@huanbo99/core/src/i18n';

//引入语言包，langPackage可以按模块开发，进行引入使用
setLang('zhcn',{ 
	hb: '环博',  //在最外层的为通用翻译
    key: 'string',
    param: '你好{name}', //
    pageName: { yes: '确认',no: '取消' }  //在pageName页面里的翻译 
})

//设置完以后，可以通过  2.1 translate调用  或者 5.x i18nMixin调用

5.mixins

描述：通过引入一些公用方法和属性，实现代码复用，引入mixins后通过组件通过this进行访问

5.1 appMixin

描述： DAP项目的项目配置相关mixin,其他项目不会使用到

使用：

impoet { appMixin } from '@huanbo99/core/src/mixins';

//example.vue
export default {
	mixins:  [ appMixin ],
	mounted(){
		this.customConfig //自定义配置
		this.tabBreadInHeader //标签栏和面包屑是否在layout的头部
        this.animate //路由动画的模式
		this.primaryColor //主题颜色
		this.navTheme //菜单的主题
		this.layoutMode //菜单模式
		this.collapse	//菜单是否折叠
		this.colorWeak  //是否是色弱模式
		this.multiTab	//是否显示标签栏模式
		this.fixSiderbar //是不是固定左侧菜单
		this.fixedHeader //是不是固定头部
		this.contentWidth //内容区模式，banner和流式的切换
		this.lang //当前系统语言
		this.maxProjectCount //最多显示几个产品
		this.projectIndex  //当前正在展示的产品
		this.langs  //系统所有的语言
		this.siteConfig //站点设置
		this.topMenuList //顶部菜单
		this.sideMenuList //左侧菜单
		this.menuList //所有菜单
		this.selectedProduct //当前选中的产品
		this.logo //系统logo
		this.CompanyCodeUrl //从url上获取的companyCode
		
		this.setAppSetting() //设置项目配置
		this.setTheme() //设置主题
		this.setConfigWithUser() //设置当前用户的项目配置
		this.isTopMenu()  //是否是顶部菜单模式
		this.isSideMenu() //是不是侧边栏菜单模式
		this.setWeak()  //设置色弱模式
	}
}

5.2 appSettingMixin

描述： DAP项目自动加载远程设置的站点信息，一般在App.vue中使用。项目启动的时候获取数据，根据目前设置的项目配置和远程数据，进行项目配置

示例：

import { appSettingMixin } from '@huanbo99/core/src/mixins'

//App.vue
export default {
	mixins: [ appSettingMixin ]
}

5.3 appConfigMixin

描述：前端项目配置数据，通过统一的方式进行读取。

示例：

import { appConfigMixin } from '@huanbo99/core/src/mixins'

//App.vue
export default {
	mixins: [ appConfigMixin ],
	mounted(){
		this.appConfig //项目配置Object对象  
		
		//下列属性appConfig里的键值
		this.appCode  
		this.gateway
		this.favicon
		this.favTitle
		this.logoTitle
		this.logo
		this.logoTitleSize
		
		this.getAppConifg(key) => return this.appConfig[key]
	}
}

5.4 deviceMixin

描述：设备的device, 和css的媒体查询类似 ,方便js里控制布局 :

源码：

screen and (max-width: 576px):  device = 'mobile'

screen and (min-width: 576px) and (max-width: 1199px):  device = 'tablet'

screen and (min-width: 1200px): device = 'desktop'

示例：

//example.vue
import { deviceMixin } from '@huanbo99/core/src/mixins'

export default {
	mixins: [ deviceMixin ]
	mounted(){
		this.device //设备名称 desktop | tablet | mobile
		this.isMobile
		this.isDesktop
		this.isTablet
	}
}

5.5 dicMixin

描述：获取字典的数据，一般用于下拉选项的时候需要

使用：

//example.vue
import { dicMixin } from '@huanbo99/core/src/mixins'

export default {
	mixins: [ dicMixin ]
	mounted(){
		this.dictionary //字典对象
		this.dictionary['Status'] // [{[key:string]: string}]
	}
}

5.6 gatewayMixin

描述：获取官网配置项，调用网关的GetJs后，会自动在window.SYS_CONFIG数据，由于操作这些东西很麻烦，加上后端可能会变，有框架统一出入口

使用：

import { gatewayMixin } from '@huanbo99/core/src/mixins'

export default {
	mixins: [ gatewayMixin ]
	mounted(){
		this.gatewayConfig //所有的网关信息
		this.singleSignUrl //单点登录网址
		this.innerSingleSignUrl //内网单点登录网址
		this.fileUrl //外网文件服务的地址，${this.fileUrl}/${FileId}可以直接显示图片
		
		this.getGatewayConfig(key?:string) => this.gatewayConfig?[key]
		this.getGatewayConfigValue(key?:string) => this.gatewayConfig?[key].Value
		this.getGatewayConfigName(key?:string) => this.gatewayConfig?[key].Name
		this.getGatewayConfigCode(key?:string) => this.gatewayConfig?[key].Code
		
	}
}

5.7 tokenMixin

描述：在组件created的时候，根据token获取到用户信息,一般是C端项目在项目启动时引入。混入以后请求成功后可以在uerMixin里获取到用户信息

使用:

import { tokenMixin } from '@huanbo99/core/src/mixins'

//App.vue
export default {
	mixins: [ tokenMixin ]
}

5.8 userMixin

描述：

使用：

import { userMixin } from '@huanbo99/core/src/mixins'

export default {
	mixins: [ userMixin ],
	mounted(){
		this.userModel  //用户信息
		this.UserCode //永久参数 > this.userModel.UserCode
		this.studentId  //学生id
		/*学生id逻辑
		*1.thi.userModel.UserType里如果包含了7
		*拿到7的在数组里的索引index
		*再去this.userModel.UserTypeId数组里找到对应索引的元素就是studentId
		*2.如果都没有，其他系统跳转到本系统的时候 携带参数__studentId跳转过来的情况，
		*这时候的studentId为传入的__studentId
		*/
		this.birthDay  //当前用户的生日，根据this.userModel.IdCard计算得到
	}
}

5.9 i18nMixin与i18nFnMixin

描述：组件的js里使用翻译的方法，调用了2.1 translate方法

使用：

import { i18nMixin } from '@huanbo99/core/src/mixins'
import { setLang } from '@huanbo99/core/src/i18n';

//设置语言和语言包
setLang('zhcn',{ 
	hb: '环博',
    key: 'string',
    param: '你好{name}',
    page: { 
    	yes: '确认',
    	no: '取消'，
    	subPage: { i18n: '国际化', 'yes': '是' }
    }  
})

export default {
	mixins: [ i18nMixin ]
	mounted(){
		//用法和2.1 translate一样
		this.tr('hb') //环博 
		this.tr('param',null,{name: 'js调用'}) //你好js调用
		this.tr('i18n','page.subPage') //国际化
		this.tr('yes',['page','subPage']) //是
	}
}

//情况二： 当这个组件是页面中的时候，嵌套很深可以用i18nFnMixin避免
import { i18nMixin } from '@huanbo99/core/src/mixins'
export default {
	mixins: [ i18nFnMixin('page.subPage') ]
	mounted(){
		//用法和2.1 translate一样
		this.trFn('i18n') //国际化
		this.trFn('yes') //是
	}
}

6. router

描述：路由守卫封装，权限验证等

import router,{ addRoutes } from '@huanbo99/core/src/router'


//添加路由配置
addRoutes(route: any[]) //通过该方法添加routes

//main.js
new Vue({
	router,
	h: (h) => h(App)
}).$mount('#app')

//路由守卫拦截
{
	path: '/',
	component: *,
	meta: {
		white: true //白名单页面,
		auth: 'page-code-home' //权限code。 目前没有做
	}
}
//路由守卫功能： 
//如果地址上有__token或__v_sso表示是单点登录跳转过来的信息，需要去掉这些query信息以后再去到目标页面
//如果有__token参数，存入__token为新的token,并且根据token获取到用户信息,用户信息为userModel（5.8） 
//如果有__studentId，5.8 userMixin获取到的studentId为该__studentId
//如果参数上有永久参数标识的，永久参数会一直存在每个页面上，跳转的时候会始终带上

7. store

描述：项目的状态管理封装

/**
*@feature:  添加模块的状态管理,和store的registerModule方法参数一致
*@param path: 模块的访问路径
*@param module: 模块化的状态管理配置
*@param moduleOptions: 模块化配置项
*/
register: (path:string,module:any,moduleOptions: Object) => void

使用：

import store,{ register } from '@huanbo99/core/src/router'

//homeModule.js
export default {
  state: {
    tabIndex: 'basic',
    roleCode: ''
  },
  mutations: {
    SET_ROLE_TAB(state, data) {
      state.tabIndex = data
    },
    SET_ROLE_CODE(state, data) {
        state.roleCode = data
      }
  }
}


//注册模块
import homeModule from './homeModule.js'
register('home',homeModule) 

console.log(this.$store.state.home.tabIndex)
// 结果为 basic

//main.js
new Vue({
	store,
	h: (h) => h(App)
}).$mount('#app')

8. theme

描述： ant-design-vue组件的换肤插件和方法，插件用于webpack配置，方法用于业务逻辑中调用

源码：

/**
*feature: 换肤支持,webpack插件
*@param color: string
*@param path: string
*/
createThemeColorReplacerPlugin(color: string, path: string) => void

/**
*@feature: 手动换肤
*@param color: 换肤的主题颜色 #ffffff 16进制
*/
changeColor(color: string) => void

使用：

//vue.config.js
const CreateThemeColorReplacerPlugin = require('@huanbo99/core/src/theme/plugin')
module.exports = {
	configureWebpack: {
		plugins: [
		    //主题颜色为 #1890ff，变量文件为：src/assets/style/variable.less
			CreateThemeColorReplacerPlugin('#1890ff','src/assets/style/variable.less')
		]
	}
}



//example.vue
import { changeColor } from "@huanbo99/core/src/theme/color";
export default {
	mounted(){
		changeColor('#ff0000')
	}
}

9. utils

描述：工具包

9.1 city.util

描述：省市区相关工具

源码：

/**
*@feature: 回显省市区
*@param city: 省市区code
*@param join: 连接字符串
*/
getPCDName(city: string,join: string) => string



//默认导出省市区的options
module.export = [{ 
	label: '四川省',
	value: '510000',
	children:[{
    	label: '成都市',
        value: '510100',
        children:[{
            label: '锦江区',
            value: '510104'
		}]
	}]
}]

使用：

import { getPCDName } from '@huanbo99/core/src/utils/city.util'

console.log(  getPCDName('500000,5000100,5000104') )
//打印结果： 四川省/成都市/锦江区

console.log(  getPCDName('500000,5000100,5000104','-') )
//打印结果： 四川省-成都市-锦江区

9.2 common.util.js

描述：通用工具包

9.2.1 loadscript

源码：

/**
 * @feature: 手动加载script的js
 * @param  url 加载js的地址
 * @param callback 回调函数
 * @returns Promise
 */
loadScript: (url：string, callback: () => void ) => Promise

示例：

import { loadScript } from '@huanbo99/core/src/utils/common.util'

loadScript('http://xx/Getjs',()=> {  }).then(res=> {})

9.2.2 obj2ParamUrl

源码：

/**
 * @feature: 将对象转为参数拼接到URL上
 * @param url 要拼接的URL
 * @param obj 要转换的对象
 * @param encode 是否需要进行编码
 * @returns 返回拼接后的URL
 */
obj2ParamUrl: (url: string, obj: Object, encode?: boolean) => string

示例：

import { obj2ParamUrl } from '@huanbo99/core/src/utils/common.util'

obj2ParamUrl('http://192.168.1.1:8080/page',{name: 'Jay'，Id: 2})
//输出结果： http://192.168.1.1:8080/page?name=Jay&id=2

obj2ParamUrl('http://192.168.1.1:8080/page',{name: 'Jay'，id: 2}, true)
//输出结果：http%3A%2F%2F192.168.1.1%3A8080%2Fpage%3Fname%3DJay%26id%3D2

9.2.3 paramUrl2Obj

源码：

/**
 * @feature: 将URL上的参数转为对象，如果没有参数返回{};
 * @param url url地址
 * @param decode 是否需要进行解码
 * @returns Object
 */
paramUrl2Obj: (url：string, decode?: boolean) => Object

示例：

import { paramUrl2Obj } from '@huanbo99/core/src/utils/common.util'

paramUrl2Obj('http://192.168.1.1:8080/page?name=Jay&id=2')
//输出结果： {name: 'Jay'，Id: 2}

paramUrl2Obj('http%3A%2F%2F192.168.1.1%3A8080%2Fpage%3Fname%3DJay%26id%3D2',true)
//输出结果： {name: 'Jay'，Id: 2}

9.2.4 pubSub

源码：

/**
 * 订阅者-观察者  设计模式
 */
export const pubSub = {
    typeMap: {}, //{type:[] }
    /**
     * 订阅者
     * @param type 订阅事件
     * @param data 发射数据
     */
    next(type: string, data: any) => void,
    /**
     * 观察者
     * @param type 观察事件
     * @param fn 回调函数
     */
    subscribe(type: string, fn: () => any ) => void
}

示例：

import { pubSub } from '@huanbo99/core/src/utils/common.util'

//页面A： A.vue
export default {
	mounted(){
		pubSub.subscribe('typeA',data => { //观察事件typeA
			console.log(data)  // 当B页面加载后，A页面会接收到 123 的信息
		})
	}
}

//页面B： B.vue
export default {
	mounted(){
		pubSub.next('typeA', 123) 
	}
}

9.2.5 debounce

源码：

/**
 * @feature: 防抖工具函数
 * @param func 需要防抖的函数
 * @param wait 延迟执行的事件
 * @param immediate 第一次是否立即执行
 */
 debounce：(func：() => any, wait: number, immediate: boolean) => () => void

示例：

import { debounce } from '@huanbo99/core/src/common.util'

//example.vue
export default {
	data(){
        return {
            name: '',
            error: ''
        }
	},
	render(){
		reutrn (
			<div>
				<a-input v-model="name" @change="onValidIsExist"  />
 				<span v-if="error">{{error}}</span>
			</div>
		)
	},
	method(){
		validToServer(){
			http.get('/api/user/exsit',{name: this.name}).then(res=>{
				if(res) { //存在
					this.error = '用户名已存在'
				}
			})
		}，
		onValidIsExist(){
			//如果一直输入，会在输入停顿后1秒才发起后台服务的验证，从而做到节流效果
			return debounce(validToServer,1000)  
		}
	}
}

9.2.6 getBirthDayFromIdCard

源码：

/**
 * @feature: 根据身份证号获取出生年月日
 * @param idCard 身份证号
 * @param format 生日格式化字符串，默认YYYY-MM-DD
 * @returns 返回出生年月日
 */
getBirthDayFromIdCard: (idCard: string, format?:string = 'YYYY-MM-DD')

示例：

import { getBirthDayFromIdCard } from '@huanbo99/core/src/common.util'

getBirthDayFromIdCard('511001199903115568') //1999-03-11

getBirthDayFromIdCard('511001199903115568','YYYY年MM月') //1999年03月

9.2.7 getSexFromIdCard

源码：

/**
 * @feature: 根据身份证获取性别 1 = 男  ； 2=女； 
 * @param {*} idCard 
 */
getSexFromIdCard ： (idCard：string) => 1 | 2

示例：

import { getSexFromIdCard } from '@huanbo99/core/src/common.util'

getSexFromIdCard('511001199903115568') //2

9.2.8 isInnerHost

源码：

/**
 * 是否是内网
 * @param {*} ip host地址
 */
isInnerHost: (ip: string) => boolean

示例：

import { isInnerHost } from '@huanbo99/core/src/common.util'

isInnerHost('http://localhost:9200')  //true

isInnerHost('http://192.168.16.163:9200')  //true

9.2.8 isDev

源码：

/**
 * 判断是不是开发环境
 * @returns true = 开发环境
 */
isDev: () => boolean

示例:

import { isDev } from '@huanbo99/core/src/common.util'

isDev() //开发环境： true

isDev() //生产环境： false

9.2.9

源码:

/**
 * 判断两个对象是否相等
 * @param {*} obj1 
 * @param {*} obj2 
 * @returns 
 */
 objectIsEqual: (obj1: Object,obj2: Object) => boolean

示例：

import { objectIsEqual } from '@huanbo99/core/src/common.util'



objectIsEqual({a: 1},{a: 1}) // true

objectIsEqual({a: 1,b: 2},{b: 2,a: 1}) // true

objectIsEqual({a: 1,b: 2},{b: 3,a: 1}) // false

9.3 hb.util

描述：环博业务相关包

9.3.1 signature

源码：

/**
 * @feature: 对请求生成签名，防篡改
 * @param appcode appcode
 * @param timestap 时间戳
 * @param data body 请求body
 * @param params params 请求参数
 */
signature : (appcode, timestap, data, params) => string

示例：

import { signature } from '@huabo99/core/src/utils/hb.util'

//一般来说，都业务中都不会用到该方法，http请求封装的时候才需要调用该方法

signature()  // md5加密串

9.3.2 toSso

源码：

/**
* @feature: 调用单点登录js,登录页面
*/
toSso: () => void

示例：

import { toSso } from '@huabo99/core/src/utils/hb.util'

toSso() //如果没有登录会自动到登录页面，如果登录了 userMixin上会有用户信息

9.3.3 toSsoSigup

源码：

/**
* @feature: 调用单点登录注册界面
*/
toSsoSigup: () => void

9.3.4 getRemovedSsoMarkUrl

源码：

/**
* @feature: 获取到移除单点登录信息标记的url,__v_sso和__token会被移除
* @param fullPath 是不是完整的路径
*/
getRemovedSsoMarkUrl: (fullPath?: boolean = true) => string

示例：

import { getRemovedSsoMarkUrl } from '@huabo99/core/src/utils/hb.util'

getRemovedSsoMarkUrl('http://192.168.16.123:8080/index?__token=token&__v_sso=sso&a=1')

//结果： http://192.168.16.123:8080/index?a=1

9.3.5 getParamsByUrl

源码：

/**
* @feature: 根据URL获取参数
* @param url 地址，不传默认是window.location.href
* @param 是否移除单点登录的标记
*/
getParamsByUrl: ( url?: string,  removeSsoMark: boolean = false) => Object

示例：

import { getParamsByUrl } from '@huabo99/core/src/utils/hb.util'

getParamsByUrl('http://192.168.16.163:8080/page?__token=token&__v_sso=sso&a=1')
//输出: {__token: 'token',__v_sso: 'sso',a: '1'}

getParamsByUrl('http://192.168.16.163:8080/page?__token=token&__v_sso=sso&a=1',true)
//输出: {a: '1'}

9.3.6 getTokenByUrl

源码：

/**
* @feature: 在url上获取token
*/
getTokenByUrl: () => string

9.3.7 useGetUser

源码：

/**
* @feature: 获取用户信息， 调用后会根据token获取到用户信息,通过5.8得到用户信息
*/
useGetUser： （）=> void

9.3.8 useLogout

源码：

/**
* @feature: 退出登录的方法
* @param beforeLogout 退出前的回调函数
* @param afterLogout 退出后的回调函数
*/
userLogout: (beforeLogout: () => any, afterLogout: () => any) => void

9.3.9 getSso

源码：

/**
* @feature: 获取单点登录地址
*/
getSso: () => Promise<string>

9.3.10 prefixPermanentUrlFlag

描述：永久参数标识，是一个常量，如果url参数上是以这个开头，那么他就是一个永久参数

9.3.11 useUrlParam

源码：

/**
* @feature: 获取地址参数
* @param key 参数的key
* @param url 目标地址
* @returns 
      *  传入key时是，key对应的地址参数（永久参数>普通参数）,不传key时是永久参数
      *   value: any

      *   所有参数对应的值 （永久参数>普通参数）
      *   valueSource: any
      *   永久参数对应的值
      *  valuePermanent: any

      *  普通参数对应的值
      *   valueCommon: any

      *  所有参数
      *  source: any

      *  永久参数
      *  permanent: any

      *   永久参数-未处理
      *  permanentSoruce: any

      *   普通参数
      *   common: any
*/
useUrlParam: (key?:string,url?: string) => object

示例：

import { useUrlParam } from '@huabo99/core/src/utils/hb.util'


//如果 prefixPermanentUrlFlag  = __HBP__
// window.location.href = 'http://192.168.16.123:8080/page?a=1&__HBP__b=2&c=3&b=4'


useUrlParam() 
//输出： {
	value: {b: 2},
	valueSource: '',
	valueCommon: '',
	valuePermanent: '',
	source: {a: 1,__HBP__b: 2,c: 3,b: 4  },
	common: {a: 1,c: 3,b: 4},
	permanent: {b: 2},
	permanentSoruce: {__HBP__b: 2}
}


useUrlParam('b') 
//输出： {
	value: 2,
	valueSource: 2,
	valueCommon: '4',
	valuePermanent: '2',
	source: {a: 1,__HBP__b: 2,c: 3,b: 4  },
	common: {a: 1,c: 3,b: 4},
	permanent: {b: 2},
	permanentSoruce: {__HBP__b: 2}
}

9.4 reg-exp.util

export const RegExpUtil = {
    name: {
        pattern: /^[\u4E00-\u9FA5]{2,4}$/,
        message: '请输入2-4字中文名称'
    },
    idcard: {
        pattern: /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/,
        message: '请输入正确身份证号'
    },
    phone: {
        pattern: /^1[3456789]\d{9}$/,
        message: '请输入正确手机号'
    },
    tel: {
        pattern: /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/,
        message: '请输入正确固定电话'
    },
    phoneOrTel: {
        pattern: /^((0\d{2,3})-)(\d{7,8})|1[3456789]\d{9}$/,
        message: '请输入正确电话格式'
    },
    postcode: {
        pattern: /^[0-9]{6}$/,
        message: '请输入正确邮编'
    },
    schoolCode: { //毕业学校代码
        pattern: /^[a-zA-Z0-9]{8}$/,
        message: '毕业学校代码长度为8'
    }
}

10. 维护

仓库地址： http://183.221.116.103:8888/webpublic/core

流程：修改功能 -> CHANGELOG.md -> README.md -> 版本发布

npm version patch   //修改bug  1.0.0 -> 1.0.1
 
npm version  minor  //功能增加、变更 1.0.0 -> 1.1.0

npm version major   //架构更改，不兼容之前版本  1.0.0 -> 2.0.0

2.修改所有的API 文档，变更或者新增的地方填入对应的版本

3.修改CHANGELOG.md 变更记录

4.打包命令：

//编译开发的包到项目下，需要修改gulpfile.js文件中的devPath，开发项目路径。
npm run dev


//编译正式包
npm run deploy 


//手动发布
cd deployment 
npm publish

@types/node axios clone-deep enquire.js md5 moment

@infinitebrahmanuniverse/nolb-_hua @everything-registry/sub-chunk-404 @zalastax/nolb-_hua

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago