1. Toy模板网首页
  2. > Toy博客

ant design pro集成阿里低代码引擎lowcode-engine，并实现与数据库结合实现低代码模块的创建、设计、发布等功能

9月前 作者：frankch 分类：Toy博客 阅读(53) 违法举报

这篇具有很好参考价值的文章主要介绍了ant design pro集成阿里低代码引擎lowcode-engine，并实现与数据库结合实现低代码模块的创建、设计、发布等功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ant design pro集成阿里低代码引擎

阿里低代码引擎是一款为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架。

本文主要介绍如何在ant design pro项目中集成阿里低代码引擎lowcode-engine。
根据官方文档，已有项目要集成低代码引擎，至少需要三步，以下我们以ant desigin pro5项目为例，来集成低代码引擎。

ant desigin pro项目的创建可以根据官方网站进行创建

引入 UMD 包资源

找到项目中的src/pages/document.ejs文件，添加如下内容

<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css" />
<!-- Fusion Next 控件样式 -->
<link rel="stylesheet" href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css">
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css">
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css" />

<!-- React，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js"></script>
<!-- React DOM，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"></script>

配置打包

因为这些资源已经通过 UMD 方式引入，所以在 webpack 等构建工具中需要配置它们为 external，不再重复打包
找到项目config/config.ts配置文件，添加如下内容

"externals": {
    "react": "var window.React",
    "react-dom": "var window.ReactDOM",
    "prop-types": "var window.PropTypes",
    "@alifd/next": "var window.Next",
    "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
    "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
    "moment": "var window.moment",
    "lodash": "var window._"
  }

初始化低代码编辑器

正确引入后，我们可以直接通过 window 上的变量进行引用，如 window.AliLowCodeEngine.init。您可以直接通过此方式初始化低代码引擎

// 确保在执行此命令前，在 <body> 中已有一个 id 为 lce-container 的 <div />
window.AliLowCodeEngine.init(document.getElementById('lce-container'), {
  enableCondition: true,
  enableCanvasLock: true,
});

如果您的项目中使用了 TypeScript，您可以通过如下 devDependencies 引入相关包，并获得对应的类型推断。

// package.json
{
  "devDependencies": {
    "@alilc/lowcode-engine": "^1.0.0"
  }
}

import { init } from '@alilc/lowcode-engine';

init(document.getElementById('lce-container'), {
  enableCondition: true,
  enableCanvasLock: true,
});

集成完整demo功能

到此，低代码引擎已经集成完成，但是想要达到官方demo的效果还不够，于是参照官方demo，将官方demo已实现的功能集成进来，基本就可以使用了。
官方demo源码
官方demo演示

接下来参照demo，将完整的demo集成到项目中，

安装npm包

//dependencies
	"@alilc/lowcode-datasource-fetch-handler": "^1.0.1",
	"@alilc/lowcode-plugin-code-editor": "^1.0.3",
    "@alilc/lowcode-plugin-code-generator": "^1.0.4",
    "@alilc/lowcode-plugin-components-pane": "^2.0.0",
    "@alilc/lowcode-plugin-datasource-pane": "^1.0.9",
    "@alilc/lowcode-plugin-inject": "^1.2.1",
    "@alilc/lowcode-plugin-manual": "^1.0.4",
    "@alilc/lowcode-plugin-schema": "^1.0.2",
    "@alilc/lowcode-plugin-simulator-select": "^1.0.2",
    "@alilc/lowcode-plugin-undo-redo": "^1.0.0",
    "@alilc/lowcode-plugin-zh-en": "^1.0.0",
    "@alilc/lowcode-plugin-set-ref-prop": "^1.0.1",
    "@alilc/lowcode-react-renderer": "^1.1.2",
    "@alilc/lowcode-setter-behavior": "^1.0.0",
    "@alilc/lowcode-setter-title": "^1.0.2",

//devDependencies
	"@alilc/lowcode-engine": "^1.1.2",
    "@alilc/lowcode-engine-ext": "^1.0.0",
    "@alilc/lowcode-types": "^1.1.1",

复制插件

