Luo lasku - vaihe vaiheelta

1. Luo lomake: Tarvitsemme ensin lomakkeen tietojen keräämistä varten. Tähän käyttäjä syöttää uuden laskun tiedot;
2. Käytä palvelintoimintoa: Luo erityinen palvelintoiminto lomakkeen tietojen käsittelyyn. Kun joku täyttää lomakkeen, tämä toiminto käynnistyy;
3. Hae tiedot lomakkeelta: Palvelintoiminnon sisällä poimi tiedot lomakkeelta. Ajattele tätä kuin laatikon avaamista – haluat nähdä, mitä sisällä on;
4. Tarkista ja valmistele tiedot: Tarkista tiedot ja varmista, että kaikki on kunnossa. Tämä on kuin reseptin ainesosien tarkistamista – niiden tulee olla tuoreita ja oikeita. Kun kaikki on kunnossa, valmistele tiedot tietokantaan tallennettavaksi;
5. Lisää tiedot: Lisää tiedot tietokantaan;
6. Päivitä välimuisti ja palaa laskut-sivulle: Tietojen lisäämisen jälkeen päivitä välimuisti. Tämä varmistaa, että kaikilla on uusin tieto. Ohjaa sitten käyttäjä takaisin laskut-sivulle, jotta hän näkee juuri luodun laskun.

Takaisin projektiin

1. Luo lomake

Luo uusi kansio nimeltä 'create' hakemistoon app/dashboard/invoices. Luo uusi tiedosto nimeltä page.tsx tähän kansioon. Tämä tiedosto toimii uutena sivuna, jonka avulla käyttäjät voivat luoda laskun.

Kopioi ja liitä seuraava koodi tiedostoon page.tsx:

Sivu käyttää palvelinkomponenttia käyttäjätietojen keräämiseen ja lähettää ne valmiiseen <Form>-komponenttiin. Tässä on erittely <Form>-komponentista:

• Pudotusvalikko käyttäjille;
• Syötekenttä summalle;
• Valintapainikkeet tilalle;
• Lähetä-painike viimeistelyyn.

Kun napsautat "Create Invoice" -painiketta, sinut ohjataan lomakkeeseen, jossa sinua pyydetään täyttämään tarvittavat tiedot.

2. Käytä palvelintoimintoa

1. Siirry lib-hakemistoon;
2. Luo uusi tiedosto nimeltä actions.ts;
3. Lisää 'use server' -direktiivi tiedoston alkuun;
   • Miksi 'use server'? - Sen avulla funktiot ovat monipuolisia ja käytettävissä sekä Client- että Server-komponenteissa. Tämä on kätevä tapa organisoida palvelintoiminnot, mutta voimme myös sisällyttää ne suoraan Server-komponentteihin tarvittaessa.
4. Palvelintoimintofunktion luominen.

Seuraavaksi tuo <Form>-komponentissa createInvoice tiedostosta actions.ts. Lisää action-attribuutti <form>-elementtiin ja kutsu createInvoice-toimintoa.

3. Tietojen hakeminen lomakkeesta

Palaa tiedostoon app/lib/actions.ts ja pura formData-arvot käyttämällä .get(name)-metodia. Kun olet suorittanut tämän tehtävän, voit täyttää lomakkeen ja tarkastella syötettyjä tietoja terminaalikonsolissa.

Tulos:

4. Tarkista ja valmistele tiedot

Ennen kuin tallennat lomakkeen tiedot tietokantaan, on tärkeää varmistaa, että ne ovat oikeassa muodossa ja oikeantyyppisiä. Kurssillamme olemme käyttäneet tiettyä muotoa invoice-taulun tiedoille.

Tämän prosessin helpottamiseksi meillä on muutamia vaihtoehtoja tyyppien validointiin. Sen sijaan, että tarkistaisimme tyypit manuaalisesti, voimme käyttää Zodia, TypeScript-ensimmäistä validointikirjastoa. Se on kätevä työkalu, joka yksinkertaistaa validointitehtävää.

Näin toimimme actions.ts-tiedostossa:

1. Tuo Zod actions.ts-tiedostoon;
2. Luo Zodilla skeema, joka vastaa lomakeobjektin rakennetta. Tämä skeema toimii sääntönä, joka varmistaa, että formData on oikea ennen tietokantaan tallentamista.

Tämän jälkeen välitämme rawFormData-datan CreateInvoice-funktiolle tyyppien validointia varten.

Muunna summa senteiksi ja luo uusi päivämäärä muodossa "YYYY-MM-DD" käyttämällä tavallista JavaScriptiä.

5. Datan lisääminen

Nyt kun kaikki tarvittavat arvot ovat saatavilla, voidaan käyttää sql-komentoa tietojen tallentamiseen tietokantaan.

6. Välimuistin päivitys ja palaaminen laskuihin

Next.js sisältää hyödyllisen ominaisuuden nimeltä Client-side Router Cache. Se seuraa, missä käyttäjät ovat liikkuneet sivustolla tietyn ajan. Tämä välimuisti yhdessä esilatauksen kanssa mahdollistaa nopean siirtymisen eri sivujen välillä ilman, että palvelinta kuormitetaan liikaa pyynnöillä.

Tässä on, mitä haluamme tehdä:

1. Koska laskusivun dataa on päivitetty, haluamme varmistaa, että käyttäjät näkevät ajantasaiset tiedot. Tämä tehdään tyhjentämällä välimuisti revalidatePath-funktion avulla. Näin varmistetaan, että palvelimelle lähetetään uusi pyyntö ja saadaan tuoreimmat tiedot;
2. Kun data on päivitetty ja välimuisti tyhjennetty, haluamme ohjata käyttäjän sujuvasti takaisin laskusivulle. Tämä toteutetaan käyttämällä redirect-funktiota. Se on kuin opastaisimme käyttäjän takaisin aiempaan sijaintiin.

Käytännössä