PricingLoginStart free
Firebase-godkendelse og apps med realtidsdatabase · Lektion

Grundlæggende dataforespørgsler

Udfør grundlæggende forespørgsler for at hente bestemte delmængder af data fra din Realtime Database.

Lektion 1 af 412 trin

Grundlæggende dataforespørgsler er en gratis Firebase-godkendelse og apps med realtidsdatabase-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Firebase-godkendelse og apps med realtidsdatabase, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Firebase-godkendelse og apps med realtidsdatabase-kurset indeholder 4 lektioner i alt.

Introduktion til databaseforespørgsler

Velkommen til grundlæggende dataforespørgsler! I denne lektion lærer du, hvordan du effektivt henter bestemte data fra din Firebase Realtime Database.

En databaseforespørgsel er som at stille din database et præcist spørgsmål. I stedet for at hente alle data henter du kun det, du har brug for, hvilket sparer båndbredde og forbedrer appens ydeevne.

Vi bruger Firebase JavaScript SDK'et i vores eksempler. Udgangspunktet for enhver forespørgsel er en firebase.database().ref(), som peger på en bestemt placering i din database.

Eksempeldata og indledende opsætning

Først opsætter vi en grundlæggende HTML-side, der kan interagere med Firebase og udfylde nogle eksempeldata. Den fungerer som vores eksemplers 'primære indgangspunkt'.

Vi bruger et enkelt datasæt med 'users', hvor hver bruger har en name, en age og en city.

Vigtigt: Erstat YOUR_API_KEY, YOUR_PROJECT_ID osv. med den faktiske konfiguration af dit Firebase-projekt.

<!DOCTYPE html>
<html>
<head>
  <title>Firebase Query Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>Firebase Query Setup</h1>
  <p>Check your browser's console for output.</p>

  <script>
    // Your Firebase project configuration
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();

    // Reference to the 'users' node
    const usersRef = db.ref('users');

    // Sample data to write (only if not already present)
    const sampleUsers = {
      "user1": { "name": "Alice", "age": 30, "city": "New York" },
      "user2": { "name": "Bob", "age": 25, "city": "London" },
      "user3": { "name": "Charlie", "age": 35, "city": "New York" },
      "user4": { "name": "David", "age": 25, "city": "Paris" }
    };

    // Write data to the database (only once for demo)
    usersRef.once('value', snapshot => {
      if (!snapshot.exists()) {
        usersRef.set(sampleUsers)
          .then(() => console.log('Sample data written successfully!'))
          .catch(error => console.error('Error writing sample data:', error));
      } else {
        console.log('Sample data already exists. Skipping write.');
      }
    });

    console.log('Firebase initialized and sample data check complete.');
  </script>
</body>
</html>

Sortering af data: orderByChild()

En af de mest almindelige måder at sortere dine data på er at bruge orderByChild(). Denne metode sorterer undernoderne for en given reference efter værdien af en angiven underordnet nøgle.

Hvis du f.eks. har en liste med brugere, og hver bruger har egenskaben 'age', kan du bruge orderByChild('age') til at få dem sorteret efter alder.

  • Den tager ét argument: navnet på den underordnede nøgle, der skal sorteres efter.
  • Resultaterne returneres som standard i stigende rækkefølge.

orderByChild() i praksis

Lad os hente vores brugere sorteret efter deres age. Resultatet viser brugerne fra yngst til ældst.

Kør denne kode, og se resultatet i konsollen eller på listen på siden!

