MetaUI Tutorial

前端技术

服务配置

1. 首先在前端服务（i.e. kuaisuadmin）中添加maven依赖

<dependency>
    <groupId>com.isuwang</groupId>
    <artifactId>dapeng-metaui-servlet</artifactId>
    <version>1.0.0</version>
</dependency>
<dependency>
    <groupId>com.isuwang</groupId>
    <artifactId>dapeng-registry-zookeeper</artifactId>
    <version>1.2.1</version>
</dependency>
<dependency>
    <groupId>com.isuwang</groupId>
    <artifactId>dapeng-remoting-netty</artifactId>
    <version>1.2.1</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.25</version>
</dependency>

dapeng-metaui-servlet Github地址，可clone下来本地安装。

2. 前端服务web.xml中配置servlet

<servlet>
    <servlet-name>metadataServlet</servlet-name>
    <servlet-class>com.isuwang.dapeng.metadata.servlet.MetadataServlet</servlet-class>
    <init-param>
        <param-name>driverClassName</param-name>
        <param-value>com.mysql.jdbc.Driver</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>metadataServlet</servlet-name>
    <url-pattern>/dapeng/metadata</url-pattern>
</servlet-mapping>

3. 在resource目录下添加init.properties配置文件，写入以下内容并修改数据库配置

DB_METADB_URL=jdbc:mysql://192.168.5.194:3306/metadb?useUnicode=true&characterEncoding=utf8
DB_METADB_USER=your-db-username
DB_METADB_PASSWD=your-db-password

也可以设置系统的环境变量，如：

设置环境变量后，会优先读取环境变量的值。

4. 初始化数据库

DROP DATABASE
IF EXISTS metadb;
CREATE DATABASE
IF NOT EXISTS metadb DEFAULT CHARSET utf8 COLLATE utf8_general_ci;
DROP TABLE IF EXISTS `metadb`.`fields`;
CREATE TABLE `metadb`.`fields` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `domain` varchar(50) NOT NULL COMMENT '领域，如orderdb',
  `entity` varchar(50) NOT NULL COMMENT '实体，如TOrder',
  `name` varchar(50) NOT NULL COMMENT '字段名，如"orderNo"',
  `element` varchar(50) DEFAULT NULL COMMENT '替换元素，如 "paper-input" ',
  `label` varchar(50) NOT NULL COMMENT '字段名，如"订单号"',
  `required` smallint(1) NOT NULL DEFAULT '0' COMMENT '是否必填 1: 是 0：否',
  `mutil` smallint(1) NOT NULL DEFAULT '0' COMMENT '多否多选  1: 是 0：否',
  `format` varchar(50) DEFAULT NULL COMMENT '显示格式，用于日期显示，如“yyyy-MM-dd”',
  `editable` smallint(1) NOT NULL DEFAULT '0' COMMENT '是否可编辑  1: 是 0：否',
  `validate` smallint(1) NOT NULL DEFAULT '0' COMMENT '前是否需要校验， 1: 是 0：否',
  `length` int(11) DEFAULT NULL COMMENT '字符允许长度',
  `max_length` int(11) DEFAULT NULL COMMENT '允许最大长度',
  `min_length` int(11) DEFAULT NULL COMMENT '允许最小长度',
  `regexp` varchar(50) DEFAULT NULL COMMENT '正则匹配',
  `prompt` varchar(50) DEFAULT NULL COMMENT '校验失败时的提示语，如“请输入备注”',
  `min` int(11) DEFAULT NULL COMMENT '数字最小值',
  `max` int(11) DEFAULT NULL COMMENT '数字最大值',
  `candidates` varchar(1000) DEFAULT NULL COMMENT '下拉选项中的值，json串，如 [{value:1,label:"男"},{value:2,label:"女"}]',
  `candidate_label` varchar(50) DEFAULT NULL COMMENT '组件显示字段名，针对下拉组件、radio-group组件等，“label”',
  `candidate_value` varchar(50) DEFAULT NULL COMMENT '组件值字段名，针对下拉组件、radio-group组件等，“value”',
  `placeholder` varchar(50) DEFAULT NULL COMMENT 'placeholder',
  `src_key` varchar(50) DEFAULT NULL COMMENT '源字段名',
  `visible` smallint(1) NOT NULL DEFAULT '1' COMMENT '界面是否可见 1: 是 0：否',
  `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `created_by` int(11) DEFAULT NULL,
  `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `updated_by` int(11) DEFAULT NULL,
  `disabled` smallint(1) NOT NULL DEFAULT '0'
  PRIMARY KEY (`id`),
  UNIQUE KEY `field_unique` (`domain`,`entity`,`name`) COMMENT '字段唯一约束'
) ENGINE=InnoDB AUTO_INCREMENT=262 DEFAULT CHARSET=utf8 COMMENT='字段元数据';

服务开发

https://github.com/isuwang/isuwang-soa

1. 编写thrift

Thrift元数据定义

2. 安装API

mvn clean install

3. 安装API

4. 启动服务

前端使用

https://www.webcomponents.org/element/isuwang/metaui

1. 安装MetaUI

bower install git://github.com/isuwang/metaui.git

2. 页面中引入元数据组件

<link rel="import" href="../bower_components/metaui/utils/meta-constructor.html">
<link rel="import" href="../bower_components/metaui/h2-crud.html">

3. 声明组件

meta-constructor src属性的值与servlet配置中的url-pattern是对应的。
option中必须传入serviceName以及version， methodName的值是页面数据查询的方法名。

<dom-module id="test-index">
  <template>
    <h2-crud metadata="[[ metadata ]]"></h2-crud>
    <meta-constructor src="/dapeng/metadata"  metadata="{{ metadata }}" option="[[ option ]]"></meta-constructor>
  </template>
  <script>
    class TestIndex extends Polymer.Element {
        static get is() {
            return "test-index";
        }
        static get properties() {
            return {
                metadata: {
                    type: Object
                },
                option: {
                    type: Object,
                    value: function () {
                      return {
                        serviceName: "com.isuwang.soa.order.service.WaybillBizService",
                        version: "1.0.0",
                        methodName: "findWaybills"
                      };
                    }
                }
            };
        }
    }
    customElements.define(TestIndex.is, TestIndex);
  </script>
</dom-module>