从用户上传的模板动态创建 UI 组件

Dynamically create UI Components from User Uploaded Templates

提问人:SK3 提问时间:7/9/2020 更新时间:9/9/2020 访问量:545

问:

TL的;DR:需要从用户提供的自定义模板动态创建 UI 页面。这些模板应包含足够的信息,以便可以为所有用户案例动态创建前端和后端。

将 TLDR 保持在顶部。另外,我不确定以前是否在这里问过这个问题,如果这是一个重复的问题,很抱歉。

一点背景,我正在尝试创建一个基于 Angular 7 的 Web 应用程序,该应用程序将作为用户配置网络设备(路由器、交换机等)的单一界面。为了涵盖尽可能多的不同设备和供应商,我不能使我的 UI 页面静态。它们应该能够根据用户要求和规范进行更改。

为了实现这样的目的,通用逻辑指出,我们应该让用户为其数据和数据属性创建自定义模板,然后让他们将其上传到门户,以便可以从那里动态呈现 UI。

例如,对于某些复杂的配置,用户 A 可能需要一个包含 2 个输入参数(设备名称和 IP 地址)的表单,而同一组织中的用户 B 可能需要一个包含 N 个输入参数、M 下拉列表等的表单。

因此,最后要问一个问题,如果您的页面不能是静态的并且必须根据用户的要求进行更改,那么生成 UI 页面的最佳方法是什么?如果我们使用用户上传的模板,这些模板应该包含哪些信息?

我现在正在使用 Angular 7 来构建我的应用程序,但我在这方面很灵活。在这里寻找想法和头脑风暴。

JavaScript TypeScript Angular7 模板化 Dynamic-UI

评论

0赞 dataman 8/25/2023
我想看看你使用什么库的更新。

答:

1赞 SK3 9/9/2020 #1

答案是实现数据驱动的 UI。对于像我这样的初学者来说,NPM - Data Driven UI 是一个很好的起点。
为了满足我的用例,我实现了一个 Java 平台,根据用户输入生成我的 UI 元数据,然后将其馈送到 UI 以生成围绕中心模式/主题的网页。