Lepršanje: Kako napraviti CRUD s PostgreSQL-om? 2. dio

Danas ću podijeliti uzbudljive teme poput:

  • Kako izgraditi RESTful api na web poslužitelju pomoću Dart i Aqueduct s integracijom Postgresql.
  • Kako izgraditi Flutter mobilnu aplikaciju i obavljati osnovne CRUD funkcije pomoću Aqueduct aplikacije. Ovdje si

Iz prethodnog posta, podijelio sam kako postaviti svoj web poslužitelj da implementira RESTful api koristeći Aqueduct s Postgresql. U ovom postu počet ćemo graditi našu lepršavu aplikaciju za interakciju s našom web aplikacijom.

Kako postaviti projekt Flutter

Stvorite novi Flutter projekt poziva flutter_crud_demo. Ako koristite Visual Studio Code, možete kreirati novi projekt Pregledom> Naredba palete> Flutter New Project> Unesite naziv projekta> Odaberite direktorij da biste spremili svoj projekt. Kad se radni prostor učini inicijalizacijom, izbrišite widget_test.dart i ispraznite sadržaj main.dart.

Funkcija čitanja

Budući graditelj

Budući graditelj omogućava nam prikaz popisa čim dobijemo popis podataka asinkrono. Budući graditelj ima 2 parametra, jedan je budućnost koja je buduća metoda koju koristimo za dohvaćanje popisa podataka, a drugi je graditelj što je ono što želimo graditi s podacima. Korištenje budućeg graditelja omogućava nam pokazati korisniku CircularProgressIndicator prije nego što podaci budu spremni i prikazuje ListView kada je dohvaćanje izvršeno. Na našem tijelu skele zamijenite sljedećim kodom.

karoserija: novi kontejner (
  dijete: novi FutureBuilder > (
    budućnost: getAll (),
    graditelj: (kontekst, snimka) {

      ako (snimak.hasData) {
        vrati novi ListView.builder (
          itemCount: snapshot.data.length,
          itemBuilder: (kontekst, indeks) {
            vrati novi stupac (
              crossAxisAlignment: CrossAxisAlignment.start,
              djeca:  [
                novi tekst (snapshot.data [indeks] .ime,
                  stil: novi TextStyle (fontWeight: FontWeight.bold)),
                novi razdjelnik ()
              ]
            );
          }
        );
      } else if (snimak.hasError) {
        vrati novi tekst ("$ {snapshot.error}");
      }

      // Prema zadanom, prikažite centrifugu za učitavanje
      vrati novi CircularProgressIndicator ();
    }
  ),
),

Zatim moramo implementirati getAll () metodu kako bismo preuzeli popis heroja s našeg web poslužitelja. Naša metoda vraća popis vrsta heroja Futureof. Unutar funkcije zovemo i awaithttp.get (_heroesUrl). Čekanje omogućava da čekamo odgovor prije nego što prijeđemo na sljedeći redak. Funkciju getAll () treba označiti async-om kako bi se mogla koristiti "wait" unutar metode. Iz odgovora dohvatimo tjelesnu poruku i pretvaramo se u našu

Budućnost > getAll () async {
  konačni odgovor = pričekajte http.get (_heroesUrl);
  ispis (response.body);
  Popis responseJson = json.decode (response.body.toString ());
  Popis  userList = createHeroesList (odgovorJson);
  vratiti popis korisnika;
}

Moramo uvesti neke biblioteke za neke pomoćne funkcije.

import 'dart: pretvoriti';
import 'dart: async';
import 'paket: http / http.dart' kao http;

Stvorimo heroj klase. Ova klasa sadrži cijeli broj za id i niz kao ime.

klasa Hero {
  Hero ({ovo.id, ovo ime});
  final int id;
  Ime niza;
}

Unutar klase _MyHomePageState, dodajte statički const _heroesUrl da sadrži naš URL lokalnog domaćina.

static const _heroesUrl = 'http: // localhost: 8888 / heroji';

Pokrenimo aplikaciju Flutter Također ne zaboravite pokrenuti aplikaciju za svoj web poslužitelj naredbom aqueduct serve.

Popis junaka možemo pronaći u našoj aplikaciji Flutter

Funkcija brisanja

Od ovog trenutka nadalje, uvest ćemo enum za pohranjivanje statusa bilo kojeg http zahtjeva. Svaki http zahtjev trebao bi vratiti vrstu HttpRequestStatus.

enum HttpRequestStatus {
  NIJE UČINJENO,
  Gotovo,
  ERROR
}

odbaciti

Provest ćemo prelazak prstom da biste izbrisali što je vrlo čest uzorak koji se nalazi u mobilnim aplikacijama. Da bismo to učinili, zamijenit ćemo Stupac s Dopušteno kako je prikazano u nastavku. Tada zahtijevamo da izbrišemo heroja putem svog id-a na parametru onDismissed. Metoda deleteHero vraća budućnost koja je httpRequestStatus. Ako je status završen, tražit ćemo da crtamo zaslon pomoću setState ().

vrati novi ListView.builder (
    itemCount: snapshot.data.length,
    itemBuilder: (kontekst, indeks) {
      var item = snapshot.data [indeks];

      povratak Dopušteno (
        tipka: Ključ (item.id.toString ()),
        onDismissed: (direction) async {
          httpRequestStatus = pričekajte deleteHero (item.id);
          ako (httpRequestStatus == HttpRequestStatus.DONE) {
            setState (() {
              snapshot.data.removeAt (indeks);
            });
          }
        }
        pozadina: spremnik (boja: boje.red),
        dijete: ListTile (naslov: Tekst ('$ {item.name}')),
      );
    });

