@huanbo99/core

v1.0.3

Published

3 years ago

环博软件前端开发VUE核心基础包

Downloads

0High
0Medium
0Low

huanbo

@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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@huanbo99/core

1.core

1.1 appStart:

1.2 storage

2.filter

2.1 translate

2.2 numFormat

2.3 dateFormat

2.4 uppercase

2.5 lowercase

2.6 substr

2.7 dictFormat

2.8 optionFormat

2.9 pcdFormat

3. http

3.1 HttpMessage

3.2 install

3.3 ~~getUrlByApi~~

3.4 getHttpUrl

3.5 http

3.5.1 request

3.5.2 ~~http~~

3.5.3 get

3.5.4 post

3.5.5 delete

3.5.6 put

3.5.7 head

3.5.8 patch

3.6 register

4.i18n

5.mixins

5.1 appMixin

5.2 appSettingMixin

5.3 appConfigMixin

5.4 deviceMixin

5.5 dicMixin

5.6 gatewayMixin

5.7 tokenMixin

5.8 userMixin

5.9 i18nMixin与i18nFnMixin

6. router

7. store

8. theme

9. utils

9.1 city.util

9.2 common.util.js

9.2.1 loadscript

9.2.2 obj2ParamUrl

9.2.3 paramUrl2Obj

9.2.4 pubSub

9.2.5 debounce

9.2.6 getBirthDayFromIdCard

9.2.7 getSexFromIdCard

9.2.8 isDev

9.3 hb.util

9.3.1 signature

9.3.2 toSso

9.3.3 toSsoSigup

9.3.4 getRemovedSsoMarkUrl

9.3.5 getParamsByUrl

9.3.6 getTokenByUrl

9.3.7 useGetUser

9.3.8 useLogout

9.3.9 getSso

9.3.10 prefixPermanentUrlFlag

9.3.11 useUrlParam

9.4 reg-exp.util

10. 维护

3.3 getUrlByApi

3.5.2 http