_constant

常量模块

1.基本说明

常量的直接调用方式,所有的常量直接存储在Ux.Env对象中,可执行下边的代码调用。

import Ux from 'ux';

const value = Ux.Env.xxx
// 如 `Z_ENTRY_LOGIN` 环境变量,直接调用时写法为:`Ux.Env.ENTRY_LOGIN` 方式。

系统的环境变量定义在下边两个文件中:

  • .env.development:开发环境专用环境变量,process.env.NODE_ENV 值为 development
  • .env.production:生产环境专用环境变量,process.env.NODE_ENV 值为 production

2.环境变量

2.1.默认变量

变量名 调用 说明
PORT (无) 当前前端运行的端口号,默认3000。|
HOST (无) 当前前端运行的HOST地址,默认无值。
REACT_APP_LESS_MODULES (无) 在REACT中使用模块化的less。

2.2.框架变量

环境变量名在调用时需去掉Z_前缀,参考上边的代码Demo,且只有Z_前缀环境变量可如此调用,环境变量说明可参考下边表格:

变量名 调用 说明
Z_TITLE Ux.Env.TITLE 当前运行环境的标题,最终会应用于HTML<header>部分,目前可能存在BUG。
Z_APP Ux.Env.APP 当前应用的名称,该名称在extension中存储于 X_APP 表,实现多应用平台,也可连接配置中心,为当前前端应用的唯一标识符。
Z_ENDPOINT Ux.Env.ENDPOINT 当前端环境要访问后端远程时,使用该环境变量配置后端的endpoint地址,实现前后端分离访问。
Z_LANGUAGE Ux.Env.LANGUAGE 多语言环境,默认环境值为cn,该值会让前端访问src/cab/cn目录下的资源文件(多语言前端),并且设置X_LANG为中文环境。
Z_ROUTE Ux.Env.ROUTE 当前前端运行的动态路由根路径,不同应用该值设置为不同,也可和配置中心连接,react-router自动化脚本以此为根路径。
Z_K_SESSION (无) 当前应用在SessionStorage时对应的前缀值,默认使用@@ZUI/为该前缀,同一个浏览器中可拥有不同的应用,并且不会产生数据冲突。
Ux.Env.KEY_APP 保存当前应用专用键值,不同键值表示不同应用,存储在SessionStorage中。
Ux.Env.KEY_USER 保存当前登录用户信息专用键值,不同用户使用不同键值,存储在SessionStorage中。
Z_K_EVENT Ux.Env.KEY_EVENT 当前应用使用的redux专用事件前缀,区分不同redux行为专用,默认值@@ZUI-ACT
Z_CORS_MODE Ux.Env.CORS_MODE (安全)解决跨域过程中的选项,对应fetch中的options值:cors,no-cors或其他。
Z_CORS_CREDENTIALS Ux.Env.CORS_CREDENTIALS (安全)对应options中的credentials选项,包括:include,omit或其他。
Z_SIGN Ux.Env.SIGN (安全)是否启用数据签名功能,针对古老REST专用,默认值false。
Z_SECRET_AES Ux.Env.SECRET_AES (安全)使用AES加密时该应用的专用secret值,不同应用可发放不同值。
Z_PLUGIN Ux.Env.PLUGIN 是否启用插件环境,启用插件环境才可用plugin包中的内容。
Z_SHARED Ux.Env.SHARED 全局Epic/Types共享目录名,默认为app,不同应用使用的目录不同,共享目录位于:src/app/action下。
Z_ENTRY_LOGIN Ux.Env.ENTRY_LOGIN (页面)当前应用的登陆首页,入口页面。
Z_ENTRY_ADMIN Ux.Env.ENTRY_ADMIN (页面)当前应用的管理首页,主页面。
Z_X_HEADER_SUPPORT (无) 启用不同应用变量:X-Sigma,X-AppId, X-AppKey, X-Lang实现多租户、多语言、多应用的平台环境。
Z_CSS_PREFIX Ux.Env.CSS_PREFIX (风格)当前站点的风格文件前缀,对应less中的前缀,全局变量@app,禁用值:ux,ox,ex,web等。
Z_CSS_COLOR Ux.Env.CSS_COLOR (风格)当前站点的主色调,一旦改动这个颜色,那么主体色调会被改变,对应antd中的@primary-color的值。
Z_CSS_FONT Ux.Env.CSS_FONT (风格)当前站点的默认字体大小,默认值14px。

