Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Làm việc với danh sách dữ liệu trên web

Nhận tham chiếu cơ sở dữ liệu

Để đọc hoặc ghi dữ liệu từ cơ sở dữ liệu, bạn cần một thể hiện của firebase.database.Reference :

Phiên bản web 9

import { getDatabase } from "firebase/database";

const database = getDatabase();

Phiên bản web 8

var database = firebase.database();

Đọc và ghi danh sách

Nối vào danh sách dữ liệu

Sử dụng push() phương pháp để nối thêm dữ liệu vào một danh sách các ứng dụng đa người dùng. Các push() phương pháp tạo ra một chìa khóa duy nhất mỗi lần một đứa trẻ mới được thêm vào các tài liệu tham khảo căn cứ hỏa lực quy định. Bằng cách sử dụng các khóa được tạo tự động này cho mỗi phần tử mới trong danh sách, một số ứng dụng khách có thể thêm phần tử con vào cùng một vị trí cùng một lúc mà không xảy ra xung đột khi ghi. Chìa khóa duy nhất được tạo bởi push() được dựa trên một dấu thời gian, vì vậy mục danh sách sẽ tự động được đặt thứ tự thời gian.

Bạn có thể sử dụng các tham chiếu đến các dữ liệu mới được trả về bởi các push() phương pháp để có được giá trị của phím hoặc bộ dữ liệu tự động tạo ra của trẻ cho đứa trẻ. Các .key tài sản của một push() tài liệu tham khảo có chứa chìa khóa tự động tạo ra.

Bạn có thể sử dụng các khóa được tạo tự động này để đơn giản hóa việc làm phẳng cấu trúc dữ liệu của mình. Để biết thêm thông tin, xem fan-out dữ liệu ví dụ .

Ví dụ, push() có thể được sử dụng để thêm một bài mới cho một danh sách các bài viết trong một ứng dụng xã hội:

Phiên bản web 9

import { getDatabase, ref, push, set } from "firebase/database";

// Create a new post reference with an auto-generated id
const db = getDatabase();
const postListRef = ref(db, 'posts');
const newPostRef = push(postListRef);
set(newPostRef, {
    // ...
});

Phiên bản web 8

// Create a new post reference with an auto-generated id
var postListRef = firebase.database().ref('posts');
var newPostRef = postListRef.push();
newPostRef.set({
    // ...
});

Lắng nghe các sự kiện trẻ em

Sự kiện trẻ em được kích hoạt để đáp ứng với các hoạt động cụ thể mà xảy ra với con của một nút từ một hoạt động như một đứa trẻ mới được bổ sung thông qua việc push() phương pháp hoặc một đứa trẻ đang được cập nhật thông qua các update() phương pháp.

Biến cố Cách sử dụng điển hình
child_added Truy xuất danh sách các mục hoặc lắng nghe các bổ sung vào danh sách các mục. Sự kiện này được kích hoạt một lần cho mỗi con hiện có và sau đó lặp lại mỗi khi con mới được thêm vào đường dẫn đã chỉ định. Người nghe được chuyển qua một ảnh chụp nhanh có chứa dữ liệu của đứa trẻ mới.
child_changed Lắng nghe các thay đổi đối với các mục trong danh sách. Sự kiện này được kích hoạt bất kỳ khi nào nút con được sửa đổi. Điều này bao gồm bất kỳ sửa đổi nào đối với con cháu của nút con. Ảnh chụp nhanh được chuyển đến trình nghe sự kiện chứa dữ liệu cập nhật cho con.
child_removed Lắng nghe các mục bị xóa khỏi danh sách. Sự kiện này được kích hoạt khi một phần tử con ngay lập tức bị xóa. Ảnh chụp nhanh được chuyển đến khối gọi lại chứa dữ liệu cho phần tử con bị xóa.
child_moved Lắng nghe các thay đổi đối với thứ tự của các mục trong danh sách đã sắp xếp. child_moved sự kiện luôn luôn theo child_changed sự kiện đó gây ra trật tự của mục để thay đổi (dựa trên lệnh bằng phương pháp hiện tại của bạn).