这里我选择demo中的demo-basic-antd项目进行集成

  1. 将demo中src/plugins和src/services复制到项目中src/low-code文件夹下
  2. 根据demo中的index.ts的实现我们实现如下代码，作为编辑器的展示页面。代码中引用的index.scss对应demo中的global.scss
//src/pages/low-code/editor/index.tsx 低代码编辑器入口页面
import React, { useState, useEffect } from 'react';
import { init, plugins } from '@alilc/lowcode-engine';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler';
import EditorInitPlugin from '@/low-code/plugins/plugin-editor-init';
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo';
import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane';
import SchemaPlugin from '@alilc/lowcode-plugin-schema';
import CodeEditorPlugin from '@alilc/lowcode-plugin-code-editor';
import ManualPlugin from '@alilc/lowcode-plugin-manual';
import InjectPlugin from '@alilc/lowcode-plugin-inject';
import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select';
import ComponentPanelPlugin from '@alilc/lowcode-plugin-components-pane';
import DefaultSettersRegistryPlugin from '@/low-code/plugins/plugin-default-setters-registry';
import LoadIncrementalAssetsWidgetPlugin from '@/low-code/plugins/plugin-load-incremental-assets-widget';
import SaveSamplePlugin from '@/low-code/plugins/plugin-save-sample';
import PreviewSamplePlugin from '@/low-code/plugins/plugin-preview-sample';
import CustomSetterSamplePlugin from '@/low-code/plugins/plugin-custom-setter-sample';
import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop';
import LogoSamplePlugin from '@/low-code/plugins/plugin-logo-sample';
import './index.scss';
import { createUmiRequestHandler } from '@/low-code/request';

async function registerPlugins() {
  await plugins.register(InjectPlugin, { override: true });

  await plugins.delete(EditorInitPlugin.pluginName);
  await plugins.register(EditorInitPlugin, {
    scenarioName: 'basic-antd',
    displayName: '基础 AntD 组件',
    info: {
      urls: [
        {
          key: '设计器',
          value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-basic-antd',
        },
        {
          key: 'antd 物料',
          value:
            'https://github.com/alibaba/lowcode-materials/tree/main/packages/antd-lowcode-materials',
        },
      ],
    },
  });

  // 设置内置 setter 和事件绑定、插件绑定面板
  await plugins.register(DefaultSettersRegistryPlugin, { override: true });

  await plugins.register(LogoSamplePlugin, { override: true });

  await plugins.register(ComponentPanelPlugin, { override: true });

  await plugins.register(SchemaPlugin, { override: true });

  await plugins.register(ManualPlugin, { override: true });
  // 注册回退/前进
  await plugins.register(UndoRedoPlugin, { override: true });

  // 注册中英文切换
  await plugins.register(ZhEnPlugin, { override: true });

  await plugins.register(SetRefPropPlugin, { override: true });

  await plugins.register(SimulatorResizerPlugin, { override: true });

  await plugins.register(LoadIncrementalAssetsWidgetPlugin, { override: true });

  // 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例
  await plugins.delete(DataSourcePanePlugin.pluginName);
  await plugins.register(DataSourcePanePlugin, {
    importPlugins: [],
    dataSourceTypes: [
      {
        type: 'fetch',
      },
      {
        type: 'jsonp',
      },
    ],
  });

  await plugins.register(CodeEditorPlugin, { override: true });

  // 注册出码插件
  await plugins.register(CodeGenPlugin, { override: true });

  await plugins.register(SaveSamplePlugin, { override: true });

  await plugins.register(PreviewSamplePlugin, { override: true });

  await plugins.register(CustomSetterSamplePlugin, { override: true });
}

async function initLowCodeEditor() {
  await registerPlugins();
  init(document.getElementById('lowcode-editor') || undefined, {
    locale: 'zh-CN',
    enableCondition: true,
    enableCanvasLock: true,
    // 默认绑定变量
    supportVariableGlobally: true,
    requestHandlersMap: {
      //fetch: createFetchHandler(),
      fetch: createUmiRequestHandler(),
    },
  });
}
export default function () {
  useEffect(() => {
    initLowCodeEditor();
  }, []);
  return <div id="lowcode-editor"></div>;
}
  1. 预览页面的实现
    参照demo中的preview页面，实现预览页面如下
