クライアントからサーバーAPIへのデータの送信

Question

データメンバとして他のクラスを持つクラスがあります。クラスモデルは別の投稿hereにあります。それは多くのデータメンバーを持っているので、私は他のクラスを作るためにいくつかのメンバーを連れて行きました。私のアプリケーションはHibernateを使ったSpring Server APIで構成され、クライアント側はAngular 2xです。

クライアント側では、ユーザーが入力してサーバーのバックエンドに送信するすべてのデータメンバーを含むフォームがあります。

A）キーと値のペアであるJSONでデータを送信する予定です。 より良い方法がありますか？

B）データをサーバーに送信する前に、クライアント側で同じクラス構造を作成する必要がありますか？

B）私が今苦労しているのは、クライアントがデータを送信したときにサーバー側でデータを再構築し、データベースに保存する前にクラス（例：クーポンクラス）を初期化する方法です。例えば

ユーザーがクーポンがデータとして他のクラスを持っているので、私はデータベースに格納する前クーポンクラスを初期化するために、クライアントからのデータを使用しない方法、クーポンを作成したい場合メンバー。

例えば、私はJSONのようなデータを送信する場合、サーバ側でこのよう

公共ResponseEntity createCoupon（@RequestBodyクーポン券）{}

になりますクーポンを作成するメソッドのシグネチャキーと値のペア、私はこの関数のクーポンパラメータが初期化されるとは思わない。また、データメンバーとして他のクラスも含まれています。

このような状況に対処するのは初めてのことなので、いくつかのガイドラインや良い指針が必要です。

Answer 1

A）私は、データを送信するために計画していますJSONのキーと値のペアです。それを行うより良い方法はありますか？

はい。より良い方法は、 Coupon/Product/Promoグラフに似たJSON構造としてデータを送信することです。 Jacksonを使用してシリアライズ/デシリアライズします。

B）サーバーにデータを送信する前に、クライアント側で同じクラス構造を作成する必要がありますか？

はい。 JavaScriptでも同様のclassesを使用することもできます。何私は今に苦しんでいますが、クライアントがそれらを送信するときに、サーバー側でデータを再構築）し、私はデータベースに保存する前に、私のクラス（例えばクーポンクラス）を初期化するためにそれらを使用する方法です

B）。

最高（少なくとも良い方法）がそれを行うために存在します。それはあなたのコンテキストに依存します：ビジネス要件、あなたのスキル、あなたのチームさえ。

別のモデルグラフ（DTO）を使用してJSONをシリアライズ/デシリアライズします。それは少し難しいです。しかし、将来的には非常に難しい突発的な要件を持つことができます。

正しい方法を試して選択する必要があります。 （それが製品IDを検証するには良い場所です）Couponを作成し、IDSで/負荷の製品を得る：だからあなたは、クライアント側からCouponModelを取得すると、あなたが必要となる最も単純なケース

class CouponModel { 

    String onlineCode; 

    List<String> productIds; 

} 

から開始することができます。

他のオプション：

class CouponModel { 

    String onlineCode; 

    List<ProductModel> products; 

} 

ProductModelはclient sideのためだけのIDを持っている - >server sideあちこちserver side完全な製品データを持っている - >client sideを。

Answer 2

）JSONオブジェクトは、APIを扱うための標準であり、多くの場合、req.bodyは文字どおりのオブジェクトですが、JSONオブジェクトに限定されません。

B/C）これはあなたとあなたのクライアントの好みに関するものです。前と後はどちらもクラス定義が一般的に進む限り別々に処理されますが、再利用オブジェクトのクラス構造を作成して、データが期待どおりに正確に処理されるようにすることがベストプラクティスです。それは堅牢なフェールセーフであり、従うべき良い習慣ですが、それは必須条件ではありません。

注：バックフルtypescriptですフロント及び（角度/ノード）を使用して、APIのフロント/バッククラス構造の固体の例は、ここで見つけることができます：https://github.com/DavideViolante/Angular-Full-Stack