suchen
HeimEntwicklungswerkzeugeIdiotGitHub-Projektfreigabe: 6 sehr wertvolle visuelle Konstruktions-Open-Source-Projekte

GitHub-Projektfreigabe: 6 sehr wertvolle visuelle Konstruktions-Open-Source-Projekte

Zuvor habe ich Technologien und Produkte im Zusammenhang mit der Low-Code-Visualisierung erforscht und auch viele Visualisierungskonstruktionsprojekte geleitet. Der Hauptzweck besteht darin, „die F&E-Kosten des Unternehmens zu senken“ und „den Produktlieferzyklus zu verkürzen“. Entwicklung der Internet-Technologie. Als nächstes werde ich einige sehr wertvolle visuelle Konstruktionsprojekte vorstellen, die Unternehmen bei der digitalen Transformation unterstützen 1 Formularlösung

Was wir oben sehen, ist ein Screenshot des Editors von

Formily. Er wurde vom Alibaba-Technikteam entwickelt und ist vollständig Open Source. Wir können ihn für die Erstellung eines „natürlichen Flusslayouts“ verwenden Wenn Sie Techniker sind, können Sie auch die gewünschten Komponenten anpassen. Derzeit unterstützt

Formily

bereits mehrere Komponentenbibliotheken und Frameworks wie folgt: antdelement

vant
  • semi
  • Also ob Sie sind Egal, ob Sie ein react-Framework-Entwickler oder ein vue-Framework-Entwickler sind, Sie können damit Ihre eigene Formularproduktionsplattform erstellen.
  • Aber der einzige Nachteil ist, dass es nicht freundlich genug ist Für technische Personen ist das Drag-and-Drop beispielsweise nicht möglich. Im natürlichen Flusslayout kann die Position von Elementen nicht vollständig frei verschoben werden, sodass es für einige benutzerdefinierte Szenen oder Szenen mit hoher Freiheit nicht geeignet ist. Das Folgende ist das Architekturdiagramm:

Projektlink: github.com/alibaba /des…react框架开发者还是vue框架开发者, 你都能使用它搭建自己的表单制作平台.

但是唯一的缺点是对非技术人员不够友好, 比如它的拖拽是自然流布局, 元素位置不能完全的自由移动, 所以说对于一些定制化或者自由度高的场景来说就不太适用了, 以下是它的架构图:

项目链接: github.com/alibaba/des…

大家感兴趣的可以学习参考一下.

2. Amis——百度前端低代码框架

amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。

前端开发正变得越来越复杂,学习门槛也越来越高,要使用当下流行的 UI 组件库,我们必须懂  npmyarn, webpackreact/vue等,必须熟悉 ES6 语法,最好还得了解状态管理,比如 Redux,如果没接触过函数式编程,光入门都很费劲,而入门之后会发现它还有巨大的生态,相关的库有 2347 个,很多功能相似,挑选成本高。

为了实现用最简单方式来生成大部分页面,amis 的解决方案是基于 JSON 来配置,它的独特好处是:

  • 不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的;
  • 不受前端技术更新的影响:百度内部最老的 amis 页面是 6 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些页面不是用 amis,现在的维护成本会很高;
  • 可以完全使用可视化页面编辑器来制作页面:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的页面是可以直接上线的

项目链接: github.com/baidu/amis

大家感兴趣的也可以学习参考一下.

3. H5-Dooring——H5页面搭建神器(人人都可傻瓜式制作页面)

H5-Dooring 是一款由国内技术大佬开发的专业级可视化低代码项目, 制作H5页面可以像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode

Jeder Interessierte kann es lernen und sich darauf beziehen.

