vue-element-admin グローバル読み込み待機中

vue-element-admin グローバル読み込み待機中

最近の要件:

グローバルロード、すべてのインターフェースはロード待機機能を表示するかどうかを手動で制御できる必要があります

Baidu で検索してみると、インターセプターに書かれているものが多いことが分かりました。インターセプターでは、要素 ui の読み込みメソッドが呼び出されます。インターフェイスが要求されると読み込みが開始され、インターフェイスが返されるか、インターフェイスがエラーを報告して例外をスローすると、読み込みが終了します。

このアイデアは私のニーズとは少し異なるため、少し変更しました。私たちのニーズは、読み込み待機機能を表示するかどうかを手動で制御することです。手動制御であるため、インターセプターで読み込みメソッドを直接呼び出すことはできません。一歩進んで、インターフェイスを呼び出すときに、読み込みメソッドを有効にするかどうかを制御し始めます。axios の呼び出しを手動でカプセル化する必要があります。以前開発したときに axios をカプセル化しました。コード:

url: インターフェースAPI、

データ: パラメータ

dom: html でクラスまたは id を渡す場合、ロードには js の querySelector 属性メソッドが使用されるため、「./#」を追加する必要があります。この属性は、ロード待ちがページ全体のロード待ちなのか、dom の特定の部分のロード待ちなのかを区別するために使用されます。渡す必要はありません。デフォルトでは、ページ全体がロードされるまで待機します。

bool: 読み込み待機を有効にするかどうかを区別します。必須ではありません。デフォルトでは読み込み待機が有効です。

図では、複数のタイプの axios をカプセル化しています。すべてのリクエストを読み込んで待機する必要はありません。ここでのデフォルトの get リクエストは、顧客に表示する必要のない初期データを読み込むことです。

この記事で追加したパラメータは、読み込みと待機が必要かどうか、グローバルとローカルの読み込みと待機が必要かどうかを区別するためだけです。また、axiosDownload リクエストはファイル ストリーム タイプであり、特別なリクエストです。開発中のデータ処理を容易にするために区別されています。基本的に、この部分はすべて読み込まれて待機する必要があります。データがダウンロード中であることを顧客に通知する必要があるためです。

データを要求する前のメソッドを処理します。要求後の戻りメソッドはインターネット上のものとほぼ同じであり、結果が返されると終了します。

邪魔になる要素を取り除き、インターセプターの本質を直接見る

インターセプターの原理は、リクエストが開始されたときに 1 回インターセプトし、リクエストが返されたときにもう一度インターセプトすることです。インターセプターがインターセプトする前に、ロード待機が処理されています。リクエスト時にロード待機を再度呼び出す必要はありません。インターセプションを返すときに、ロード待機の終了を呼び出すだけで済みます。

以下のように表示されます。

キーのロードと待機方法を見てみましょう。この方法はインターネットで入手できます。これは基本的にインターネットマスターの方法から借用したものです。しばらく経ちましたが、どのマスターのコードだったか忘れてしまいました。マスターのコードを元のアドレスに投稿することはできません。マスターがそれを見て怒らないことを願っています。

このメソッドは基本的にここでグローバル読み込み待機を終了します

vue-element-admin グローバル読み込み待機に関するこの記事はこれで終わりです。vue-element-admin グローバル読み込みに関連するその他のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています
  • vue-element-admin でデフォルト言語を設定する方法
  • vue-element-admin を中国語に変換する方法
  • バックエンド管理システムを構築するためのvue-element-adminの実装手順
  • vue-element-admin ログイン フルプロセス共有

<<:  Tomcat のプレースホルダーによるポート設定方法 (パラメータ指定方式)

>>:  DockerでRedisを使用するための詳細な手順

推薦する

ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装

1. nginx仮想ホストの設定仮想ホストを使用すると、実行する Web サイトごとに個別の Ngi...

Centos8 で Apache httpd2.4.37 を使用して Web サーバーをインストールする詳細な手順

ステップ 1: yum install httpd -y #httpd サービスをインストールします...

js と jQuery での Ajax の使用例の詳細

目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...

HTMLとリソースがどのように読み込まれるかを理解します

このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...

ウェブページ上の小さなスペースに大きな画像を配置する方法

出典: www.bamagazine.comウェブページのバナー、ニュースの見出しの周りのスペース、...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

HTML の META タグの使用に関するヒントの例

HTML メタタグHTML メタタグは、Web ページのコンテンツに関する情報をブラウザや検索エンジ...

Linuxカーネルをコンパイルする方法

1. 必要なカーネルバージョンをダウンロードする2. オペレーティングシステムにアップロードする3....

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

HTML 基本構造_Powernode Java アカデミー

多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィック...

IISとAPACHEはHTTPSへのHTTPリダイレクトを実装しています

7 のMicrosoft の公式 Web サイトから HTTP Rewrite モジュールをダウンロ...