cabinx-dynamic-component
v1.0.8
Published
CabinX Dynamic Component
Downloads
17
Readme
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()设置全局上下文
项目内引用动态组件
引用动态组件
<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);
}
}