<!DOCTYPE html>
<html>
<head>
  <title>OrderByChild Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>OrderByChild Query</h1>
  <p>Users ordered by age:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByChild('age').on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = ''; // Clear previous list
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const li = document.createElement('li');
        li.textContent = `${user.name} (Age: ${user.age}, City: ${user.city})`;
        userList.appendChild(li);
      });
      console.log('Users ordered by age:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Andre sorteringsmetoder: orderByKey() og orderByValue()

Ud over orderByChild() tilbyder Firebase Realtime Database to andre sorteringsmetoder:

  • orderByKey(): Sorterer resultaterne efter undernodernes nøgler. Det er nyttigt, når dine nøgler repræsenterer ID'er eller fortløbende tal.
  • orderByValue(): Bruges, når undernoderne selv er simple primitive værdier (strenge, tal eller boolske værdier) i stedet for objekter. Den sorterer direkte efter disse værdier.

Husk, at du kun kan bruge én orderBy-metode pr. forespørgsel.

Eksempel på orderByKey()

Lad os se orderByKey() i praksis. Dette sorterer vores brugere efter deres unikke bruger-ID'er (f.eks. 'user1' og 'user2').

Dette er ofte standardadfærden, hvis der ikke er angivet nogen orderBy, men en eksplicit brug af den kan gøre din hensigt tydeligere.

<!DOCTYPE html>
<html>
<head>
  <title>OrderByKey Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>OrderByKey Query</h1>
  <p>Users ordered by key:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByKey().on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = '';
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const key = childSnapshot.key;
        const li = document.createElement('li');
        li.textContent = `ID: ${key}, Name: ${user.name} (Age: ${user.age})`;
        userList.appendChild(li);
      });
      console.log('Users ordered by key:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Begrænsning af resultater: limitToFirst()

Ofte har du ikke brug for alle resultater, men kun et udsnit. limitToFirst() og limitToLast() lader dig angive det maksimale antal elementer, der skal hentes.

  • limitToFirst(n): Returnerer de første n elementer efter sortering.
  • limitToLast(n): Returnerer de sidste n elementer efter sortering.

De bruges altid sammen med en af orderBy-metoderne for at sikre et ensartet resultatsæt.

Eksempel på limitToFirst()

Lad os kun hente de to første brugere, når de er sorteret efter alder. Det er nyttigt til ranglister eller visning af seneste aktivitet.

Bemærk, hvordan vi kombinerer orderByChild() med limitToFirst() for at hente et bestemt udsnit af dataene.

<!DOCTYPE html>
<html>
<head>
  <title>LimitToFirst Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>LimitToFirst Query</h1>
  <p>First 2 users ordered by age:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByChild('age').limitToFirst(2).on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = '';
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const li = document.createElement('li');
        li.textContent = `${user.name} (Age: ${user.age}, City: ${user.city})`;
        userList.appendChild(li);
      });
      console.log('First 2 users by age:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Filtrering med equalTo()

Hvis du vil finde elementer, der matcher en bestemt værdi nøjagtigt, skal du bruge equalTo(). Denne metode kombineres næsten altid med en af orderBy-metoderne.

  • Den tager ét argument: den nøjagtige værdi, der skal matches.
  • For eksempel finder orderByChild('city').equalTo('New York') alle brugere, hvis by er 'New York'.

Husk, at equalTo() har brug for en orderBy-klausul for at vide, hvilken underordnet nøgle eller nøgle den skal sammenligne med.

Eksempel på equalTo()

Lad os hente alle brugere, der bor i 'New York'. Vi sorterer efter city og filtrerer derefter efter et nøjagtigt match.

Denne forespørgsel er effektiv til at finde bestemte poster baseret på deres egenskaber.

<!DOCTYPE html>
<html>
<head>
  <title>EqualTo Demo</title>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
</head>
<body>
  <h1>EqualTo Query</h1>
  <p>Users living in New York:</p>
  <ul id="user-list"></ul>

  <script>
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
      databaseURL: "https://YOUR_PROJECT_ID-default-rtdb.firebaseio.com",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_PROJECT_ID.appspot.com",
      messagingSenderId: "YOUR_SENDER_ID",
      appId: "YOUR_APP_ID"
    };
    firebase.initializeApp(firebaseConfig);
    const db = firebase.database();
    const usersRef = db.ref('users');

    usersRef.orderByChild('city').equalTo('New York').on('value', (snapshot) => {
      const userList = document.getElementById('user-list');
      userList.innerHTML = '';
      snapshot.forEach((childSnapshot) => {
        const user = childSnapshot.val();
        const li = document.createElement('li');
        li.textContent = `${user.name} (Age: ${user.age}, City: ${user.city})`;
        userList.appendChild(li);
      });
      console.log('Users in New York:', snapshot.val());
    }, (error) => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>

Hurtigt tjek: grundlæggende forespørgsler

Hvis du har en users-node med undernoder som { name: 'Alice', age: 30, city: 'New York' }, hvilken forespørgsel henter så brugere fra 'New York' korrekt?

Besvar den i den interaktive lektion

Opsummering: grundlæggende dataforespørgsler

Tillykke! Du har gennemført det grundlæggende i forespørgsler til din Firebase Realtime Database.

Vi gennemgik:

  • Brug af orderByChild() til at sortere data efter en bestemt egenskab.
  • orderByKey() og orderByValue() til forskellige sorteringsbehov.
  • Begrænsning af resultater med limitToFirst() og limitToLast().
  • Filtrering efter nøjagtige match med equalTo(), altid sammen med en orderBy-klausul.

Disse grundlæggende forespørgselsteknikker er afgørende for at bygge effektive og responsive applikationer. I næste lektion går vi mere i dybden med avanceret filtrering og sortering!

Gratis at komme i gang

Lær Firebase-godkendelse og apps med realtidsdatabase med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
11
Lektioner
44
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende dataforespørgsler” gratis?

Ja — alle 3 lektioner i læringssporet Firebase-godkendelse og apps med realtidsdatabase, inklusive “Grundlæggende dataforespørgsler”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Firebase-godkendelse og apps med realtidsdatabase-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Grundlæggende dataforespørgsler”?

Udfør grundlæggende forespørgsler for at hente bestemte delmængder af data fra din Realtime Database. Du øver dig i Firebase-godkendelse og apps med realtidsdatabase med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Firebase-godkendelse og apps med realtidsdatabase?

Der kræves ingen tidligere erfaring. Firebase-godkendelse og apps med realtidsdatabase på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Grundlæggende dataforespørgsler”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Firebase-godkendelse og apps med realtidsdatabase-lektion?

Ja. Alle Firebase-godkendelse og apps med realtidsdatabase-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Grundlæggende dataforespørgsler
  2. Filtrering og sortering af data
  3. Teknikker til paginering af data
  4. Indeksering af forespørgsler for bedre ydeevne
← Tilbage til Firebase-godkendelse og apps med realtidsdatabase