OS控制台部署说明

2018-12-25 18:37 [复制链接] 60 0

OS 开源控制台

仓库地址:https://gitlab.videojj.com/Frontend/os-open-console

技术点
环境要求
  1. Nodejs 8 以上
  2. React v16.4+
复制代码
本地启动
  1. $ npm install
  2. $ npm start         # visit http://localhost:3000
复制代码


启动测试
  1. $ npm run test
复制代码
发布生产
  • 默认端口
  1. $ npm install
  2. $ npm run start-prod-remote
复制代码
  • 指定端口
  1. $ npm install
  2. $ export OS_CONSOLE_SERVER_PORT = [端口号, eg: 4444] && npm run start-prod-remote
复制代码
修改配置
进入/src/config 目录  修改相应文件即可
  • dev.js 开发环境
  • test.js 测试环境
  • prod.js 生成环境
jsonschema/uischema 配置手册
jsonschema 的作用简明表述即将数据对象转化成表单描述对象。数据对象中核心的组成为对象属性,jsonschema 提供将对象属性描述成表单项的语法标准。下面将以某系统中的“新增家庭”为例,说明一下如何通过 jsonschema 来实现这一功能。
 家庭数据模型:
  1. {
  2.   id: "",
  3.   name: "",
  4.   address: "",
  5.   members: []
  6. }
复制代码
成员数据模型:
  1. {
  2.   id: "",
  3.   name: "",
  4.   gender: 0/1,
  5.   age: "",
  6.   height: ""
  7. }
复制代码
地址数据模型:
  1. {
  2.   id: "",
  3.   province: "",
  4.   city: "",
  5.   street: "",
  6.   detail: "",
  7.   code: "",
  8. }
复制代码
带有“参见 uischema” 标注的,即表明该项的实现需要 uishcema 配合。
  • 定义一个值类型为 string 的属性
  1. "name": {
  2.   "title": "姓名",
  3.   "type": "string"
  4. }
复制代码
  • 定义一个值类型为 integer 的属性
  1. "age": {
  2.   "title": "年龄",
  3.   "type": "integer"
  4. }
复制代码
  • 定义一个值类型为 boolean 的属性
  1. "gender": {
  2.   "title": "性别",
  3.   "type": "boolean"
  4. }
复制代码
  • 定义一个值类型为 number 的属性
  1. "height": {
  2.   "title": "身高",
  3.   "type": "number",
  4.   "description": "单位:m,精度:cm"
  5. }
复制代码
  • 定义  引用类型
  1. {
  2.   "definitions": {
  3.     "member": {
  4.       "type": "object",
  5.       "properties": {
  6.         "id": {
  7.           "type": "string"
  8.         },
  9.         "name": {
  10.           "type": "string"
  11.         },
  12.         "gender: {
  13.           "type": "boolean"
  14.         },
  15.         "age": {
  16.           "type": "integer"
  17.         },
  18.         "height": {
  19.           "type": "number"
  20.         }
  21.       }
  22.     }
  23.   }
  24. }
复制代码
  • 定义一个值类型为 array 的属性
  1. "members": {
  2.   "title": "家庭成员",
  3.   "type": "array",
  4.   "items": {
  5.     "$ref": "#/definitions/member"
  6.   }
  7. }
复制代码
  • 定义一个值为文本块(文件上传)的属性
  1. "file": {
  2.   "type": "string",
  3.   "format": "data-url"
  4. }
复制代码
  • 定义一个值为日期的属性
  1. "date": {
  2. "type": "string",
  3. "format": "date"
  4. }
复制代码
  • 完整家庭 jsonschema 定义
  1. {
  2.   "definitions": {
  3.     "member": {
  4.       "type": "object",
  5.        "properties": {
  6.          "id": {
  7.            "type": "string"
  8.          },
  9.          "name": {
  10.            "type": "string"
  11.          },
  12.          "gender: {
  13.            "type": "boolean"
  14.          },
  15.          "age": {
  16.            "type": "integer"
  17.          },
  18.          "height": {
  19.            "type": "number"
  20.          }
  21.        }
  22.     }
  23.   },
  24.   "title": "",
  25.   "type": "object",
  26.   "properties": {
  27.     "id": {
  28.       "type": "string"
  29.     },
  30.     "name": {
  31.       "type": "string"
  32.     },
  33.     "address": {
  34.       "type": "object",
  35.       "properties": {
  36.         "id": {
  37.           "type": "string"
  38.         },
  39.         "province": {
  40.           "type": "string"
  41.         },
  42.         "city": {
  43.           "type": "string"
  44.         },
  45.         "street": {
  46.           "type": "string"
  47.         },
  48.         "code": {
  49.           "type": "integer"
  50.         }
  51.     },
  52.     "members": {
  53.       "$ref": "#/definitions/member"
  54.     }
  55.   }
  56. }