2 amis code> ist ein Low-Code-Front-End-Framework, das die 🎜JSON🎜-Konfiguration verwendet. Zum Generieren von Seiten können Sie den Arbeitsaufwand bei der Seitenentwicklung reduzieren und die Effizienz erheblich verbessern. 🎜🎜Die Front-End-Entwicklung wird immer komplexer und die Lernschwelle wird immer höher. Um die beliebte <code>UI-Komponentenbibliothek verwenden zu können, müssen wir npm verstehen. yarn, webpack, react/vue usw. müssen Sie mit der 🎜ES6🎜-Syntax vertraut sein und vorzugsweise auch die Zustandsverwaltung verstehen, z Als Redux-Code> ist der Einstieg in die funktionale Programmierung sehr schwierig. Nach dem Einstieg werden Sie jedoch feststellen, dass es ein riesiges Ökosystem gibt >2347-bezogene Bibliotheken haben ähnliche Funktionen und der Auswahlaufwand ist hoch. 🎜🎜Um die meisten Seiten auf einfachste Weise zu generieren, ist die Lösung von amis auf Basis von JSON konfiguriert. Ihre einzigartigen Vorteile sind: 🎜🎜🎜🎜Keine Notwendigkeit, das zu verstehen Front-End🎜: Innerhalb von Baidu haben die meisten amis-Benutzer noch nie eine Front-End-Seite geschrieben und kennen kein JavaScript, können aber professionelle und komplexe Back-End-Schnittstellen erstellen alle anderen Front-End- >UI-Bibliotheken können dies nicht; 🎜🎜🎜von Front-End-Technologie-Updates nicht betroffen🎜: Die älteste amis-Seite in Baidu wurde vor mehr als 6 Jahren erstellt vor Jahren und wird auch heute noch verwendet, die Angular/Vue/React-Version wurde inzwischen aufgegeben und das beliebte Gulp wurde ebenfalls durch Webpackersetzt >. Wenn diese Seiten anstelle von amis verwendet werden, sind die aktuellen Wartungskosten sehr hoch. 🎜🎜🎜Sie können den visuellen Seiteneditor vollständig verwenden, um Seiten zu erstellen nur zum Erstellen statischer Prototypen und amis verwendet werden. Die vom visuellen Editor erstellten Seiten können direkt online gestellt werden🎜🎜🎜Projektlink: github.com/baidu/amis🎜🎜Wenn Sie interessiert sind, Sie können es auch lernen und darauf zurückgreifen.🎜

🎜3. H5-Dooring – H5-Seitenerstellungsartefakt (jeder kann Seiten auf narrensichere Weise erstellen)🎜🎜🎜🎜🎜🎜H5-Dooring🎜 ist ein Professionelle visuelle Low-Code-Projekte, die von inländischen Technologiegiganten zur Erstellung von H5-Seiten entwickelt wurden, können so einfach wie Bausteine ​​sein, und Sie können problemlos H5-Seiten, H5-Websites, PC-Websites und LowCode-Plattformen erstellen Simultaneditor🎜unterstützt mehrere Sprachen🎜 und unterstützt mehrere Rendering-Modi, wie z. B. Smart Grid-Layout, freies Layout, sehr gut geeignet für technisch nicht versierte Personen, Erstellen einer schönen Seite in 10 Minuten, die technische Struktur ist wie folgt: 🎜

Es ist erwähnenswert, dass die Seite, die wir durch Visualisierung auf H5-Dooring erstellt haben, mit einem Klick online sein kann und das Herunterladen des Seitencodes unterstützt, sodass auch Personen ohne technische Kenntnisse die Seite problemlos bereitstellen können Auf Ihrem eigenen Server ist es einfach ein Segen für Nicht-Techniker. Die Plattform iteriert immer noch, um ein besseres Benutzererlebnis zu schaffen.

github.com/MrXujiang/h…

4. mometa – für Der entwickelte Low-Code-Meta-Programmiereditor

mometa ist keine traditionelle Mainstream-Low-Code-Plattform (wie amis/h5-dooring), mometa ist auf Forschung und Entwicklung ausgerichtet und ähnelt eher der visuellen Code-Design-Bearbeitungsplattform <code>dreamweaver und der visuellen Bearbeitung von gui.

