🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

cabinx-dynamic-component

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cabinx-dynamic-component

CabinX Dynamic Component

latest
npmnpm
Version
1.0.8
Version published
Weekly downloads
12
-70%
Maintainers
1
Weekly downloads
 
Created
Source

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);
  }
}

查看Demo

Keywords

cabinx
dynamic-component

FAQs

Package last updated on 16 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Frontier AI Is Now Critical Infrastructure

Security News

Frontier AI Is Now Critical Infrastructure

The Fable shutdown shows how quickly model access can become a business continuity risk for AI-dependent engineering teams.

By Sarah Gooding  -  Jun 24, 2026