2.3.开发变量

变量名 调用 说明
Z_DEV_DEBUG Ux.Env.DEBUG 是否开启调试模式,调试模式只有在开发环境中生效,development/production。
Z_DEV_MOCK Ux.Env.MOCK 是否打开全局MOCK功能,如果打开则可支持直接使用纯前端模式。
Z_DEV_FORM 监控表单渲染的专用变量,牵涉到表单布局的渲染流程。
Z_DEV_MONITOR Ux.Env.MONITOR (Deprecated)是否启用Zero UI中的原生监控工具,可直接使用一个浮游工具栏。
Z_DEV_AJAX Ux.Env.DEBUG_AJAX 是否将Ajax请求保存成json文件格式,如果调试模式打开,则Request会保存成json格式方便开发。

3.内部定义常量

除开上述环境变量以外,系统中还包含了部分系统定义常量,定义的常量参考剩余的常量文档部分(略)。

4.示例

参考下边的.env.development文件内容:

PORT=5000
Z_TITLE=配置管理平台
Z_LANGUAGE=cn
Z_ENDPOINT=http://ox.engine.cn:6083
Z_APP=vie.app.ox
Z_ROUTE=ox
Z_SHARED=app
Z_ENTRY_LOGIN=/login/index
Z_ENTRY_ADMIN=/main/index
Z_PLUGIN=true
Z_K_SESSION=@@OX/
Z_K_EVENT=@@OX-ACT
REACT_APP_LESS_MODULES=true

Z_DEV_DEBUG=true
Z_DEV_MOCK=true
Z_DEV_AJAX=false
Z_DEV_FORM=true
Z_DEV_MONITOR=false

Z_CSS_PREFIX=ox
Z_CSS_COLOR=#3d8ce7
Z_CSS_FONT=13px
Z_CORS_CREDENTIALS=include

Z_X_HEADER_SUPPORT=true

Members

(static, constant) (环境变量)

Ux.Env.xxx

import Ux from 'ux';
const value = Ux.Env.xxx;

该常量主要用于环境变量,会包含所有环境变量的基本信息,环境变量基本规则如下:

  1. 去掉前缀 Z_ 的环境变量名称
  2. 去掉前缀 DEV_ 的环境变量名称

详细信息参考常量表格,而且环境变量会直接追加到Ux.Env根节点中。

(static, constant) DEBUG :boolean

Default Value:
  • false

Ux.Env.DEBUG

该变量检测当前环境是否开启了调试环境,开启调试环境的条件:

  • process.env.NODE_ENV的值为 development。
  • process.env.DEV_DEBUG的值为 true,对应环境变量Z_DEV_DEBUG的值,启动时转换。
// 直接调用 Ux 执行判断

// 「内部」
import Cv from './constant';
if(Cv.DEBUG){
    // 内部,研发模式代码
}

// 「外部」
import Ux from 'ux';
if(Ux.Env.DEBUG){
    // 外部,开发模式代码
}
Type:
  • boolean

(static, constant) DEBUG_AJAX :boolean

Default Value:
  • false

「开发专用」Ux.Env.DEBUG_AJAX

是否开启Ajax的请求数据捕捉监控流程。

  • process.env.NODE_ENV的值为 development。
  • process.env.DEV_MOCK的值为 true,对应环境变量Z_DEV_MOCK的值,启动时转换。
  • process.env.DEV_AJAX的值为 true,对应环境变量Z_DEV_AJAX的值。