Zu den Problemen, mit denen es gelöst wird, gehören: mometa 不是传统主流的低代码平台(如 amis/h5-dooring),mometa 是面向研发的、代码可视设计编辑平台;它更像是 dreamweavergui 可视编辑之于程序员。

它用于解决的问题有:

  • 对低代码平台不形成依赖,二次开发可以无缝进入代码开发模式
  • 同时支持所见即所得的可视编辑,用于提效,提升开发体验
  • 提供物料生态,可自定义物料,提升物料使用体验,提升复用率

mometa 定位更多是 基于程序员本地开发的模式,新增了可视化编码的能力(修改的也是本地的代码文件本身); 它更像是辅助编码工具,而不是 No-Code (amis/h5-dooring) 的平台方案.

项目链接: github.com/imcuttle/mo…

更多特性介绍:

5. V6.Dooring——可视化大屏制作工具

说到数据可视化, 想必大家多多少少稍接触过, 从技术层面谈, 最直观的就是前端可视化框架, 比如:

  • echart
  • antv
  • Chart.js
  • D3.js
  • Vega

这些库都能帮我们轻松制作可视化图表。V6.Dooring 提供了一种设计方案, 可以将不同的可视化图表通过拖拽的方式整合成一张数字化大屏, 极大的降低了开发成本和周期, 加速企业数字化转型, 其技术架构如下:

为了实现产品的易用性, V6.Dooring设计了如下几个核心模块:

  • 拖拽器实现
  • 物料中心设计
  • 动态渲染器实现
  • 配置面板设计
  • 控制中心
  • 功能辅助设计

下面是它的编辑器:

值得注意的是, V6.Dooring 也是由 H5-Dooring 作者主导研发的, 如果大家感兴趣可以研究一下.

6. form-generator——基于Element UI表单设计及代码生成器

Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Elementvue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。

我觉得它和 Formily

  • Es besteht keine Abhängigkeit von Low-Code-Plattformen und die Sekundärentwicklung kann nahtlos in den Codeentwicklungsmodus übergehen
  • Es unterstützt auch die WYSIWYG-Funktionalität . Visuelle Bearbeitung wird verwendet, um die Effizienz und das Entwicklungserlebnis zu verbessern.
  • Materialökologie bereitstellen, Materialien anpassen, das Materialnutzungserlebnis verbessern und die Wiederverwendungsrate erhöhen
mometa Die Positionierung basiert eher auf dem lokalen Entwicklungsmodell des Programmierers, mit der zusätzlichen Möglichkeit der visuellen Codierung (die lokale Codedatei selbst wird ebenfalls geändert); Es handelt sich eher um ein Hilfscodierungstool als um eine Plattformlösung für <code>No-Code (amis/h5-dooring).

Projektlink: github.com/imcuttle/mo…

Weitere Funktionen:

5. V6.Dooring – Visuelles Großbild-Produktionstool

