Vue ページ監視ユーザープレビュー時間機能実装コード

Vue ページ監視ユーザープレビュー時間機能実装コード

最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対するユーザーのプレビュー時間を把握する必要があるという要件があります。当初は、Vue ページのライフサイクル機能でmounteddestroyedを使用して、開始とクリアのタイミングのロジックを追加し、バックグラウンド インターフェイスを通じて対応するトレーニング マテリアルの時間データを報告することで目標を達成することを考えました。

アイデアを念頭に置いて、具体的なコードの計画を開始できます。

開始と終了のタイミング関数を定義する

dataでは、変数を介してタイマーを定義し、 this.timerを介してどこからでもアクセスできるようにしています。これは、後でページが破棄されるときにタイマーをクリアするのに便利です。

duration 、0 に初期化される期間のカウント変数です。単位は、タイマーの 2 番目の時間間隔パラメータに基づいて、秒またはミリ秒として決定できます。

エクスポートデフォルト{
  データ() {
    戻る {
      タイマー: null、
      期間: 0
    }
  },
  メソッド: {
    スタートタイマー() {
      this.timer = setInterval(() => {
        console.log('視聴時間: ', this.duration)
        this.duration++
      }, 1000)
    },
    ストップタイマー() {
      クリア間隔(this.timer)
      this.updateViewHistory() // レポートデータインターフェース},
    ビュー履歴の更新(){
    // インターフェイス ロジック コードを報告します....
    }
  }
}

startTimer関数では、表示される時間が正しいことを確認するために、 duration変数を出力します。

電話をかける方法と場所

開始メソッドと終了メソッドを定義した後、それらをどこで呼び出すかを考え始める必要があります。プレビュー ページのコンテンツは一意ではないため、詳細を取得するためにマテリアルのidに基づいてレンダリングされます。 mountedライフサイクルにstartTimerを記述すると、異なるidを持つページにアクセスしたときに、必要なロジックを正常に切り替えることができなくなります。

そこで、異なるページをプレビューするときに開始ロジックと終了ロジックを切り替えるために、ルート内のidパラメータをリッスンすることを選択しました。

時計:
    $ルート: {
      即時: true、
      ハンドラ(to, from) {
        if (to.params.id) this.trainingId = to.params.id
        this.startTimer()
      }
    }
  }

開始タイミングメソッドが呼び出され、最終的にconsole logに現在の期間の出力が表示されます。

次に、最後のステップとして、 stopTimer関数を呼び出してタイマーをクリアし、ページが破棄されたときにデータを報告する必要があります。

プレビュー ページはwindow.openを通じて開かれる独立したタブであるため、 destroyedライフサイクル関数を通じて監視されます。ルーティング メソッドを介してジャンプが行われた場合、ページを離れるときに、 destroyed介してリッスンする前に、そのページを破棄する必要があります。

マウント() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  破壊された() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  }

windowリスナーメソッドを介して間接的にstopTimerメソッドを呼び出す

メソッド: {
    beforeunloadHandler (e) {
      this.stopTimer()
    }
}

独自のロジックを分離して、 destroyed内の他のロジックと混ざらないようにするために、 destroyed内でstopTimerメソッドを直接呼び出さないのはなぜかと疑問に思う人もいるかもしれません。コードの可読性と保守性を向上させます。

コードを書くときは、機能を実装するだけでなく、さらに考える必要があります。これが一般人と専門家の違いです。

これで、Vue ページのユーザー プレビュー時間の監視に関するこの記事は終了です。Vue のユーザー プレビュー時間の監視に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはルートの変更を監視し、App.vueファイル内のページを更新します。
  • Vueはページの更新と閉じる機能を監視します
  • vueアプリ。vueのパブリックコンポーネントは値を変更して他のコンポーネントまたは.vueページのリスニングをトリガーします。
  • Vueがポップアップしたら、携帯電話のリターンキーを押してポップアップ機能を閉じます(ページはジャンプしません)
  • vue.js を使用してページ コンポーネントのスクロール イベントを監視する方法
  • vue-router を使用してページを切り替えるときのスクロールバーの位置とスクロール リスナー イベントの詳細な説明

<<:  MySQL 5.7.19 winx64 無料インストールバージョン設定チュートリアル

>>:  Linux で特殊文字のファイル名やディレクトリを削除する方法

推薦する

MySQL の大きなテーブルで大量のデータを一括削除する方法

質問はhttps://www.zhihu.com/question/440066129/answer...

ハイパーリンクに関するいくつかの質問

ポテトチップスパーティーのこのエピソードに参加して、何人かの友人に会えてとても嬉しいです。思いがけず...

js での Object.create インスタンスの使用法の詳細な説明

1. Object.create() メソッドを使用して新しいオブジェクトを作成し、既存のオブジェク...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

Windows 10 で MySQL を完全に削除してアンインストールする方法

序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...

元のPATHを上書きしてコマンドが見つからないというメッセージが表示されるコマンド失敗の問題を解決する方法

同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

XHTML の IE 条件付きコメント

<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...

HTML テーブル マークアップ チュートリアル (2): テーブル境界属性 BORDER

デフォルトでは、テーブルの境界線は 0 ですが、テーブルの境界線を設定できます。基本的な構文<...

Vue で Axios 非同期リクエスト API を使用する方法

目次基本的なHTTPリクエストの設定async/await を使用した Axios Axios によ...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

MySql マスタースレーブレプリケーションの実装原理と構成

データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...

単一のdivの正多角形変換を実現する純粋なCSS

前回の記事では、beforeとafterの擬似要素を使用してMaterial Designスタイルの...

TypeScript の関数

目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...