Teknologian jakaminen

(Jatkuu edellisestä artikkelista) Luo käyttöliittymään muuttuja päivittääksesi käyttöliittymän napsautusten määrän reaaliajassa

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Jotta käyttöliittymäsivun napsautusmäärät päivitettäisiin reaaliajassa, käyttöliittymässä on todellakin tarpeen ylläpitää muuttujaa nykyisen napsautusten määrän tallentamiseksi.Tämä muuttuja on yleensä Vue-komponentissadataVaihtoehdot määritellään komponentissa ja päivitetään komponentin elinkaarimenetelmissä tai tapahtumakäsittelijöissä.

Tässä on perusvaiheet tämän toiminnon käyttöönottamiseksi:

  1. Määrittele muuttujat: Vue-komponentissadataMääritä funktioon muuttuja napsautusten määrän tallentamiseksi.

  2. Alusta napsautusten määrä: komponentissamountedHookissa voit saada alkuperäisen napsautusten määrän taustajärjestelmästä AJAX-pyynnön kautta ja määrittää sen tälle muuttujalle.

  3. Bind click -tapahtuma: Sido Vue-mallissa napsautustapahtuma elementtiin, jonka klikkausten määrä on laskettava, ja päivitä muuttuja tapahtumakäsittelijätoiminnossa.

  4. Lähetä pyyntö taustajärjestelmään: Napsautustapahtuman käsittelytoiminnossa käyttöliittymämuuttujien päivityksen lisäksi sinun on lähetettävä taustalle pyyntö ilmoittaaksesi taustalle, että klikkausten määrä on kasvanut.

  5. Live päivitys : Kun taustaohjelma vastaanottaa pyynnön, se päivittää tietokannan napsautusten määrän. Jos sinun on päivitettävä useiden käyttäjien välisten napsautusten määrä reaaliajassa käyttöliittymäsivulla, taustajärjestelmän on tarjottava mekanismi (kuten WebSocket), joka lähettää uusimman napsautusmäärän kaikille online-asiakkaille.

  6. Näytä napsautukset: Käytä Vue-mallissa datasidontaa napsautusmäärämuuttujan sitomiseen DOM-elementtiin sivulla näytettäväksi.

Seuraavassa on yksinkertainen Vue-komponenttiesimerkki, joka näyttää kuinka muuttujaa käytetään napsautusten määrän päivittämiseen reaaliajassa: