Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Tietojen Hakeminen ja Näyttäminen | Datan Hakeminen ja Näyttäminen Next.js:ssä
Next.js 14 -osaaminen Modernien Web-sovellusten Rakentamiseen

bookHaaste: Tietojen Hakeminen ja Näyttäminen

Keskitytään seuraavaksi komponenttiin LatestInvoices. Sen tarkoituksena on näyttää viisi viimeisintä laskua, järjestettynä aikajärjestyksessä päivämäärän mukaan.

Saatat ajatella, että tämän toteuttaminen JavaScriptillä on yksinkertaista. Sovelluksen kasvaessa ja datamäärän lisääntyessä on kuitenkin suositeltavaa hoitaa laskujen järjestäminen ja rajaaminen SQL:n avulla. Näin vältetään tarpeettomat laskutoimitukset frontendissä.

Tutustuaksesi fetchLatestInvoices-funktioon, siirry tiedostoon app/lib/data.ts.

Takaisin projektiin

Käytämme fetchLatestInvoices-funktiota dashboard-sivulla hakeaksemme uusimmat laskut ja näytämme ne LatestInvoices-komponentilla.

Muista siirtyä tiedostoon app/ui/dashboard/latest-invoices.tsx ja poistaa kommenttimerkinnät annetusta käyttöliittymästä.

Haaste

Nyt on sinun vuorosi hakea data ja esittää tiedot käyttäjälle.

Pääasiassa käytössä on Card-komponentti kojelautasivulla. Tehtävänäsi on tuoda fetchCardData-funktio, joka tarjoaa:

  • numberOfSellers;
  • numberOfInvoices;
  • totalFulfilledInvoices;
  • totalAwaitingInvoices.

Haetun datan perusteella poista kommentointi vastaavalta Card-komponentilta.

Tulos

Käytännössä

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 3

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain how the fetchLatestInvoices function works?

Where can I find the LatestInvoices component code?

What should I do if the LatestInvoices component doesn't display any data?

Awesome!

Completion rate improved to 2.08

bookHaaste: Tietojen Hakeminen ja Näyttäminen

Pyyhkäise näyttääksesi valikon

Keskitytään seuraavaksi komponenttiin LatestInvoices. Sen tarkoituksena on näyttää viisi viimeisintä laskua, järjestettynä aikajärjestyksessä päivämäärän mukaan.

Saatat ajatella, että tämän toteuttaminen JavaScriptillä on yksinkertaista. Sovelluksen kasvaessa ja datamäärän lisääntyessä on kuitenkin suositeltavaa hoitaa laskujen järjestäminen ja rajaaminen SQL:n avulla. Näin vältetään tarpeettomat laskutoimitukset frontendissä.

Tutustuaksesi fetchLatestInvoices-funktioon, siirry tiedostoon app/lib/data.ts.

Takaisin projektiin

Käytämme fetchLatestInvoices-funktiota dashboard-sivulla hakeaksemme uusimmat laskut ja näytämme ne LatestInvoices-komponentilla.

Muista siirtyä tiedostoon app/ui/dashboard/latest-invoices.tsx ja poistaa kommenttimerkinnät annetusta käyttöliittymästä.

Haaste

Nyt on sinun vuorosi hakea data ja esittää tiedot käyttäjälle.

Pääasiassa käytössä on Card-komponentti kojelautasivulla. Tehtävänäsi on tuoda fetchCardData-funktio, joka tarjoaa:

  • numberOfSellers;
  • numberOfInvoices;
  • totalFulfilledInvoices;
  • totalAwaitingInvoices.

Haetun datan perusteella poista kommentointi vastaavalta Card-komponentilta.

Tulos

Käytännössä

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 3
some-alt