Mỗi thứ kết hợp với nhau có thể hữu ích cho việc lắng nghe các thay đổi đối với một nút cụ thể trong cơ sở dữ liệu. Ví dụ: một ứng dụng viết blog xã hội có thể sử dụng các phương pháp này cùng nhau để giám sát hoạt động trong các nhận xét của một bài đăng, như được hiển thị bên dưới:

Phiên bản web 9

import { getDatabase, ref, onChildAdded, onChildChanged, onChildRemoved } from "firebase/database";

const db = getDatabase();
const commentsRef = ref(db, 'post-comments/' + postId);
onChildAdded(commentsRef, (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

onChildChanged(commentsRef, (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

onChildRemoved(commentsRef, (data) => {
  deleteComment(postElement, data.key);
});

Phiên bản web 8

var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', (data) => {
  addCommentElement(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_changed', (data) => {
  setCommentValues(postElement, data.key, data.val().text, data.val().author);
});

commentsRef.on('child_removed', (data) => {
  deleteComment(postElement, data.key);
});

Lắng nghe các sự kiện giá trị

Mặc dù lắng nghe các sự kiện con là cách được khuyến nghị để đọc danh sách dữ liệu, nhưng có những tình huống lắng nghe các sự kiện giá trị trên danh sách tham chiếu là hữu ích.

Gắn một value quan sát viên tới một danh sách các dữ liệu sẽ trả lại toàn bộ danh sách các dữ liệu như một ảnh chụp duy nhất mà sau đó bạn có thể lặp qua để truy cập từng trẻ.

Ngay cả khi chỉ có một kết quả phù hợp duy nhất cho truy vấn, ảnh chụp nhanh vẫn là một danh sách; nó chỉ chứa một mục duy nhất. Để truy cập mục, bạn cần lặp lại kết quả:

Phiên bản web 9

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const dbRef = ref(db, '/a/b/c');

onValue(dbRef, (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    // ...
  });
}, {
  onlyOnce: true
});

Phiên bản web 8

ref.once('value', (snapshot) => {
  snapshot.forEach((childSnapshot) => {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    // ...
  });
});

Mẫu này có thể hữu ích khi bạn muốn tìm nạp tất cả các phần tử con của một danh sách trong một thao tác duy nhất, thay vì lắng nghe các sự kiện bổ sung được thêm vào danh sách con.

Sắp xếp và lọc dữ liệu

Bạn có thể sử dụng cơ sở dữ liệu Realtime Query lớp để lấy dữ liệu được sắp xếp theo chủ chốt, bởi giá trị, hoặc theo giá trị của một đứa trẻ. Bạn cũng có thể lọc kết quả đã sắp xếp thành một số kết quả cụ thể hoặc một loạt các khóa hoặc giá trị.

Sắp xếp dữ liệu

Để truy xuất dữ liệu đã sắp xếp, hãy bắt đầu bằng cách chỉ định một trong các phương pháp theo thứ tự để xác định cách sắp xếp kết quả:

Phương pháp Sử dụng
orderByChild() Thứ tự kết quả theo giá trị của khóa con được chỉ định hoặc đường dẫn con lồng nhau.
orderByKey() Thứ tự kết quả bằng khóa con.
orderByValue() Thứ tự kết quả theo giá trị con.

Bạn chỉ có thể sử dụng một lệnh theo phương pháp cùng một lúc. Việc gọi một phương thức theo thứ tự nhiều lần trong cùng một truy vấn sẽ gây ra lỗi.

Ví dụ sau minh họa cách bạn có thể truy xuất danh sách các bài đăng hàng đầu của người dùng được sắp xếp theo số sao của họ:

Phiên bản web 9

import { getDatabase, ref, query, orderByChild } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const myUserId = auth.currentUser.uid;
const topUserPostsRef = query(ref(db, 'user-posts/' + myUserId), orderByChild('starCount'));

Phiên bản web 8

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount');

Điều này xác định một truy vấn mà khi kết hợp với một người biết lắng nghe con đồng bộ cho khách hàng với bài viết của người dùng từ các đường dẫn trong cơ sở dữ liệu dựa trên ID người dùng của họ, sắp xếp theo số lượng sao mỗi bài đã nhận được. Kỹ thuật này sử dụng ID là chìa khóa Chỉ số này được gọi là dữ liệu quạt ra, bạn có thể đọc thêm về nó trong cấu trúc cơ sở dữ liệu của bạn .

Các cuộc gọi đến orderByChild() phương pháp xác định chìa khóa con để đặt hàng kết quả theo. Trong trường hợp này, bài viết được sắp xếp theo giá trị của mình "starCount" đứa trẻ. Các truy vấn cũng có thể được sắp xếp theo thứ tự các con lồng nhau, trong trường hợp bạn có dữ liệu giống như sau:

"posts": {
  "ts-functions": {
    "metrics": {
      "views" : 1200000,
      "likes" : 251000,
      "shares": 1200,
    },
    "title" : "Why you should use TypeScript for writing Cloud Functions",
    "author": "Doug",
  },
  "android-arch-3": {
    "metrics": {
      "views" : 900000,
      "likes" : 117000,
      "shares": 144,
    },
    "title" : "Using Android Architecture Components with Firebase Realtime Database (Part 3)",
    "author": "Doug",
  }
},

Trong trường hợp này, chúng ta có thể đặt yếu tố danh sách của chúng tôi bằng giá trị được đặt nằm dưới metrics quan trọng bằng cách xác định con đường tương đối so với con lồng nhau trong chúng tôi orderByChild() gọi.

Phiên bản web 9

import { getDatabase, ref, query, orderByChild } from "firebase/database";

const db = getDatabase();
const mostViewedPosts = query(ref(db, 'posts'), orderByChild('metrics/views'));

Phiên bản web 8

var mostViewedPosts = firebase.database().ref('posts').orderByChild('metrics/views');

Để biết thêm thông tin về cách các kiểu dữ liệu khác được sắp xếp, xem thế nào dữ liệu truy vấn được ra lệnh .

Lọc dữ liệu

Để lọc dữ liệu, bạn có thể kết hợp bất kỳ phương pháp giới hạn hoặc phạm vi nào với phương pháp theo thứ tự khi tạo truy vấn.

Phương pháp Sử dụng
limitToFirst() Đặt số lượng mục tối đa để trả về từ đầu danh sách kết quả có thứ tự.
limitToLast() Đặt số lượng mục tối đa để trả về từ cuối danh sách kết quả theo thứ tự.
startAt() Trả lại các mặt hàng lớn hơn hoặc bằng khóa hoặc giá trị đã chỉ định, tùy thuộc vào phương thức theo thứ tự đã chọn.
startAfter() Trả lại các mặt hàng lớn hơn giá trị hoặc khóa được chỉ định tùy thuộc vào phương thức đặt hàng đã chọn.
endAt() Trả lại các mặt hàng nhỏ hơn hoặc bằng khóa hoặc giá trị đã chỉ định, tùy thuộc vào phương thức theo thứ tự đã chọn.
endBefore() Trả lại các mặt hàng ít hơn giá trị hoặc khóa được chỉ định tùy thuộc vào phương thức đặt hàng đã chọn.
equalTo() Trả lại các mặt hàng bằng khóa hoặc giá trị đã chỉ định, tùy thuộc vào phương thức theo thứ tự đã chọn.

Không giống như các phương pháp theo thứ tự, bạn có thể kết hợp nhiều hàm giới hạn hoặc phạm vi. Ví dụ, bạn có thể kết hợp startAt()endAt() phương pháp để giới hạn kết quả đến một phạm vi chỉ định các giá trị.

Giới hạn số lượng kết quả

Bạn có thể sử dụng limitToFirst()limitToLast() phương pháp để thiết lập một số lượng tối đa của trẻ em để được đồng bộ hóa cho một sự kiện nhất định. Ví dụ, nếu bạn sử dụng limitToFirst() để thiết lập một giới hạn 100, ban đầu bạn chỉ nhận được tối đa 100 child_added sự kiện. Nếu bạn có ít hơn 100 mặt hàng được lưu trữ trong cơ sở dữ liệu căn cứ hỏa lực của bạn, một child_added cháy sự kiện cho mỗi mục.

Như mặt hàng thay đổi, bạn sẽ nhận child_added sự kiện cho các mục nhập truy vấn và child_removed sự kiện cho các hạng mục mà thả ra khỏi nó để tổng trú số 100.

Ví dụ sau minh họa cách ứng dụng viết blog mẫu xác định truy vấn để truy xuất danh sách 100 bài đăng gần đây nhất của tất cả người dùng:

Phiên bản web 9

import { getDatabase, ref, query, limitToLast } from "firebase/database";

const db = getDatabase();
const recentPostsRef = query(ref(db, 'posts'), limitToLast(100));

Phiên bản web 8

var recentPostsRef = firebase.database().ref('posts').limitToLast(100);

Ví dụ này chỉ định nghĩa một truy vấn, để thực sự đồng bộ hóa dữ liệu mà nó cần phải có một gắn liền nghe .

Lọc theo khóa hoặc giá trị

Bạn có thể sử dụng startAt() , startAfter() , endAt() , endBefore() , và equalTo() để lựa chọn khởi đầu tùy ý, kết thúc, và điểm tương đương cho các truy vấn. Điều này có thể hữu ích cho việc phân trang dữ liệu hoặc tìm các mục có con có giá trị cụ thể.

Cách sắp xếp dữ liệu truy vấn

Phần này giải thích cách dữ liệu được sắp xếp theo từng lệnh bằng các phương pháp trong Query lớp.

orderByChild

Khi sử dụng orderByChild() , dữ liệu có chứa chìa khóa con xác định được lệnh như sau:

  1. Trẻ em với null giá trị cho khoá con nhất định đến trước.
  2. Trẻ em với một giá trị false cho phím con định đi tới. Nếu có nhiều trẻ em có giá trị false , họ đều được sắp xếp thứ tự từ điển bằng chìa khóa.
  3. Trẻ em với một giá trị true cho chính con định đi tới. Nếu có nhiều trẻ em có giá trị true , họ đều được sắp xếp thứ tự từ điển bằng chìa khóa.
  4. Các con có giá trị số đứng sau, được sắp xếp theo thứ tự tăng dần. Nếu nhiều nút con có cùng giá trị số cho nút con được chỉ định, chúng được sắp xếp theo khóa.
  5. Các chuỗi đứng sau các số và được sắp xếp theo từ vựng theo thứ tự tăng dần. Nếu nhiều nút con có cùng giá trị cho nút con được chỉ định, chúng được sắp xếp theo thứ tự từ điển theo khóa.
  6. Các đối tượng đến sau cùng và được sắp xếp theo từ điển theo khóa theo thứ tự tăng dần.

orderByKey

Khi sử dụng orderByKey() để sắp xếp dữ liệu của bạn, dữ liệu được trả về trong thứ tự tăng dần bằng chìa khóa.

  1. Các con có khóa có thể được phân tích cú pháp dưới dạng số nguyên 32 bit đứng trước, được sắp xếp theo thứ tự tăng dần.
  2. Các con có giá trị chuỗi làm khóa tiếp theo, được sắp xếp theo từ vựng theo thứ tự tăng dần.

orderByValue

Khi sử dụng orderByValue() , trẻ em được sắp xếp theo giá trị của họ. Các tiêu chí đặt hàng đều giống nhau như trong orderByChild() , ngoại trừ giá trị của nút được sử dụng thay vì giá trị của một chìa khóa con nhất định.

Tách người nghe

Callbacks được loại bỏ bằng cách gọi off() phương pháp trên cơ sở dữ liệu tham khảo căn cứ hỏa lực của bạn.

Bạn có thể loại bỏ một người biết lắng nghe duy nhất bằng cách đi qua nó như một tham số để off() . Gọi off() vào vị trí không có đối số loại bỏ tất cả các thính giả tại địa điểm đó.

Gọi off() trên một người biết lắng nghe cha mẹ không tự động loại bỏ các thính giả đã đăng ký trên các nút con của nó; off() cũng phải được gọi vào bất kỳ người nghe trẻ để loại bỏ các callback.

Bước tiếp theo