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 で特殊文字のファイル名やディレクトリを削除する方法

推薦する

アバターと国旗の統合を実現する1行のCSSコード

今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...

JavaScript配列についてさらに詳しく知るのに役立つ記事

目次1. 配列の役割: 2. 配列の定義: 1. コンストラクタを通じて配列を作成する2. リテラル...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

Vue3.0 + TypeScript + Vite初体験の詳しい説明

目次プロジェクトの作成プロジェクト構造メイン.jsアプリ.vue:設定コンポジションAPI参照反応的...

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

MySQL マスタースレーブレプリケーションプロセスの詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...

jsBridgeの動作メカニズムを1つの記事で学ぶ

目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...

JavaScript 変数の昇格についての簡単な説明

目次序文1. どのような変数が促進されますか? 2. 可変プロモーションがあるのはなぜですか? (1...

LinuxでSVNサーバーを構築する方法

1: SVNをインストールする yum インストール -y サブバージョン2. 倉庫を作る1: 倉庫...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...

Vue でカスタムパスのエイリアスを設定する方法

Vue でカスタム パス エイリアスを設定する方法日常の開発では、モジュールやコンポーネントをインポ...

CSSスプライトの応用の詳細な説明

CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...