上述三个条件同时满足时才执行Ajax的监控条件,启用过后,系统会调用saveAs将请求数据存储成json文件。

Type:
  • boolean

(static, constant) DEBUG_FORM :boolean

Default Value:
  • false

「开发专用」Ux.Env.DEBUG_FORM

是否开启表单生命周期监控流程,监控表单渲染的专用生命周期。

  • process.env.NODE_ENV的值为 development。
  • process.env.DEV_FORM的值为 true,对应环境变量Z_DEV_FORM的值,启动时转换。

该变量用于控制开发环境中表单监控。

Type:
  • boolean

(static, constant) ECONOMY :Object

「业务」Ux.Env.ECONOMY

常用 Web 组件的 className属性,该属性应用会牵涉到业务应用。

Type:
  • Object

(static, constant) ENTRY_ADMIN :string

Default Value:
  • /{Z_ROUTE}/main/index

Ux.Env.ENTRY_ADMIN

当前前端应用的主界面路径,主界面路径分为两部分

  • 使用Z_ROUTE环境变量实现多应用管理,相同应用出现不同的用户时,可设置不同的Z_ROUTE
  • 默认路径为/main/index,为登录过后管理主界面。
Type:
  • string

(static, constant) ENTRY_LOGIN :string

Default Value:
  • /{Z_ROUTE}/login/index

Ux.Env.ENTRY_LOGIN

当前站点的登录入口模板,通常也是应用的入口,进入入口过后通过登录可直接跳转到ENTRY_ADMIN配置的管理主界面。

  • 使用Z_ROUTE环境变量实现多应用管理,相同应用出现不同的用户时,可设置不同的Z_ROUTE
  • 默认路径为/login/index,为登录之前的入口界面。
Type:
  • string

(static, constant) FORBIDDEN :string

Default Value:
  • "********"

Ux.Env.FORBIDDEN

在ACL的权限控制中,表单数据分为三态:

  • 可编辑
  • 只读
  • 有数据不可查看:如果有数据不可查看,则会显示成 FORBIDDEN 设置的值。

这个变量只会在ACL权限控制中使用,其他地方不可使用,该变量会隐藏真实数据而导致数据本身不可查看。

通常意义上,显示成********的数据是不可编辑的,因为编辑会带来副作用,所以表单从原始的四态变成了三态。

表单的状态表格如下:

维度 有权限 无权限
可编辑 编辑数据 x(不支持)
只读 显示数据 ********
Type:
  • string

(static, constant) FORM_MODE :Object

Ux.Env.FORM_MODE

表单模式设置,目前包含三种常见表单

  • ADD:添加表单。
  • EDIT:编辑表单。
  • SEARCH:搜索表单。

表单模式中会影响核心变量$inited,该值为表单初始值,如果是添加模式,不论是否传入,该值都为空,而在编辑模式中,$inited几乎是一定有值的。 除开这个意外,还包含另外一个核心变量$record,它用于记录父表单,以及某个表格字段中的行值,这个会在特殊组件中专程说明。

Type:
  • Object

(static, constant) HTTP11 :Object

Ux.Env.HTTP11

HTTP11 中的请求头所有标准协议常量,该常量的命名规则如下:

  • 将原始请求头全部大写。
  • 所有的-转换成_生成对应的键值的。

使用的参考代码如下:


// 下载专用头设置,客户端只接受 octet-stream 格式
headers.append(Cv.HTTP11.ACCEPT, "application/octet-stream");
headers.append(Cv.HTTP11.CONTENT_TYPE, "application/octet-stream");