复制代码
  • jsonschema
  1. {
  2.   "definitions": {                                   // ->定义引用schema
  3.     "Person": {
  4.       "type": "object",
  5.       "properties": {
  6.         "name": {
  7.           "title": "姓名",
  8.           "type": "string",
  9.           "default": "张三"
  10.         },
  11.         "age": {
  12.           "title": "年龄",
  13.           "type": "integer"
  14.         }
  15.       }
  16.     }
  17.   },
  18.   "title": "jsonschema配置案例",                      // ->表单标题
  19.   "description": "这是一份jsonschema配置案例",         // ->表单说明/介绍
  20.   "type": "object",                                 // ->表单数据类型
  21.   "required": ["stringField"],                      // ->设置必填表单项
  22.   "properties": {                                   // ->定义数据属性
  23.     "stringField": {
  24.       "type": "string",                             // ->字符串
  25.       "title": "文本输入框"
  26.     },
  27.     "integerField": {
  28.       "type": "integer",                            // ->整型
  29.       "title": "整数输入框"
  30.     },
  31.     "booleanField": {
  32.       "type": "boolean",                            // ->布尔
  33.       "title": "布尔选择框"
  34.     },
  35.     "numberField": {
  36.       "type": "number",                             // ->数值,含小数
  37.       "title": "数值输入框"
  38.     },
  39.     "timeField": {
  40.       "type": "string",                             // ->参见uischema
  41.       "title": "时间选择",
  42.       "format": "date-time"
  43.     },
  44.     "dateField": {
  45.       "type": "string",                             // ->参见uischema
  46.       "title": "日期选择",
  47.       "format": "date"
  48.     },
  49.     "fileField": {
  50.       "type": "string",                             // ->但文件上传
  51.       "format": "data-url",
  52.       "title": "单文件上传"
  53.     },
  54.     "multiFileField": {
  55.       "type": "array",                              // ->多文件上传
  56.       "title": "多文件上传",
  57.       "items": {
  58.         "type": "string",
  59.         "format": "data-url"
  60.       }
  61.     },
  62.     "passwordField": {
  63.       "type": "string",                             // ->参见uischema
  64.       "title": "密码输入框"
  65.     },
  66.     "telphoneField": {
  67.       "type": "string",                             // ->参见uischema
  68.       "title": "号码输入框"
  69.     },
  70.     "textareaField": {
  71.       "type": "string",                             // ->参见uischema
  72.       "title": "文本框"
  73.     },
  74.     "selectField": {
  75.       "type": "integer",                            // ->下拉选择
  76.       "title": "下拉选择",
  77.       "enum": [1, 2, 3],
  78.       "enumNames": ["一", "二", "三"]
  79.     },
  80.     "secretField": {
  81.       "type": "string",                             // ->参见uischema
  82.       "title": "隐藏输入框"
  83.     },
  84.     "disableField": {
  85.       "type": "string",                             // ->参见uischema
  86.       "title": "输入框禁用"
  87.     },
  88.     "readonlyField": {
  89.       "type": "string",                             // ->参见uischema
  90.       "title": "只读输入框"
  91.     },
  92.     "radioFiled": {
  93.       "type": "integer",                            // ->参见uischema
  94.       "title": "单选",
  95.       "enum": [
  96.         1,
  97.         2,
  98.         3
  99.       ]
  100.     },
  101.     "rangeField": {
  102.       "type": "integer",                            // ->参见uischema
  103.       "title": "范围选择",
  104.       "minimum": 0,
  105.       "maximum": 100
  106.     },
  107.     "rangeStepField": {
  108.       "type": "integer",                            // ->参见uischema
  109.       "title": "步进选择",
  110.       "minimum": 0,
  111.       "maximum": 100,
  112.       "multipleOf": 10
  113.     },
  114.     "arrayField": {
  115.       "type": "array",
  116.       "title": "列表",
  117.       "items": {
  118.         "type": "string"
  119.       }
  120.     },
  121.     "arrayField2": {
  122.       "type": "array",                              // ->参见uischema
  123.       "title": "多属性值数组项",
  124.       "items": [
  125.         {
  126.           "title": "",
  127.           "type": "string"
  128.         },
  129.         {
  130.           "title": "",
  131.           "type": "boolean",
  132.           "default": false
  133.         }
  134.       ]
  135.     },
  136.     "arrayField3": {
  137.       "type": "array",
  138.       "title": "引用类型数组",
  139.       "items": {
  140.         "$ref": "#/definitions/Person"              // ->引用schema定义
  141.       }
  142.     },
  143.     "customWidgetComponentsField": {
  144.       "type": "string",                             // ->参见uischema
  145.       "title": "自定义定制组件项"
  146.     },
  147.     "fieldWithDescription": {
  148.       "type": "string",
  149.       "title": "带有描述/副标题输入项",
  150.       "description": "这是一个带有描述/副标题的输入框"   // ->带描述表单项
  151.     },
  152.     "fieldWithPlaceholder": {
  153.       "type": "string",
  154.       "title": "这是一个带有placeholder的输入框"       // ->参见uischema
  155.     },
  156.     "arrayItemOrderable": {
  157.       "type": "array",                             // ->参见uischema
  158.       "title": "可/不可排序的列表",
  159.       "items": {
  160.         "type": "string"
  161.       }
  162.     },
  163.     "arrayItemAddable": {
  164.       "type": "array",                             // ->参见uischema
  165.       "title": "可/不可添加数据的输入项",
  166.       "items": {
  167.         "type": "string"
  168.       }
  169.     },
  170.     "arrayItemRemovable": {
  171.       "type": "array",                             // ->参见uischema
  172.       "title": "可/不可删除数据的输入项",
  173.       "items": {
  174.         "type": "string"
  175.       }
  176.     },
  177.     "customFieldCss": {
  178.       "type": "string",                            // ->参见uischema
  179.       "title": "自定义输入框样式类名"
  180.     },
  181.     "disableEnumAttributeFields": {
  182.       "type": "string",                            // ->参见uischema
  183.       "title": "禁用枚举值",
  184.       "enum": ["one", "two", "three"]
  185.     },
  186.     "multipleChoiceList": {
  187.       "type": "array",                             // ->参见uischema
  188.       "title": "多选项",
  189.       "items": {
  190.         "type": "string",
  191.         "enum": ["foo", "bar", "fuzz", "qux"]
  192.       },
  193.       "uniqueItems": true
  194.     },
  195.     "fieldHelpText": {
  196.       "type": "string",                            // ->参见uischema
  197.       "title": "带有提示帮助信息输入框"
  198.     },
  199.     "fieldTitleText": {
  200.       "type": "string",                            // ->参见uischema
  201.       "title": "自定义输入框label标题"
  202.     },
  203.     "fieldAutoFocus": {
  204.       "type": "string",                            // ->参见uischema
  205.       "title": "输入框焦点状态"
  206.     },
  207.     "fieldTextareaRow": {
  208.       "type": "string",                            // ->参见uischema
  209.       "title": "文本框行数"
  210.     },
  211.     "propertyDependencyField": {
  212.       "title": "属性值依赖,某属性非空,关联属性亦非空",
  213.       "type": "object",                            // ->属性依赖
  214.       "properties": {
  215.         "name": {
  216.           "type": "string"
  217.         },
  218.         "age": {
  219.           "type": "integer"
  220.         }
  221.       },
  222.       "dependencies": {
  223.         "name": [
  224.           "age"
  225.         ]
  226.       }
  227.     },
  228.     "schemaDependencyField": {
  229.       "title": "模版项依赖,指定属性非空,其关联属性自动动态添加至表单模版",
  230.       "type": "object",                            // ->schema依赖
  231.       "properties": {
  232.         "name": {
  233.           "type": "string"
  234.         }
  235.       },
  236.       "dependencies": {
  237.         "name": {
  238.           "properties": {
  239.             "age": {
  240.               "type": "integer"
  241.             }
  242.           },
  243.           "required": [
  244.             "age"
  245.           ]
  246.         }
  247.       }
  248.     }
  249.   }
  250. }