//src/pages/low-code/preview/index.tsx
import React, { useState, useEffect } from 'react';
import preview from './components/preview';
import './index.css';
import { history, useParams } from 'umi';
export default function () {
  const params = useParams();
  const data = { ...history.location.query, ...params };
  if (params.moduleId) {
    data.type = 'release';
  } else {
    data.type = 'preview';
  }
  useEffect(() => {
    preview(data);
  });
  return <div id="lowcode-preview" className="lowcode-preview"></div>;
}


//src/pages/low-code/preview/components/preview.tsx
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Loading } from '@alifd/next';
import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import { injectComponents } from '@alilc/lowcode-plugin-inject';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'

import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './services/mockService';

const getScenarioName = function () {
  if (location.search) {
    return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
  }
  return 'index';
}

const SamplePreview = () => {
  const [data, setData] = useState({});

  async function init() {
    const scenarioName = getScenarioName();
    const packages = getPackagesFromLocalStorage(scenarioName);
    const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
    const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
    const componentsMap: any = {};
    componentsMapArray.forEach((component: any) => {
      componentsMap[component.componentName] = component;
    });
    const schema = componentsTree[0];

    const libraryMap = {};
    const libraryAsset = [];
    packages.forEach(({ package: _package, library, urls, renderUrls }) => {
      libraryMap[_package] = library;
      if (renderUrls) {
        libraryAsset.push(renderUrls);
      } else if (urls) {
        libraryAsset.push(urls);
      }
    });

    const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];

    // TODO asset may cause pollution
    const assetLoader = new AssetLoader();
    await assetLoader.load(libraryAsset);
    const components = await injectComponents(buildComponents(libraryMap, componentsMap));

    setData({
      schema,
      components,
    });
  }

  const { schema, components } = data;

  if (!schema || !components) {
    init();
    return <Loading fullScreen />;
  }

  return (
    <div className="lowcode-plugin-sample-preview">
      <ReactRenderer
        className="lowcode-plugin-sample-preview-content"
        schema={schema}
        components={components}
        appHelper={{
          requestHandlersMap: {
            fetch: createFetchHandler()
          }
        }}
      />
    </div>
  );
};
export default function (params) {
  ReactDOM.render(<SamplePreview params={params} />, document.getElementById('lowcode-preview'));
}
  1. 配置路由，找到config/routes.ts配置路由
 {
     name: '低代码',
     icon: 'table',
     path: '/low-code',
     routes: [{
       name: '编辑器',
       icon: 'table',
       path: '/low-code/editor',
       component: './low-code/editor',
     },{
       name: '预览',
       icon: 'table',
       layout: false,
       path: '/low-code/preview',
       component: './low-code/preview',
     }]
   }
  1. 修改src/low-code/plugins/plugin-preview-sample/index.tsx，打开预览页面的地址，找到对应的低代码修改
const search = location.search
            ? `${location.search}&scenarioName=${scenarioName}`
            : `?scenarioName=${scenarioName}`;
          window.open(`/preview${search}`);

至此，低代码引擎及demo已经集成完成，
由于没有后端
运行npm run start即可看到项目效果

完整项目地址
项目演示地址
在项目代码中实现了将低代码的配置信息保存入数据库，并实现了低代码模块的创建，设计，发布等功能，动态配置菜单即可完成模块开发及上线。文章来源地址https://www.toymoban.com/news/detail-837231.html