目前版本支持的值列表(所有定义):

     {
        "ACCEPT": "Accept",
        "ACCEPT_CHARSET": "Accept-Charset",
        "ACCEPT_ENCODING": "Accept-Encoding",
        "ACCEPT_LANGUAGE": "Accept-Language",
        "ACCEPT_RANGES": "Accept-Ranges",
        "AGE": "Age",
        "ALLOW": "Allow",
        "AUTHORIZATION": "Authorization",
        "CACHE_CONTROL": "Cache-Control",
        "CONNECTION": "Connection",
        "CONTENT_BASE": "Content-Base",
        "CONTENT_ENCODING": "Content-Encoding",
        "CONTENT_LENGTH": "Content-Length",
        "CONTENT_LOCATION": "Content-Location",
        "CONTENT_MD5": "Content-MD5",
        "CONTENT_RANGE": "Content-Range",
        "CONTENT_TYPE": "Content-Type",
        "DATE": "Date",
        "ETAG": "ETag",
        "EXPIRES": "Expires",
        "FORM": "Form",
        "HOST": "Host",
        "IF_MODIFIED_SINCE": "If-Modified-Since",
        "IF_MATCH": "If-Match",
        "IF_NONE_MATCH": "If-None-Match",
        "IF_RANGE": "If-Range",
        "IF_UNMODIFIED_SINCE": "If-Unmodified-Since",
        "LAST_MODIFIED": "Last-Modified",
        "LOCATION": "Location",
        "MAX_FORWARDS": "Max-Forwards",
        "PRAGMA": "Pragma",
        "PROXY_AUTHENTICATE": "Proxy-Authenticate",
        "PROXY_AUTHORIZATION": "Proxy-Authorization",
        "PUBLIC": "Public",
        "RANGE": "Range",
        "REFENER": "Refener",
        "RETRY_AFTER": "Retry-After",
        "SERVER": "Server",
        "TRANSFER_ENCODING": "Transfer-Encoding",
        "UPGRADE": "Upgrade",
        "USER_AGENT": "User-Agent",
        "VARY": "Vary",
        "WARNING": "Warning",
        "WWW_AUTHENTICATE": "WWW-Authenticate",
        "XSRF_TOKEN": "X-XSRF-TOKEN"
    }
Type:
  • Object

(static, constant) HTTP_METHOD :Object

Ux.Env.HTTP_METHOD

HTTP方法常量,目前支持:GET, POST, PUT, DELETE四种,全小写类型

Type:
  • Object

(static, constant) KEY_EVENT :string

Ux.Env.KEY_EVENT

SessionStorage 专用的存储键值,存储 Redux 的事件专用信息,所有执行了 redux 的事件前缀都以环境变量中配置的 Z_K_EVENT为前缀,不同的应用这个值应该不一致,主要用来实现多应用分流。当前前端中对 redux 的使用主要在整个 状态树的顶层,而兄弟节点的通讯走 redux 而不是走状态。

  • 本组件内部使用props和state传递数据,包括数据继承。
  • 跨组件之间传递数据则使用redux,目前最多应用于外层按钮和里层按钮的房重复提交同步操作。
Type:
  • string

(static, constant) KEY_POINTER :string

Deprecated:
  • Yes
Default Value:
  • {K_SESSION}SESSION/POINTER

Ux.Env.KEY_POINTER

SessionStorage 存储的方向引用指针常量,用于存储 $pointer 中的核心引用数据专用,目前的版本中已经弃用, 将来可直接移除掉该变量。

Type:
  • string

(static, constant) KEY_USER :string

Default Value:
  • {K_SESSION}SESSION/USER

Ux.Env.KEY_USER

SessionStorage 专用的存储键值,存储当前用户登录信息,当用户点击了登录按钮过后,返回的用户登录数据会存储 在该键值中,里面存储的是用户数据的对象,其中最核心的字段如:

{
    "key": "用户主键(标准)",
    "uniqueId": "用户全局唯一键(遗留系统专用)",
    "userId": "Spring桥接专用,大部分系统都使用了userId作主键"
}
Type:
  • string

