Cabinx Dynamic Component

CabinX动态组件关系图

!关系图

目的

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

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

开始使用

`` bash
yarn add cabinx-dynamic-component
`
或
` bash
npm install cabinx-dynamic-component
`

项目内引用

一点准备工作
> 使用cabindc-cli生成cabinx-components.js(CabinX系统组件)、cabinx-dynamic-component-wrap.js(CabinX动态组件引用组件)

假设在pages/demo页面内使用

demo.js文件内声明引用
* 声明CabinX系统组件、CabinX动态组件引用组件

`javascript
import CabinXComps from 'your/path/cabinx-components'
import DynamicComponent from "your/path/cabinx-dynamic-component-wrap";
`
* 声明组件使用
`javascript
components: {
'dynamic-component': DynamicComponent
}
`

* demo.dml文件内引用动态组件
`HTML

...
x="dyc"
:cabinx-components="cabinxComponents"
:baseUrl="baseUrl"
>


`

* 加载动态组件
`javascript
...
show() {
const dyc = this.getComponent('dyc')
getSome()
.then(content => {
dyc.load(content)
})
}
...
`
> 其中getSome()方法用于获取动态组件内容，可自行通过http请求获取，获取url见Java部分
* 声明动态组件props
`javascript
data: {
cabinxComponents: CabinXComps,
baseUrl: baseUrl,
...
}
`
> baseUrl传入当前基础站点，例如：http://localhost

Java部分


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

$3

动态组件的作用
* 提供组件dml、js文件内容
* 提供组件数据加载api
#### 开始

`XML

com.dmall
cabinx-dynamic-component-proxy
1.0

`
#### 其他依赖
`gradle
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
`

#### 创建自动配置文件
`Java
@Configuration
@Import(DynamicComponentAutoConfiguration.class)
public class CabinxDcSomeConfiguration {
// 一些自动配置
...
}
`
#### 创建控制器（API）
`Java

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

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

CabinxDynamicComponent component = dynamicComponentProxy.findDynamicComponent("some", "1.0");
return new ResponseEntity<>(
component,
HttpStatus.OK
);
}
// 其他动态组件使用api
...
}
`
#### 开发你的动态组件内容
> 你可以先前端开发自定义组件（XComponent），创建好后，再根据动态组件的一些规范修改后，编译进jar内
##### 一点例子
* dml文件内容
`HTML

node="select"
name="first"
multiple
remote-searchable
:ajax="url"
:beforeRender="beforeRender"
bindchanged="onChanged"
selectBtn>

`
* js文件内容
`javascript
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

com.dmall
cabinx-dc-some
1.0

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

查看Demo