Cabinx-dynamic-component NPM

Cabinx Dynamic Component

CabinX动态组件关系图

关系图

目的

希望通过动态组件的应用，解决各系统直接重复开发功能相同的业务组件

CabinX Dynamic Component CabinX框架下的动态组件模块，需要配合cabindc-cli命令行工具，以及Java部分使用

开始使用

yarn add cabinx-dynamic-component

或

npm install cabinx-dynamic-component

项目内引用

一点准备工作

使用cabindc-cli生成cabinx-components.js(CabinX系统组件)、cabinx-dynamic-component-wrap.js(CabinX动态组件引用组件)

假设在pages/demo页面内使用

demo.js文件内声明引用

声明CabinX系统组件、CabinX动态组件引用组件

import CabinXComps from 'your/path/cabinx-components'
import DynamicComponent from "your/path/cabinx-dynamic-component-wrap";

声明组件使用

components: {
        'dynamic-component': DynamicComponent
    }

demo.dml文件内引用动态组件

<page>
  ...
  <dynamic-component
        x="dyc"
        :cabinx-components="cabinxComponents"
        :baseUrl="baseUrl"
      >
  </dynamic-component>
</page>

加载动态组件

...
show() {
  const dyc = this.getComponent('dyc')
          getSome()
              .then(content => {
                  dyc.load(content)
              })
}
...

其中getSome()方法用于获取动态组件内容，可自行通过http请求获取，获取url见Java部分
声明动态组件props
data: {
    cabinxComponents: CabinXComps,
    baseUrl: baseUrl,
    ...
}
baseUrl传入当前基础站点，例如：http://localhost

Java部分

所有动态组件的内容由后端提供，后端通过maven添加pom引用后提供动态组件的渲染内容及数据加载

开发动态组件

动态组件的作用

提供组件dml、js文件内容
提供组件数据加载api

开始

<dependency>
    <groupId>com.dmall</groupId>
    <artifactId>cabinx-dynamic-component-proxy</artifactId>
    <version>1.0</version>
</dependency>

其他依赖

org.springframework.boot:spring-boot-starter:2.1.0.RELEASE
org.springframework.boot:spring-boot-starter-web:2.1.0.RELEASE
org.springframework.boot:spring-boot-configuration-processor:2.1.0.RELEASE
org.apache.commons:commons-lang3:3.7
commons-io:commons-io:2.6
com.google.guava:guava28.0-jre
// dmall sso
com.dmall:dmall-sso-sdk:0.1.5-SNAPSHOT

创建自动配置文件

@Configuration
@Import(DynamicComponentAutoConfiguration.class)
public class CabinxDcSomeConfiguration {
  // 一些自动配置
  ...
}

创建控制器（API）

@RestController
@RequestMapping("base/path/some/1.0")
public class PurchaseCategoryController {

    private final IDynamicComponentProxy dynamicComponentProxy;
    /**
     * some组件内容
     * @return some组件内容
     */
    @GetMapping
    @ResponseBody
    public ResponseEntity<CabinxDynamicComponent> some() {

        CabinxDynamicComponent component = dynamicComponentProxy.findDynamicComponent("some", "1.0");
        return new ResponseEntity<>(
                component,
                HttpStatus.OK
        );
    }
    // 其他动态组件使用api
    ...
}

开发你的动态组件内容

你可以先前端开发自定义组件（XComponent），创建好后，再根据动态组件的一些规范修改后，编译进jar内
一点例子
dml文件内容
<head>
  <item label="示例下拉"
        node="select"
        name="first"
        multiple
        remote-searchable
        :ajax="url"
        :beforeRender="beforeRender"
        bindchanged="onChanged"
        selectBtn></item>
</head>
js文件内容
XComponent({

API: [],   // 需要对外部暴露的API方法，不支持属性，通过getComponent方法获取对象调用
props: [],              // 从外部传入的参数
data: {
    url: Context.baseUrl + '/some/path/query',
},                      // 和page一样，组件内部数据
hooks: {                        // 生命周期函数
    show: function () {
    },        // 组件挂载后执行
    hide: function () {
    },        // 组件销毁时执行
},
onChanged(value) {

},
/**
 * ajax请求结果返回后调用，可格式化返回的数据
 * 组件期望的格式 { data: [{ label: '', value: '' }] }
 * @param {Object} res - ajax返回值
 */
beforeRender(res) {
    return {data: [...res]}
}

})

> 注意，js文件须以`XComponent({})`方式开发，外部import内容或其他请以全局上下文`Context`引入使用，`cabinx-dynamic-component`提供`props`或`setContexts()`设置全局上下文

#### 项目内引用动态组件
引用动态组件
```XML
<dependency>
    <groupId>com.dmall</groupId>
    <artifactId>cabinx-dc-some</artifactId>
    <version>1.0</version>
</dependency>

做一点配置

...
@SpringBootApplication(scanBasePackages = {"这里包含你的动态组件路径包，以便找到你的api"})
@Import({CabinxDcWumartAutoConfiguration.class})
public class App {
  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }
}