复制代码
  • uischema
  1. {
  2.   "passwordField": {
  3.     "ui:widget": "password"               // ->指明为密码框
  4.   },
  5.   "textareaField": {
  6.     "ui:widget": "textarea"               // ->指明为文本框
  7.   },
  8.   "dateField": {
  9.     "ui:widget": "alt-date"               // ->指明为日期选择
  10.   },
  11.   "timeField": {
  12.     "ui:widget": "alt-datetime"           // ->指明为时间选择
  13.   },
  14.   "telphoneField": {
  15.     "ui:widget": "tel"                    // ->指明为号码输入
  16.   },
  17.   "selectField": {
  18.     "ui:widget": "select"                 // ->指明为下拉列表选择
  19.   },
  20.   "secretField": {
  21.     "ui:widget": "hidden"                 // ->指明为隐藏表单项
  22.   },
  23.   "disableField": {
  24.     "ui:disable": true                    // ->指明为表单项禁用
  25.   },
  26.   "readonlyField": {
  27.     "ui:readonly": true                   // ->指明为只读表单项
  28.   },
  29.   "radioFiled": {
  30.     "ui:widget": "radio",                 // ->指明为单选
  31.     "ui:options": {
  32.       "inline": true
  33.     }
  34.   },
  35.   "rangeField": {
  36.     "ui:widget": "range"                  // ->指明为范围选择
  37.   },
  38.   "rangeStepField": {                     // ->指明为步进选择
  39.     "ui:widget": "range"
  40.   },
  41.   "customWidgetComponentsField": {        // ->自定义输入项组件
  42.     "ui:widget": (props) => {
  43.       return (
  44.         <input type="text"
  45.           className="custom"
  46.           value={props.value}
  47.           required={props.required}
  48.           onFocus={props.focused}
  49.           onChange={(event) => props.onChange(event.target.value)} />
  50.       );
  51.     }
  52.   },
  53.   "fieldWithPlaceholder": {
  54.     "ui:placeholder": "placeholder展示"    // ->指明为带有placeholder输入框
  55.   },
  56.   "arrayItemOrderable": {
  57.     "ui:options": {                       // ->指明为可排序
  58.       "orderable": true/false
  59.     }
  60.   },
  61.   "arrayItemAddable": {
  62.     "ui:options":  {                      // ->指明为可添加
  63.       addable: true/false
  64.     }
  65.   },
  66.   "arrayItemRemovable": {
  67.     "ui:options":  {                      // ->指明为可删除
  68.       removable: true/false
  69.     }
  70.   },
  71.   "customFieldCss": {
  72.     "classNames": ""                      // ->自定义表单项样式类名
  73.   },
  74.   "disableEnumAttributeFields": {
  75.     "ui:enumDisabled": ["two"]            // ->指明为不可选择值项
  76.   },
  77.   "multipleChoiceList": {
  78.     "ui:widget": "checkboxes"             // ->指明为多选
  79.   },
  80.   "fieldHelpText": {
  81.     "ui:help": ""                         // ->指明为输入框提示
  82.   },
  83.   "fieldTitleText": {
  84.     "ui:title": ""                        // ->自定义表单项label标题
  85.   },
  86.   "fieldAutoFocus": {
  87.     "ui:autofocus": true/false            // ->设置输入框焦点状态
  88.   },
  89.   "fieldTextareaRow": {
  90.     "ui:widget": "textarea",              // ->设置文本框行数
  91.     "ui:options": {
  92.       rows: 15
  93.     }
  94.   }
  95. }
复制代码
  • 预览图片




title: "READ ME"
author: "Justin Zhang<zhangjian@videopls.com>"
date: Sept. 29, 2018
output:
pdf_document
toc: true
toc_depth: 2
使用道具 举报 只看该作者 回复
最新评论 | 正序浏览
只看楼主|楼层直达:
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|站点地图|Video++ ( 沪ICP备14042830-6号

Powered by video++

快速回复 返回顶部 返回列表