Metoda deleteHero je sljedeća

Buduća deleteHero (int id) async {
  httpRequestStatus = HttpRequestStatus.NOT_DONE;
  final url = '$ _heroesUrl / $ id';
  konačni odgovor = pričekajte http.delete (url, zaglavlja: _headers);
  ako (odgovor.statusCode == 200) {
    ispis (response.body.toString ());
    httpRequestStatus = HttpRequestStatus.DONE;
  } else {
    httpRequestStatus = HttpRequestStatus.ERROR;
  }

  vratiti httpRequestStatus;
}
Prijeđite prstom da biste izbrisali heroja

Dodavanje funkcije

Dodajmo ikonu widgeta pod AppBar kako bismo korisniku omogućili dodavanje heroja.

appBar: novi AppBar (
  naslov: novi Tekst ("Flutter CRUD Demo"),
  radnje:  [
    IconButton (
      ikona: ikona (Icons.add),
      onPress: _addHeroService,
      opis: "Dodaj novog heroja",
    )
  ],
),

U _addHeroService zovemo _openDialogAddHero da bismo gurnuli novi ekran za unos korisnika o imenu heroja. Ova metoda vraća novo ime heroja koje ćemo nakon toga nazvati createHero, a ako se ime heroja uspješno ažurira, nazvat ćemo setState () da crtamo zaslon.

void _addHeroService () async {
  Ime niza = pričekajte _openDialogAddHero ();
  HttpRequestStatus httpRequestStatus = pričekajte createHero (ime);
  ako (httpRequestStatus == HttpRequestStatus.DONE) {
    setState (() {
      
    });
  }
}

Dodajmo statičke _ const _headers za pohranjivanje vrste zaglavlja http sadržaja.

statički konačni _headers = {'Content-Type': 'aplikacija / json'};

Slijedi kôd za slanje novog zahtjeva za heroj aplikaciji web poslužitelja.

Buduća createHero (ime niza) async {
  httpRequestStatus = HttpRequestStatus.NOT_DONE;
  konačni odgovor = pričekajte http.post (_heroesUrl,
      zaglavlja: _headers, tijelo: json.encode ({'ime': ime}));
  ako (odgovor.statusCode == 200) {
    ispis (response.body.toString ());
    httpRequestStatus = HttpRequestStatus.DONE;
  } else {
    httpRequestStatus = HttpRequestStatus.ERROR;
  }

  vratiti httpRequestStatus;
}
Sada možemo dodati novog heroja

Funkcija ažuriranja

Konačno nam ostaje još jedna zadnja funkcija koja je mogućnost ažuriranja imena heroja. Želimo da korisnik dodirne postojećeg heroja radi ažuriranja imena. Za to dodamo onTap unutar ListTile-a koji poziva metodu _updateHeroService, unoseći id i ime heroja u taj indeks popisa. Slično je s _addHeroService koja preuzima ime iz skočnog dijaloškog okvira i prelazi u updateHero. Zaslon se zatim iznova crta ako je updateHero uspješan.

Budući _updateHeroService (int id, ime niza) async {
  String updatedName = pričekajte _openDialogUpdateHero (id, ime);
  HttpRequestStatus httpRequestStatus = čekaj ažuriranjeHero (id, ažuriranoName);
  ako (httpRequestStatus == HttpRequestStatus.DONE) {
    ispis (httpRequestStatus.toString ());
    setState (() {
      
    });
  }
}

Slijedi kod za updateHero

Buduće ažuriranjeHero (int id, ime niza) async {
  httpRequestStatus = HttpRequestStatus.NOT_DONE;
  final url = '$ _heroesUrl / $ id';
  konačni odgovor = pričekajte http.put (url,
      zaglavlja: _headers, tijelo: json.encode ({'id': id, 'ime': ime}));
  ako (odgovor.statusCode == 200) {
    ispis (response.body.toString ());
    httpRequestStatus = HttpRequestStatus.DONE;
  } else {
    httpRequestStatus = HttpRequestStatus.ERROR;
  }
}
Zamijenimo Hawkeyeja sa Thhorom

Kao rekapitulacija, opisali smo kako izgraditi aplikaciju za web poslužitelj implementirajući RESTful api i uspjeli smo izgraditi aplikaciju Flutter za obavljanje osnovnih funkcija CRUD-a s PostgreSQL-om.

Github

https://github.com/tattwei46/flutter_crud_postgresql

Ako smatrate da je ovaj članak koristan i edukativan, učinite to malo to će me potaknuti da u budućnosti napišem više toga

Flutter Pub srednja je publikacija koja će vam donijeti najnovije i zadivljujuće resurse poput članaka, videozapisa, kodova, podcasta itd. O ovoj izvrsnoj tehnologiji kako bi vas naučila kako s njom graditi prekrasne aplikacije. Možete nas pronaći na Facebooku, Twitteru i Medijumu ili saznati više o nama ovdje. Voljeli bismo se povezati! A ako ste pisac zainteresiran za pisanje za nas, to možete učiniti kroz ove smjernice.