(static, constant) MENU_TYPE :Object

Ux.Env.MENU_TYPE

常用 Web 菜单的类型设置,该类型对应X_MENU表中的type字段,菜单类型主要包含下边几种:

代码调用 说明
Ux.Env.MENU_TYPE.TOP TOP-MENU 顶部菜单
Ux.Env.MENU_TYPE.APP APP-MENU 主界面Dashboard专用菜单
Ux.Env.MENU_TYPE.SIDE SIDE-MENU 系统主菜单(左侧边菜单)
Ux.Env.MENU_TYPE.NAV NAV-MENU 导航栏专用菜单信息
Type:
  • Object

(static, constant) MIMES :Object

Ux.Env.MIMES

系统常用的MIME值,用于设置Accept/Content-Type等基础媒体类型值。目前系统中的值如下:

代码调用 说明
Ux.Env.MIMES.JSON application/json JSON媒体类型
Ux.Env.MIMES.MULTIPART multipart/form-data (略)
Ux.Env.MIMES.FORM application/x-www-form-urlencoded (略)
Ux.Env.MIMES.STREAM application/octet-stream 二进制文件类型,上传下载用
Type:
  • Object

(static, constant) MOCK :boolean

Default Value:
  • false

「开发专用」Ux.Env.MOCK

是否开启 mock 模拟数据环境,开始纯前端开发模式。

  • process.env.NODE_ENV的值为 development。
  • process.env.DEV_MOCK的值为 true,对应环境变量Z_DEV_MOCK的值,启动时转换。

1.Mock规则

mock环境存储在src/mock目录中,并且包含模拟环境的生成规则,构造 mockKey 的规则如下:

  1. 基本键值对应:HTTP方法 + 下划线 + URI路径( / 转换成 _ )
  2. URI路径除了基本规则以外,:id:key可直接被还原,如/api/user/:key的真实访问路径为/api/user/xxxxxxxxxx,则可被还原成_api_user_:key作为mockKey来使用。

2.Mock入口文件

mock入口文件如下:

export default {
     // -------------------------------------------------- 全局
     post_Login_user_login: 登录主接口,
     post_api_user_logout: 注销主接口,
     "post_Login_user_get-app-list": 读取主页菜单,
     "post_Login_user_get-menu-list": 读取所有菜单,
     get_api_tenant: 读取租户列表,

     // ......
}

3.Mock数据结构

mock文件内部的数据结构如下:

export default {
     mock: true,
     processor: (
         data = {},      // 「响应」对应 data 节点的数据,可以Object也可以Array
         params          // 「请求」对应当前请求数据
     ) => {
         // 返回 Promise
     },
     data: [
     ]
}
参数 类型 说明
mock boolean 是否单独开关当前mock环境,只有mock打开才生效,如果设置false,则请求不走Mock流程。
data Object/Array 模拟数据类型,可模拟成想要的数据类型做纯前端开发。
processor Function 函数类型,可以在data基础之上实现响应数据格式的初步转换。
Type:
  • boolean

(static, constant) MONITOR :boolean

Deprecated:
  • Yes
Default Value:
  • false

「开发专用」Ux.Env.MONITOR

是否开启前端界面监控环境工具,该变量牵涉变量执行工具,在最老的版本中辅助调试专用

  • 可用于监控props中的变量变化信息。
  • 可用于监控state中的变量变化信息。
Type:
  • boolean

(static, constant) RX_SOURCE :Object

Deprecated:
  • Yes

Ux.Env.RX_SOURCE

响应式编程的数据来源模式设置,遗留系统由于redux和react交叉,所以会出现来源混淆的情况。

  • REACTIVE:响应式Rxjs,直接使用Rx模式的数据来源。
  • REACT:只使用 React,通常是state和props相结合。
  • REDUX:配合 Redux 使用的数据来源。
Type:
  • Object

(static, constant) SELECTION :Object

