フロントエンドの開発業務において、フォーム開発は大きなウェイトを占めています。フォームページやレポートページは、ミドルエンドやバックエンド業務の主要な表示形式ですが、業務の複雑化に伴い、フォーム開発やメンテナンスはフロントエンドエンジニアにとって避けて通れないペインポイントになっています。
現在のフォーム開発の主な問題点は以下の通りです。
- フォームの状態管理は、ビジネスが複雑になるにつれて維持が難しくなり、状態管理ライブラリの導入が必要になります。
- 従来の帳票開発のデータ構造はフラットなものが多く、ネストした複雑なデータをうまく扱うことができません。
- ビジネスでフォームを動的に出力する必要がある場合、特定のデータプロトコルに基づいてフォームを動的に出力するコンポーネントを開発する必要があります。
- ビジュアルインターフェースで出力フォームを設定する必要がある場合、jsonベースの動的出力フォームコンポーネントを自分で開発する必要があります。
VSchemaFormのソリューション
UFormにインスパイアされ、VSchemaForm Vueフォームソリューションを開発しました：
- json を使用したフォーム内容の記述
- マルチプラットフォームのサポート
- 複数のコンポーネントライブラリをサポート
- ネストされたフォームのサポート
- 任意データの配列分解をサポート
- 複雑なレイアウトのサポート
- フォームの各項目のデータリンクを統一するための副作用関数をサポート。
- カスタムデータ変換を削減するためのデータ分解のサポート
- フォーム検証のサポート
これは完全なフォームソリューションで、サードパーティのライブラリには一切縛られていません。プロジェクトのドキュメントアドレスはプロジェクトのホームページ、githubアドレスはgithub.com/vu...
フォームの記述にJSONを使用
{
fields: {
card: {
type: 'card',
props: {
title: '基本情報'
},
fields: {
basic: {
type: 'object',
fields: {
str: {
type: 'string',
title: 'フィールド1'
},
num: {
type: 'number',
title: 'フィールド2'
},
date: {
type: 'date',
title: 'フィールド3'
}
}
}
}
},
detailCard: {
type: 'card',
props: {
'title': '詳細情報
},
fields: {
detail: {
type: 'object',
props: {
labelCol: 8,
wrapperCol: 12
},
fields: {
gridLayout: {
type: 'grid',
layout: [6, 11],
props: {
gutter: 10,
title: 'フィールド3'
},
fields: {
field3Num: {type: 'number'},
field3Date: {'type': 'date'}
}
},
gridLayout2: {
type: 'grid',
layout: [6, 16],
props: {gutter: 10, title: 'オブジェクトフィールドの},
fields: {
objNum: {type: 'number'},
'[startDate,endDate]': {type: 'daterange'}
}
},
textbox: {
type: 'text-box',
title: 'テキストの連結,
layout: ' %s元/チケット払い戻し%s元/チケットの変更%syuan/ticket'を参照のこと。,
fields: {
text1: {
type: 'number',
default: 10,
required: true
},
text2: {
type: 'number',
default: 20,
required: true
},
text3: {
type: 'number',
default: 30,
required: true
}
}
},
field4: {
type: 'string',
title: 'フィールド4'
},
section: {
type: 'object',
props: {
title: '
},
fields: {
field5: {
type: 'string',
title: 'フィールド5'
},
field6: {
type: 'string',
title: 'フィールド6'
}
}
}
}
}
}
}
}
}
これはより複雑なフォームレイアウトの例で、レイアウト効果は以下の通りです：
マルチプラットフォームのサポート
デスクトップとモバイルはplatform属性を指定するだけで、レスポンシブ・システムではレスポンシブ・レイアウトの効果を得るために必要な属性は1つだけです。
副作用の処理
フォームの副作用、つまり、フォームフィールドのリンク、チェック、非同期ロジックによって生成される内部イベントは、どのようにロジックの副作用をよりよく管理し、維持するか、それはrxjsの最大の利点であるため、ソリューションはロジックの副作用を管理するためにrxjsを使用します。
フォームのAPIには、フォームの副作用関数であるエフェクトが含まれています。このエフェクトは非常に強力なコールバック関数で、セレクタ関数をパラメータとして受け取り、セレクタを使用してフォーム内の任意の1つまたは複数のフィールドを選択して状態変更を行うことができます。非同期ロジックがあっても、様々な非同期環境でフィールドの状態を簡単に変更できるので、フォームの連携は空間と時間に制限されません。
効果の例
const effects = ($: EffectsContext) => {
$('s1').onFieldChange(value => {
$('s2').value(value);
});
$('s1').onFieldChange(value => {
if (value !== '3') {
$('s3', 's4'). hide();
} else {
$('s3', 's4').show();
}
});
}
上記のコード例では、フォームに4つの入力コンポーネントs1,s2,s3,s4があり、2つのイベントが登録されています：
- s1の値が変わったら、s1の値をs2にコピー
- s1の値が変化したとき、値が'3'に等しければs3とs4が表示され、そうでなければ非表示になります。
サイドエフェクト関数には、値の割り当て、イベントのリスニング、プロパティの変更、非表示/表示などに限らず、より強力な機能がたくさんあります。
フィールドの分解
通常、日付範囲コンポーネントを使用する場合、コンポーネントによって生成された値は配列ですが、多くの場合、サーバー側は、ストレージを行うには、startDate、endDateの方法は、フロントエンドが変換するために多くのエネルギーを費やすたびに、実際には、コストはまだ非常に高いです。したがって、簡単に問題を解決するために、フィールドの分解を使用することができます。さらに、県や市などの他のオプションがあります。
{
fields: {
'[start, end]': {
type: 'daterange',
title: '時間範囲'
},
'[province,city,town]': {
type: 'cascader',
title: '都道府県と市区町村',
placeholder: '選択する,
enum: this.options
}
}
}
上の図は、脱構築を使用したフォームのスキーマ記述で、入力コンポーネントは2つしかありませんが、実際のデータ形式は次のとおりです：
{
"start": "2019-11-18T00:15:10.495Z",
"end": "2019-11-18T00:15:10.495Z",
"province": "jiangsu",
"city": "nj",
"town": "gl"
}
レイアウトサポート
線形レイアウト
構成
編集モードと詳細モードの切り替え
詳細モードに直接切り替え可能
データ検証
データのサポート
フォームセクションのカスタマイズをサポート
スロットを使用して、カスタムコンテンツを使用して部分的なフォームコンテンツを実現します。
上記はVSchemaFormの主な機能であり、その他の機能についてはプロジェクトのホームページをご覧ください。
