簡単な紹介：
みなさん、こんにちは。まず自己紹介をさせていただきます。私は未知の小さなプログラマーです。コードを書いたりバグを見つけたりするために毎日走っています。毎日遅くまで寝ていますが、慣れています。 。私が想像することをよく言う人もいます。のプログラマーはこんな感じです
実は
もちろん、本当のプログラマーももちろん、私もこの状態です。アルコールを飲んだり、タバコを吸ったり、1日バグを見つけたりと言う人もいます。すぐに月末になります。簡単に思い出せるように、事前にプロジェクトを要約してください。もちろん、ブログもフォーマットされています。いいえ、それが唯一の方法です。家族が生きているのを見るようになります。
プロジェクトモジュールと機能の紹介：
まず、簡単に説明しましょう。今月のプロジェクトは、コモディティバックエンド管理システムであるpmsとumsの2つのモジュールで構成されています。
もちろん、pmsはコモディティモジュールであり、umsはユーザーモジュールです。このコモディティバックエンド管理システムは、Vue + elementui + SpringBoot + mybatisplus + OSS + JWTなどのフレームワークとプラグインを使用します。
最初にpmsモジュールを紹介します。
PMSは、ブランド管理、製品タイプ、製品分類、製品リスト、および製品の追加に分けられます。
1.ブランド管理
ブランド管理の場合、実際には追加、削除、変更のセットです。違いは何ですか？ブランドロゴがあります。画像のアップロードにはelemrentUIアップロードossサーバーが使用されます。アップロード時に半分をアップロードするのが唯一の問題ですが、ユーザーはアップロードしたくないので、[キャンセル]をクリックしてアップロードされた画像を削除し、削除します。古い写真など。画像を削除する理由ユーザーが[追加]をクリックして画像をアップロードし、アップロード後に[キャンセル]をクリックするため、データベースには画像がアップロードされませんが、ossサーバーにはもう1つの画像があります。アップロードをクリックし続けますか、それはページですか？上の画像は、ページを表示するためにossサーバーにアップロードした後に返される成功関数の値です。ユーザーがユーザーにクリックを求めた場合は、100をクリックして100枚の画像をアップロードしますか？[1000]をクリックし、[追加]をクリックして[確認]をクリックしないと、データベースがありません。サーバーに大量のジャンクデータがありますか？ユーザーがクリックしてキャンセルしても、サーバーデータは引き続き存在しますか？ジャンクデータですか？削除する必要がありますか？
もちろん、答えは削除する必要があります、なぜですか？Ossは、交通料金に応じて、スペース、ジャンクデータを
2つ以上にする必要がないように設定された独自の画像サーバーを使用するためです。新しい法律の爆弾ボックスキャンセル画像のアイデアを削除します。
このプロジェクトが完了すると、フロントエンドとバックエンドの分離プロジェクトになり
ます。機能を実行する前に、まずいくつかの問題を考慮する必要があり
ます。1。ユーザーが次の画像の1をクリックすると、アップロードされた画像が削除されます。番号Xは
2です。ユーザーが次の画像の2をクリックすると、空白部分をクリックしてアップロードされた画像を削除し
ます。3。ユーザーが次の画像の3をクリックすると、送信
時に正常に追加されます。3 。ユーザーが次の画像の4をクリックすると、キャンセルをクリックするとアップロードされた画像が削除されます
ステップ1ゴミの写真をキャンセルするときに削除しますゴミの写真はOssにアップロードされたがデータベースにはアップロードされていない画像です：
（1）まず、グローバルクローズイベントが必要です。 @ close = ""どこをクリックしても、閉じる必要があります。閉じるダイアログをトリガーしてコールバックを閉じ、次にこのイベントを最初に設定します。定義
（2）、次にデータ内の変数を定義します。初期値はnullです。現在のボタン、現在のユーザーがクリックするボタンを決定するために使用され、ユーザーが新しいメソッドをクリックすると、値1が割り当てられます。編集時に編集をクリックすると、値2が割り当てられます。次に、ボックスをポップアップしたときにクリックしてキャンセルするか、Xをクリックしたときにクリックして閉じ、値を3にします。
（3）定義したグローバルメソッドで判断すると、現在の変数が1に等しい場合は新しいメソッドを使用し、そうでない場合は変数が2に等しいと判断し、変更したメソッドを使用します。それ以外の場合はAnyを使用します。方法はキャンセルの方法です。
定義するのが面倒ではないのはなぜですか？@closeイベントのため、このモーダルボックスでは、どこをクリックしてもキャンセルされます。空白の場所をクリックしても、悪いかキャンセルされても、クリックして追加してもキャンセルされます。問題があります。追加する準備ができていますが、クリックして写真を追加または削除しました。これはあまりユーザーフレンドリーではありません。
（4）次のステップは、値を渡し、値を受け取り、メソッドを削除するようにバックグラウンドに要求を送信することです。ossをアップロードした後、画像をossにアップロードした後、アップロード後に成功コールバック関数があります。成功コールバック関数で画像のアドレスを取得し、このアドレスを目的のアドレスに渡すことができますか？ページを受信し、ページをクリックしてから、変数3のメソッドにdeleteメソッドを記述して、背景を送信して画像を削除します。もちろん、ユーザーがクリックしてアップロードすると、パラメーターが渡されたときに配列を使用します。画像はアップロードされているとは限りません削除されたシートの数がループで削除されるため、配列はループで削除されます。削除が成功したら、更新する必要があります。画像はキャッシュに保存されているため、次の場合は再度削除できません。 2回目は更新されません。値は以前の元に
戻す特定のコードのままです。この記事の
手順2を参照してください。変更時に古い画像を削除し、OSSのアップロード後に確認をクリックせずに画像を変更します。OSSにアップロードされた画像を削除します。ジャンク画像の削除は、Ossにアップロードされているが、データベースにはアップロードされていない画像です。
（1）変更するときは、最初にエンティティクラスにある変数を定義します。定義を作成し、フィールドを追加します。これはクエリ専用です。データベースにこのフィールドがありません。ページのdataメソッドのオブジェクトにこのフィールドを追加します。オブジェクトでこのような変数を定義し、表示時にこの変数に配置します。画像の値を表示してからバックグラウンドに移動します。判断のために。バックグラウンドで判断し、まずオブジェクトIDが空ではないと判断し、次に新しい画像と古い画像が空ではなく、新しい画像が古い画像と等しくないことを判断します。等しくない場合は、古い画像。変更するときに、アップロードした新しい画像をクリックしたが、アップロード後にアップロードしたくない場合は、[キャンセル]をクリックし、前のモーダルボックスの前に設定した変数を使用します。もう一度[変更]をクリックすると、[キャンセル]をクリックします。モーダルボックスの値が2に等しい場合、この時点でモーダルボックスに入り、削除します。前の画像が現在の画像と等しくないと判断されます。等しくない場合は、アップロードを削除して削除します。絵。もちろん、削除とバッチ削除は比較的単純なので、ここではあまり説明しません。興味がある場合は、コード削除とバッチ削除をご覧
ください。
2.商品タイプおよび商品分類モジュール
商品タイプモジュールおよび商品分類モジュールの場合、実際には追加、削除、および変更のセットです。図に示すよう
に、タイプデータの属性とパラメーターに焦点を当てると、次のようになります。
（1）クエリの商品タイプと商品分類の2つのモジュール：フィールドのレベルがあり、この商品タイプのランクを区別するために使用されます。この2つのリストの商品と商品パラメータのリストがあります。商品カテゴリ、ポイント第1レベルノードと第2レベルノードです。これら2つの単語と2つのクラスについては、実際には同じです。主なクエリは、現在のIDとそれぞれに表示されるアイテムの数に基づいています。ページのページ。、これら2つのリストの下のリストでもあるため。バックグラウンドでクエリを実行する場合は、現在の分類のデータベースIDに基づいており、現在のIDと同じです。それ以外の場合は、レベルを再びゼロにします。
if(vo.getId() != null){
queryWrapper.eq("parent_id",vo.getId());
}else {
//页面显示为一级的数据
queryWrapper.eq("level",0);
}
（2）追加または変更：追加または変更する場合、フォアグラウンドにレベルフィールドがないため、追加する場合、追加および変更は、第1レベルまたは第2レベルがバックグラウンドで決定されるかどうかに関係なく、バックグラウンドでのみ実行できます。 、彼の分類IDが空に等しくなく、ゼロに等しくない場合は、彼に10億を接続します。これはどういう意味ですか？デフォルトでは、彼はレベル1ノードに接続されます。それ以外の場合は、ゼロが接続されます。 。ゼロはレベル1ノードです。新規デフォルトはレベル1ノードです。
（3）削除：削除時に第1レベルノードのデータノードを削除する場合、その下の第2レベルの子ノードも同時に削除し、バックグラウンドで判定を行います。ゼロの場合、条件に従ってクエリを実行します。彼のカテゴリIDは、現在のデータIDのすべてのデータと同じであり、一度にすべて削除します。
3.製品リストと追加製品はモジュールに属し
ます。1。製品リストは実際には追加、削除、および変更チェックですが、この追加、削除、変更、およびチェックでは、追加製品が含まれています。製品モジュールを追加する場合、それは使用ステップです。それは多くのものを含みます。新しく使用されたのは、製品情報の追加、製品プロモーションの入力、製品属性の入力など、いくつかのページに分割されたステップバーです。
2.製品の追加：製品情報に製品の分類を追加するには、再帰を使用します。まず、バックグラウンド実装でsuper.list（）を介してコレクションを取得し、コレクションに基づいてループ操作を実行し、ループ内にマップコレクションを作成します。 、次にクエリで判断します。カテゴリのIDはpidと同じです。次に、値のレベルをマップに配置し、level = 0と判断し、自分のループを調整して値を配置します。子ノードがない場合、ループは終了します。最後に、子ノードを空にすることはできないと判断されます。返品回収
商品のプロモーション部分には、メンバー価格リスト、ラダー価格リスト、および完全割引価格リストが含まれます。これらはすべて異なるテーブルにあるため、次のように要求されます。データを使用してフォアグラウンドでデータを送信し、@ RequestBodyをバックグラウンドで送信します。注釈を付けてデータを受信し、同時にboパッケージを定義します。メンバー価格リスト、ラダー価格リスト、および完全な割引価格リストのデータ収集を定義します。 boパッケージ。3。
製品属性の新しいモジュールを入力するのが最も難しい場所はSKU属性モジュールです。もちろん、SKUとSPUの違いは、簡単に言えば、SPUはクラスと同等であり、SKUは同等であるということです。図に示すように、オブジェクトに：これはこのプロジェクトのsku部分です
（1）効果：商品属性のドロップダウンボックスのいずれかの項目をクリックすると、商品仕様がトリガーされ、商品仕様に表がポップアップ表示されます。商品仕様で、独自の組み合わせのコンテンツを選択します。 。色を追加できます。追加後、この色を選択し、容量を選択して更新ボタンをクリックすると、下に表が表示され、価格などの必要なデータが表に表示されます。1つの価格を入力し、[同期]をクリックします。価格、および価格内のすべての価格が統一されます。在庫も1つのキーで同期でき、すべてのデータを直接同期できます。SKU番号はバックエンドによって生成され、フロントエンドを入力または変更することはできません。ドロップダウンボックスをクリックすると、製品パラメータも照会されます。
（2）新しいアイデア：[製品属性]ドロップダウンボックスでイベントをバインドし、ドロップダウンボックスをクリックしてイベントをトリガーします。イベントでメソッドを定義し、0に等しいタイプと1に等しいタイプをチェックして、 valパラメータと2つの値メソッド。
注：typeは、エンティティクラス属性のタイプです。0->仕様; 1->パラメータ
はメソッドで接続され、ページングに従って添え字を開始します。各ページにはアイテムの数が表示され、タイプとIDはクエリの背景を入力します属性のデータ、次にクエリされたデータが受信され、変数値に渡されて、値がループに入れられます。
次に、このタイプがゼロに等しい場合、クエリは商品属性であり、変数はループを開始します。ループでは、2つの変数変数配列を定義します。1つは値で、もう1つはオプションです。それぞれです。製品仕様の容量配列と色配列を確認し、追加するか変更するかを決定します。変更する場合は、色を手動で追加したか、データベースからチェックアウトしたかを判断し、データを再利用する必要があります。オプションにidを入力し、判断する現在の属性のIDを取得する必要があります。このメソッドを定義し、データをオプションに分割し、最後に製品仕様属性配列の値をプッシュして、データ表示をループさせる必要があります。
次に、判定タイプが0に等しくない場合、クエリは製品パラメータであり、変数もループを開始します。ループでは、値を定義します= ""、ループしたデータIDを値に入力します。判断する現在の属性のIDを取得します。最後に、製品パラメータ属性配列の値をプッシュしてデータ
をループで表示し、製品仕様に色を入力し、[追加]をクリックすると、メソッドがトリガーされます。属性値を空にすることはできず、属性値を繰り返すことはできないと判断され、手動で追加し、追加後にデータをクリアします。
更新ボタンをもう一度クリックすると、最初に選択した値を取得し、次にそれをテーブルに周期的に配置して表示し、更新ボタンメソッドでデータへの周期的な割り当てを実行します。同期価格と同期在庫は、元の基準で空にすることはできず、長さがゼロより大きいと判断され、サイクルで値が割り当てられます。
良い仕事をすることは、属性値を組み合わせることによってすべてのSKU関連データをマージし、SKUのすべてのデータをループし、最後にIDとデータを含むこれらのデータをループ内のコレクションに入れることです。データは変換されます。彼が購入した製品パラメータのドロップダウンボックスを含む文字列に、ループに入り、データベースに追加するためにバックグラウンドに送信されたIDとデータを含むコレクションに入れます。
（3）振り返ってみる
と、製品のカテゴリドロップダウンボックスは、計算でメソッドを定義し、次にそれをウォッチで定義し、IDに接続して、変更していない場合に戻るかどうかを判断します。変更され、この値を判断しますnewValue == undefined || newValue == null || newValue == 0彼に戻ってもらい、最後に第1レベルノードと第2レベルノードのIDを配列に入れて、値を取得することによる
SKUエコー：計算でメソッドを定義し、次にウォッチで定義し、パラメーターIDを接続し、属性タイプIDに従ってデータを取得するメソッドを定義します。このメソッドは、ドロップダウンをクリックしてトリガーされるメソッドです。ボックス、このメソッドではtype == 0で、変更と等しいと事前に判断された場合、リサイクルが呼び出され、this.handleProductValus（attr [i] .name）によって生成された名前が値に割り当てられます。 。定義メソッドを開始して製品仕様をエコーします
このメソッドでは、空の配列に等しい値を定義し、次に製品のデータコレクションを定義し、変数を定義してから、変数コレクションを空にすることはできないと判断し始めますまたは空の文字列を入力してから、この配列skuList [i] .spDataのループを開始します。取得するのはjson文字列です。次に、JSON.parse（spData）;を使用してjson文字列を配列文字列に変換し、結果の配列をループします。取得した名前の値が配列のKeyと等しい場合、配列の値はに直接変換されます。 values。push（spDataArr [j] .value）;それをvalues配列に入れ、割り込みを解除して、最後にvaluesに戻ります。
エコー積パラメータもメソッドtype == 1にあります。以前に判断された場合、変更と等しい場合は、それを呼び出してリサイクルします。values= this.getProductParams（attr [i] .id）; idを割り当てます。値へのループから外れます。製品パラメータのエコーを開始する方法を定義します。パラメータをエコーする方法を定義し
、食事を取り、values = ""を定義し、取得したすべてのデータセットを定義し、食事IDの場合は、このセットをループします。は彼のセットのIDと同じです。次に、配列のすべての値を値に割り当て、割り込みを解除して、最後に値に戻ります。
以下にumsモジュールについて説明します
ユーザー管理システムには、設計プロセスに5つの主要なテーブルが含まれます。5つのテーブルは、ユーザーテーブル、ロールテーブル、権限テーブル、ユーザーロール関係テーブル、およびロール権限関係テーブルです。ユーザーテーブルとロールテーブルには多対多の関係があり、ロールテーブルと権限テーブルも多数あります。 -多対多の関係。
バックグラウンド管理システムでは、権限管理をユーザー管理、役割管理、権限管理の3つのモジュールに設計しました。
次に、ユーザー管理モジュールについて説明します。ユーザー管理は、ユーザーの追加、削除、変更、確認の操作です。ユーザーリストページにバックグラウンドデータが読み込まれます。ユーザーの追加と変更には、elementuiファイルプラグを使用します。 -inを使用して、ユーザーアバターをアップロードします。このユーザーに役割を割り当てます。
役割管理モジュールについて説明します。役割管理は、役割の追加、削除、変更、およびチェックであり、役割データは役割リストページに表示されます。また、ロールに権限を割り当てることができます。ロールを削除するときに、現在のロールがユーザーに関連付けられているかどうかを判断し、関連付けられている場合は、削除できないことをユーザーに通知します。
最後に、パーミッション管理モジュールがあります。パーミッション管理は、パーミッションの追加、削除、変更、およびチェックです。パーミッションデータはパーミッションリストページに表示されます。削除すると、選択したノードの下のすべての子ノードが削除されます。 。
======次に、ユーザー管理、ロール管理、権限管理の詳細について説明します。======
1.ユーザー管理（ログイン、トークン、検証、トークンの有効期限などを含む）
もちろん、上記のユーザー管理モジュールでは、追加、削除、変更、チェックについて説明しましたが、実際には非常に簡単です。 、elementuiを使用したアバターのアップロードを含め、上記でも説明しました。次に、この割り当ての役割がどのように達成されるかについて簡単に説明します。
このユーザー管理モジュールの操作では、最初に役割を割り当てるためのボタンを記述します。もちろん、役割の割り当てはポップアップボックスを使用して行うことができます。最初にそれを使用します。最初にポップアップボックスを定義し、次にこれらの変数を定義します。 。ボタンをクリックして、機能をトリガーします。
この関数では、引き続きロールのすべての情報をクエリし、バックグラウンドに移動してクエリを実行する必要があります。バックグラウンドでクエリを実行する場合は、ページ付けなしですべてを直接クエリできます。クエリが完了したら、取得したものをallRoleListコレクションに直接詰め込んで循環表示します。
クエリを以下に示しますが、現在のユーザーがデータベースからどのような役割を持っているかを確認する必要もあります。これは、データベースが現在どのような役割を持っているかを示すためだけのものです。ユーザーが持っているロールをエコーする次に、ロール
を再選択するには、データベース内のどのテーブルをチェックする必要がありますか？ユーザーロールアソシエーションテーブルを確認し、現在のユーザーのロールIDを取得してから、エコー用にallocRoleIdsに配置する必要があります。応答をクエリするときは、役割が割り当てられている場所にIDを渡し、データからIDを取得し、以下に進んでIDを受け取り、クエリするIDを提供する必要があります。this.allocAdminId = adminId;同時に、allocAdminIdをidにアタッチします。
次のステップは変更です。割り当てられた役割のポップアップボックスに確認ボタンがあり、選択する役割をクリックしてから、イベントをトリガーします。 、イベントを定義するときに値を割り当て、次に変更する背景を送信します。
データを使用してデータを送信し、バックグラウンドで受信し、
実装クラスで操作し、データベース内の元のデータを一定時間内に削除し、フィールド名に従って削除した後に追加します。これらのデータを自分で選択して、いくつかの変更を完了します。役割。追加されました。
権限の割り当ては役割の割り当てと同じであるため、詳細については説明しません。
=つづく===