ビジネス開発では動的なタグが使用され、動的なフォーム構築が求められました。オンラインでビジュアルフォームデザイナーの例をいくつか見つけましたが、これらはバックエンド管理システムのコードジェネレーターとしても一般的に使用されています。

フォームジェネレーター

1. はじめに

Element UI フォーム デザイナーとコード ジェネレーターは、生成されたコードを Element ベースの Vue プロジェクトで直接実行できます。また、JSON フォームをエクスポートし、付属のパーサーを使用して JSON を実際のフォームに解析することもできます。

• アドレス: https://github.com/JakHuang/form-generator
• プレビュー: https://mrhj.gitee.io/form-generator/#/
• 契約：MIT

2. プレビュー効果

3. 使用

この種の製品を使用する場合、要件が非常にシンプルな場合を除き、カスタマイズが必要になることがよくあります。以下に、二次開発用に修正したディレクトリ構造を示します。

Eページ

Epageは視覚的なページ設定ツールです。関連するフロントエンドフレームワークのコンポーネントライブラリと組み合わせることで、複雑なインターフェースインタラクションを実現できます。業界で主流のコンポーネントライブラリを二次カプセル化し、Epage用の設定可能なウィジェットを作成する予定です。現在、カプセル化しているのはiviewコンポーネントライブラリのみで、その他のコンポーネントライブラリは現在計画段階です。開発者はウィジェットをカスタマイズして開発することもできます。ワークフローフォームやバックエンドのページ設定によく使用されます。

• オープンソースアドレス: https://github.com/didi/epage
• ドキュメントアドレス: http://epage.didichuxing.com/usage/#epage
• オープンソースライセンス: MIT

このプロジェクトは、スキーマベースのビジュアルページ構成ツールで、現在はVueとiViewフレームワークをベースにしています。他のツールとの違いは、実際のプロジェクトで非常に必要とされる値ロジック処理が追加されていることです。

アヴューフォームデザイン

これは、Element-ui のセカンダリ ラッパーである Avue をベースにしたフォーム デザイナーです。

• プロジェクトアドレス: https://github.com/sscfaith/avue-form-design
• プレビューリンク: https://form.beta.kim/
• 契約：MIT

k-フォームデザイン

これはVueとAnt Design Vueをベースに構築されたフォームデザイナーで、スタイル設定の開発言語としてLessを使用しています。主な機能は、簡単な操作で設定フォームを生成し、保存可能なJSONデータを生成し、それをフォームに復元することです。これにより、フォーム開発がよりシンプルかつ迅速になります。

• プロジェクトアドレス: https://gitee.com/kcz66/k-form-design
• プレビューリンク: http://cdn.kcz66.com/k-form-design.html
• オープンソースライセンス: MIT

実は、今のところ実際のプロジェクトでこれを使うことはあまりお勧めしません。このプロジェクトが優れていて、学ぶ価値があると思ったから投稿したのです。お勧めしない理由は、このプロジェクトが現在バージョン1.xのant-design-vueに依存しているからです。ant-design-vueを2.xにアップグレードするのはほぼ革命的な変更であり、Vue 3.0をベースにするには少なくともVue 3.0が必要です。そのため、今のところはプロジェクトで直接使うことはお勧めしません。もちろん、バージョン1.xで十分で、後でアップグレードする必要がないと思われる場合は、試してみる価値はあります。

要約:

上記は今のところリストアップしただけです。個人的には最初のものを二次開発に使用しました。オープンソースではない他のライブラリもいくつかオンライン上に存在しますが、ここではリストアップしません。基本的に同じものです。ドラッグ＆ドロップライブラリのほとんどはvuedraggableライブラリを使用しています。フォームライブラリは一般的に、element-ui、iview、ant-design-vueなどのフレームワークをベースにしています。