常量模块
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;
该常量主要用于环境变量,会包含所有环境变量的基本信息,环境变量基本规则如下:
- 去掉前缀
Z_
的环境变量名称 - 去掉前缀
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) GRID
Ux.Env.GRID
布局专用,统一布局 Col 比例(支持自适应效果)
(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_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 的规则如下:
- 基本键值对应:
HTTP方法 + 下划线 + URI路径( / 转换成 _ )
。 - 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
- 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
的计算规则如下:
- 先在系统中执行基础路径计算。
- 如果用户已经登录,则使用登录用户的账号 key 执行计算,未登录则使用时间戳。
- 然后解析所有的参数。
- 如果是 pager 参数,则使用
":index" + pager.index + "size" + pager.size
。 - 如果是 criterias 参数,则执行排序后追加参数
- 如果是 pager 参数,则使用
- 最后执行
HMAC-512
基础算法加密,带上超时的 10 分钟。
目前大部分应用并没使用数字签名功能,但后期可以考虑直接引入数字签名加强安全性。
Type:
- boolean
(static, constant) THEME
Ux.Env.THEME
风格专用,用来配色的
(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