到了这里，关于ant design pro集成阿里低代码引擎lowcode-engine，并实现与数据库结合实现低代码模块的创建、设计、发布等功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Ant-Design-Pro-V5： ProTable前端导出excel表格。

    Ant-Design-Pro-V5： ProTable前端导出excel表格。

    Prtable表格中根据搜索条件实现excel表格导出。 代码展示： index.jsx 数据字典格式返回： 以 teacherTypeObj 为例 向services.js中 lecturerExportExcel 方法中传入的格式为： services.js中 lecturerExportExcel 导出方法： utils 中 paramsFilter 方法：过滤无用参数

    2024年02月09日
    浏览(44)
  • ant design pro + umi4的动态菜单与动态路由

    ant design pro + umi4的动态菜单与动态路由

    困扰我好多天的自定义菜单及路由终于完成了，首先虽然看似为一个功能，但在umi4中是两项配置。 先说说我浪费了大量时间使用的处理方式：因为曾经的项目是umi3的，所以我就想原样搬过来，结果发现，布局页BasicLayout的子children不见了！     如果这个子路由能正常显示，

    2024年02月11日
    浏览(41)

  • [绍棠] Ant Design Pro of Vue打包有前缀静态资源访问不到

    缺点：需要和部署的路径保持一致，不是很灵活 1、在环境变量.env中定义url前缀 2、定义vue路由前缀路径router/index.js 3、vue配置公共路径前缀vue.config.js 4、打包部署到nginx或其他中间件，此时要保证前缀和部署的前缀保持一致 nginx 1、使用history模式 2、定义vue路由前缀路径rout

    2024年02月11日
    浏览(53)

  • ant design pro v5 - 03 动态菜单 动态路由（配置路由 动态登录路由 登录菜单）

    1 动态菜单         技术思路：配置路由，用户登录后根据用户信息获取后台菜单。 2 动态路由+动态菜单         技术思路： 使用umijs的运行时修改路由 patchRoutes({ routes })  UMIJS 参考文档 ，react umi 没有守护路由的功能 直接在 app.tsx  的 layout 下的 childrenRender 添加守护路

    2023年04月09日
    浏览(36)

  • ant-design-pro-cli 运行pro create myapp报错Error [ERR_REQUIRE_ESM]: require() of ES Module是什么原因？

    根据官方文档全局安装了npm i @ant-design/pro-cli -g，然后运行pro create myapp，命令行出现： 这是什么原因导致的？

    2024年02月12日
    浏览(49)

  • LowCode 低代码平台集成 AI 大模型会产生怎样的化学反应？

    低代码平台（LowCode Platform）是一种新型的应用开发方式，它将应用开发的过程简化为“拖拽组件、配置属性、生成代码”的方式，使得应用开发变得更加简单和快捷。而AI大模型（AI Big Model）则是一种利用深度学习技术构建的大规模神经网络，它可以对海量数据进行训练和预

    2024年02月15日
    浏览(49)
  • vue3+ant design vue+ts实战【ant-design-vue组件库引入】

    vue3+ant design vue+ts实战【ant-design-vue组件库引入】

    🔥🔥更多内容见Ant Design Vue官方文档 🔥点击复习vue3【watch检测/监听】相关内容 👏👏👏一个好项目的编写不仅需要完美的逻辑，以及相应的技术，同时也需要一个 设计规范的高质量UI组件库 。👏👏👏本期文章将会详细讲解 Ant Design of Vue 组件库的 安装、使用、引入 。

    2024年02月02日
    浏览(50)
  • Ant Design入门

    Ant Design入门

    目录 一：什么是Ant Design？ 二：开始使用 三：布局 四：表格         Ant Design 是阿里蚂蚁金服团队基于 React 开发的 ui 组件，主要用于中后台系统的使用。         官网： https://ant.design/index-cn   设计语言： 随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了

    2024年02月02日
    浏览(48)
  • ant design vue 的getPopupContainer

    ant design vue 的getPopupContainer

    在 ant design vue 中，有几个组件是有 getPopupContainer 属性的，比如：下拉菜单 默认是渲染到body 上的，所以如果你想要对 下拉选择组件 的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效 所以，需要指定 getPopupContainer ，用法如下

    2024年02月08日
    浏览(44)
  • Ant Design Form.List基础用法

    Ant Design Form.List基础用法

    项目中需要在新增可以多个如图 代码如下 其中add 方法可以添加参数，为添加的默认参数 注意： {…field} 一定要放在 name={[field.name,‘XXX’]} 的前面，否则就会出错 以上共勉

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包