Apropos Datenvisualisierung: Jeder muss schon einmal damit vertraut sein. Aus technischer Sicht ist das Front-End-Visualisierungsframework das intuitivste, wie zum Beispiel:

  • echart
  • antv
  • Chart.js
  • D3.js
  • Vega

  • Diese Bibliotheken können uns dabei helfen, auf einfache Weise visuelle Diagramme zu erstellen. V6.Dooring bietet eine Designlösung, die verschiedene visuelle Diagramme per Drag & Drop in einen großen digitalen Bildschirm integrieren kann, was die Entwicklungskosten und -zyklen erheblich reduziert und die digitale Transformation von Unternehmen beschleunigt wie folgt:🎜🎜 🎜In Um die Benutzerfreundlichkeit des Produkts zu erreichen, hat V6.Dooring die folgenden Kernmodule entworfen: 🎜
    • Drag-Implementierung
    • Material Center Design
    • li>
    • Dynamische Renderer-Implementierung
    • Konfigurationspanel-Design
    • Kontrollzentrum
    • Funktionsunterstütztes Design
    🎜Das Folgende Ist es Herausgeber: 🎜🎜🎜🎜 Es ist erwähnenswert, dass V6.Dooring auch vom Autor von H5-Dooring entwickelt wurde. Wenn Sie interessiert sind, können Sie es studieren.🎜

    🎜6. Formulargenerator – Basierend auf Element UI-Formulardesign und Codegenerator🎜🎜🎜🎜🎜Element UI Formulardesign und Codegenerator, der den generierten Code direkt auf Elementausführen kann > Im vue-Projekt können Sie auch das JSON-Formular exportieren und den passenden Parser verwenden, um JSON in ein echtes Formular zu analysieren. 🎜🎜Ich denke, es ähnelt etwas Formily, beides sind technische Nebenbauprojekte.🎜🎜Projektlink: 🎜github.com/JakHuang/fo…🎜🎜🎜🎜Zusammenfassung🎜🎜🎜Okay, heute Das war's zum Teilen. Wir werden auch in Zukunft hochwertige Nutzungsprojekte und technische Praxis teilen. Wenn Sie gute Vorschläge haben, können Sie uns jederzeit Feedback geben.🎜🎜 (Lernvideo-Sharing: 🎜Grundlegende Programmierung Video🎜)🎜🎜

    Das obige ist der detaillierte Inhalt vonGitHub-Projektfreigabe: 6 sehr wertvolle visuelle Konstruktions-Open-Source-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme
    Dieser Artikel ist reproduziert unter:掘金社区. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
    GIT: Die Technologie, Github: Die PlattformGIT: Die Technologie, Github: Die PlattformApr 28, 2025 am 12:09 AM

    Git ist ein verteiltes Versionskontrollsystem von Linus Torvaz im Jahr 2005, während GitHub eine Online -Kollaborationsplattform ist, die auf Git basiert. Git zeichnet die Dateidatei durch Snapshots und unterstützt Zweigmodelle. GitHub bietet Tools wie PullRequest zur Verbesserung der Zusammenarbeiteffizienz.

    Githubs Zweck: Versionskontrolle, Zusammenarbeit und mehrGithubs Zweck: Versionskontrolle, Zusammenarbeit und mehrApr 27, 2025 am 12:05 AM

    GitHub ist nicht nur ein Versionskontrollwerkzeug, sondern bietet auch Funktionen für Zusammenarbeit, Projektmanagement und Community -Kommunikation. 1) Versionskontrolle: Verwenden Sie Git, um Codeänderungen zu verfolgen. 2) Zusammenarbeit: Senden Sie Codeänderungen über PullRequest. 3) Projektmanagement: Verwenden Sie Probleme und Projektbereiche, um Aufgaben zu verwalten. 4) Community -Kommunikation: Lernen und kommunizieren Sie sie durch Gabel und teilnehmen an Open -Source -Projekten.

    Github vs. Git: Verständnis der wichtigsten UnterschiedeGithub vs. Git: Verständnis der wichtigsten UnterschiedeApr 26, 2025 am 12:12 AM

    Git und GitHub sind verschiedene Tools: Git ist ein Versionskontrollsystem, und GitHub ist eine Online -Plattform, die auf Git basiert. Git wird verwendet, um Codeversionen zu verwalten, und GitHub bietet Zusammenarbeit und Hosting -Funktionen.

    GitHub: Code -Hosting, Zusammenarbeit und VersionskontrolleGitHub: Code -Hosting, Zusammenarbeit und VersionskontrolleApr 25, 2025 am 12:23 AM

    GitHub ist ein auf Git basierendes Verteilungssteuerungssystem, das die Kernfunktionen von Versionskontrolle, Zusammenarbeit und Code -Hosting bietet. 1) Schaffung von Repositorys, Klonen, Veränderungen und Schieben ist die grundlegende Verwendung. 2) Die erweiterte Verwendung umfasst die Verwendung von GitHubactions for Automation, die Bereitstellung statischer Websites in Githubpages sowie die Verwendung von Sicherheitsfunktionen zum Schutz der Code. 3) Häufige Fehler wie Zusammenführungskonflikte, Probleme mit der Berechtigung und Probleme mit der Netzwerkverbindung können durch manuelles Lösen von Konflikten, die Kontaktaufnahme mit dem Lagerbesitzer und die Einrichtung eines Proxy debugugiert werden. 4) Methoden zur Optimierung von Workflows umfassen die Verwendung von Verzweigungsstrategien, automatisierte Tests und CI/CD, Code -Überprüfung sowie die Aufbewahrung von Dokumentationen und Annotationen.

    GIT: Das Tool, GitHub: Der ServiceGIT: Das Tool, GitHub: Der ServiceApr 24, 2025 am 12:01 AM

    Git und GitHub sind verschiedene Tools: Git ist ein verteiltes Versionskontrollsystem, und GitHub ist eine Online -Kollaborationsplattform, die auf Git basiert. Git verwaltet Code über Arbeitsbereiche, temporäre Speicherbereiche und lokale Lagerhäuser und verwendet gängige Befehle wie Gitinit, Gitclone usw. GitHub bietet Funktionen wie Code -Hosting, PullRequest, IssuAtracking usw. zum Erstellen von Repositories, das Pushing Code und die Zusammenarbeit mit Plearquest.

    GIT: Der Kern der Versionskontrolle, GitHub: Social CodingGIT: Der Kern der Versionskontrolle, GitHub: Social CodingApr 23, 2025 am 12:04 AM

    Git und GitHub sind wichtige Tools für die moderne Softwareentwicklung. GIT bietet Versionenkontrollfunktionen, um Code über Repositorys, Filialen, Commits und Merges zu verwalten. GitHub bietet Code -Hosting- und Zusammenarbeit Funktionen wie Probleme und PullRequests. Die Verwendung von Git und GitHub kann die Entwicklung der Entwicklung und die Teamkollaborationsfunktionen erheblich verbessern.

    GIT: Das Versionskontrollsystem GitHub: Die Hosting -PlattformGIT: Das Versionskontrollsystem GitHub: Die Hosting -PlattformApr 22, 2025 am 12:02 AM

    Git ist ein von Linus Torvaz im Jahr 2005 entwickelter Versionskontrollsystem. Github ist eine GIT-basierte Code-Hosting-Plattform, die 2008 gegründet wurde. Git unterstützt Verzweigungen und Fusionen über Snapshot-Verwaltungsdateien, und GitHub bietet Pull-Anfragen, Problemverfolgungs- und Code-Überprüfungsfunktionen, um die Zusammenarbeit der Teams zu erleichtern.

    Git und GitHub: Eine vergleichende AnalyseGit und GitHub: Eine vergleichende AnalyseApr 21, 2025 am 12:10 AM

    Git und GitHub sind wichtige Tools in der modernen Softwareentwicklung. Git ist ein verteiltes Versionskontrollsystem, und GitHub ist eine GIT-basierte Code-Hosting-Plattform. Zu den Kernfunktionen von GIT gehören Versionskontrolle und Filialleiter, während GitHub Zusammenarbeit und Projektmanagement -Tools bietet. Bei der Verwendung von GIT können Entwickler Dateienänderungen verfolgen und zusammenarbeiten. Bei der Verwendung von GitHub können Teams durch Pullrequests und Probleme zusammenarbeiten.

    See all articles

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    Video Face Swap

    Video Face Swap

    Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

    Heiße Werkzeuge

    SAP NetWeaver Server-Adapter für Eclipse

    SAP NetWeaver Server-Adapter für Eclipse

    Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

    SublimeText3 Englische Version

    SublimeText3 Englische Version

    Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

    MantisBT

    MantisBT

    Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

    SecLists

    SecLists

    SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.