Ux.Env.SELECTION

专用树筛选模式,用于执行树中节点的筛选模式,在树结构中经常使用,如X_CATEGORY构造菜单等。

模式值 说明
PARENT_ALL_INCLUDE 选择当前节点和所有父节点集合(包含祖辈)。
PARENT_ALL 除开当前节点,选择所有父节点集合(包含祖辈)。
PARENT 选择直接父节点(不包含祖辈)。
CURRENT 「默认」只选择当前节点。
CHILDREN 直接子节点(不包含孙辈)。
CHILDREN_ALL 选择所有子节点(包含孙辈以及以下)。
CHILDREN_ALL_INCLUDE 选择当前节点和所有子节点(包含孙辈)。
Type:
  • Object

(static, constant) SIGN :boolean

Default Value:
  • false

Ux.Env.SIGN

是否开启 RESTful 的数字签名功能,如果开启了数字签名功能,则会在RESTful接口中直接启用数字签名,追加sig参数 sig的计算规则如下:

  1. 先在系统中执行基础路径计算。
  2. 如果用户已经登录,则使用登录用户的账号 key 执行计算,未登录则使用时间戳。
  3. 然后解析所有的参数。
    1. 如果是 pager 参数,则使用":index" + pager.index + "size" + pager.size
    2. 如果是 criterias 参数,则执行排序后追加参数
  4. 最后执行 HMAC-512 基础算法加密,带上超时的 10 分钟。

目前大部分应用并没使用数字签名功能,但后期可以考虑直接引入数字签名加强安全性。

Type:
  • boolean

(static, constant) X_APP_ID :string

Ux.Env.X_APP_ID

import Ux from 'ux';
const value = Ux.Env.X_APP_ID;

LocalStorage 专用的存储键值(非敏感信息存储)

Type:
  • string

(static, constant) X_APP_KEY :string

Ux.Env.X_APP_KEY

import Ux from 'ux';
const value = Ux.Env.X_APP_KEY;

LocalStorage 专用的存储键值(敏感信息存储)

Type:
  • string

(static, constant) X_HEADER :Object

Ux.Env.X_HEADER

import Ux from 'ux';
const value = Ux.Env.X_HEADER;

X 系列的头部专用信息,用于处理 X 系列的核心头部信息,参考下表

变量值 Http请求头 说明
X_APP_KEY X-AppKey 多应用环境处理敏感信息的应用键专用。
X_APP_ID X-AppId 多应用环境处理普通信息的应用键值专用(带业务)。
X_SIGMA X-Sigma 平台应用标识符,也称为统一标识符,在多应用环境中用于标识应用(不带业务)。
X_LANG X-Lang 多语言平台的语言值(头文件识别)。

通常情况下,X_SIGMA会和租户绑定,实现多租户信息,而X_APP_ID/X_APP_KEY会和租户旗下的应用绑定,一个租户多个应用时则使用应用标识符。

Type:
  • Object

(static, constant) X_LANG :string

Ux.Env.X_LANG

import Ux from 'ux';
const value = Ux.Env.X_LANG;

LocalStorage 专用的存储键值,存储当前应用的语言信息,多语言环境专用。

Type:
  • string

(static, constant) X_SIGMA :string

Ux.Env.X_SIGMA

import Ux from 'ux';
const value = Ux.Env.X_SIGMA;

LocalStorage 专用的存储键值(统一标识专用)

Type:
  • string

(static, constant) XT_FORMAT :Object

Ux.Env.XT_FORMAT

自定义组件数据格式信息

  • OBJECT:Json对象格式
  • ARRAY:Json数组格式(对象数组)
  • ARRAY_PURE: 纯数组格式

复杂格式

  • ARRAY_MAP: 按 Unique 键分组专用格式,值为 Object
  • ARRAY_GROUP:按某个字段分组专用格式,值为 Array
Type:
  • Object