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

Lấy 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 có một thực thể của firebase.database.Reference:

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();

Web

var database = firebase.database();

Đọc và ghi danh sách

Thêm vào danh sách dữ liệu

Sử dụng phương thức push() để nối dữ liệu vào một danh sách trong các ứng dụng nhiều người dùng. Phương thức push() tạo một khoá duy nhất mỗi khi thêm một thành phần con mới tham chiếu Firebase được chỉ định. Bằng cách sử dụng các khoá được tạo tự động này cho mỗi phần tử mới trong danh sách, một số khách hàng có thể thêm phần tử con vào cùng một vị trí mà không bị xung đột ghi. Khoá duy nhất do push() tạo dựa trên dấu thời gian, vì vậy, các mặt hàng trong danh sách sẽ được sắp xếp tự động theo trình tự thời gian.

Bạn có thể sử dụng thông tin tham chiếu đến dữ liệu mới được phương thức push() trả về để lấy giá trị của khoá được tạo tự động hoặc đặt dữ liệu cho nhà xuất bản con. Chiến lược phát hành đĩa đơn Thuộc tính .key của tệp đối chiếu push() chứa khoá được tạo tự động.

Bạn có thể sử dụng những khoá được tạo tự động này để đơn giản hoá quá trình làm phẳng dữ liệu cấu trúc. Để biết thêm thông tin, hãy xem phần chia sẻ dữ liệu ví dụ.

Ví dụ: bạn có thể sử dụng push() để thêm bài đăng mới vào danh sách các bài đăng trong ứng dụng xã hội:

Web

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, {
    // ...
});

Web

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

Theo dõi các sự kiện của trẻ

Sự kiện con được kích hoạt để phản hồi các hoạt động cụ thể xảy ra với phần tử con của một nút từ một thao tác, chẳng hạn như phần tử con mới được thêm vào thông qua Phương thức push() hoặc một phần tử con được cập nhật thông qua phương thức update().

Sự kiện Mức sử dụng thông thường
child_added Truy xuất danh sách các mục hoặc theo dõi để 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 nhà xuất bản con hiện có, sau đó sẽ kích hoạt lại mỗi khi thêm một thành phần con mới vào đường dẫn được chỉ định. Trình nghe là đã chuyển một ảnh chụp nhanh có chứa dữ liệu của nhà xuất bản con mới.
child_changed Theo dõi những 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 cứ khi nào một nút con được sửa đổi. bao gồm bất kỳ sửa đổi nào đối với các thành phần con của nút con. Thông tin tổng quan nhanh đã đạt vào trình nghe sự kiện chứa dữ liệu đã cập nhật cho thành phần con.
child_removed Nghe các mục bị xoá khỏi danh sách. Sự kiện này được kích hoạt khi phần tử con tức thì sẽ bị xoá.Ảnh chụp nhanh được truyền đến khối gọi lại chứa dữ liệu của phần tử con đã bị xoá.
child_moved Theo dõi những thay đổi đối với thứ tự của các mục trong danh sách được sắp xếp. Các sự kiện child_moved luôn theo sau Sự kiện child_changed đã dẫn đến đơn đặt hàng của mặt hàng thay đổi (dựa trên thứ tự theo phương thức hiện tại của bạn).

Mỗi phương pháp trong số này có thể hữu ích để theo dõi những thay đổi đối với một nút 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 để theo dõi hoạt động trong phần nhận xét của bài đăng, như sau:

Web

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);
});

Web

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);
});

Theo dõi các sự kiện giá trị

Mặc dù bạn nên theo dõi các sự kiện con để đọc danh sách dữ liệu, có những trường hợp việc theo dõi các sự kiện giá trị trên một tham chiếu danh sách lại hữu ích.

Việc đính kèm trình quan sát value vào danh sách dữ liệu sẽ trả về toàn bộ danh sách dữ liệu dưới dạng một ảnh chụp nhanh duy nhất mà sau đó bạn có thể lặp lại để truy cập vào từng mục con.

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à danh sách; nó chỉ chứa một mục duy nhất. Để truy cập vào mục, bạn cần sử dụng vòng lặp đối với kết quả:

Web

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
});

Web

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ả phần tử con của một danh sách trong một thao tác thay vì theo dõi thêm trẻ được thêm vào các sự kiện.

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

Bạn có thể sử dụng lớp Realtime Database Query để truy xuất dữ liệu được sắp xếp theo theo giá trị hoặc theo giá trị của phần tử con. Bạn cũng có thể lọc kết quả được sắp xếp cho một số lượng kết quả cụ thể hoặc một dải khoá 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 thức sắp xếp theo thứ tự để xác định cách sắp xếp kết quả:

Phương thức Cách sử dụng
orderByChild() Sắp xếp kết quả theo giá trị của một khoá con đã chỉ định hoặc đường dẫn con lồng nhau.
orderByKey() Sắp xếp kết quả theo khoá con.
orderByValue() Sắp xếp kết quả theo giá trị con.

Mỗi lần, bạn chỉ có thể sử dụng một phương thức đặt hàng. Gọi một phương thức đặt hàng nhiều lần trong cùng một truy vấn sẽ gây ra lỗi.

Ví dụ sau minh hoạ cách truy xuất danh sách thông tin bài đăng hàng đầu được sắp xếp theo số sao:

Web

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'));

Web

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

Lệnh này xác định một truy vấn mà khi được kết hợp với trình nghe con đồng bộ hoá máy khách với các bài đăng của người dùng từ đường dẫn trong cơ sở dữ liệu dựa trên mã nhận dạng người dùng, được sắp xếp theo số sao mà mỗi bài đăng nhận được. Kỹ thuật sử dụng ID làm khoá chỉ mục này được gọi là di chuyển dữ liệu ra ngoài. Bạn có thể đọc thông tin khác về sản phẩm này trong Xây dựng cấu trúc cơ sở dữ liệu của bạn.

Lệnh gọi đến phương thức orderByChild() chỉ định khoá con để sắp xếp kết quả theo. Trong trường hợp này, bài đăng được sắp xếp theo giá trị của phần tử con "starCount" tương ứng. Các truy vấn cũng có thể được sắp xếp theo con, 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ể sắp xếp các phần tử danh sách theo giá trị được lồng trong metrics bằng cách chỉ định đường dẫn tương đối đến thành phần con được lồng trong Cuộc gọi orderByChild().

Web

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

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

Web

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

Để biết thêm thông tin về cách sắp xếp các loại dữ liệu khác, xem Cách sắp xếp dữ liệu truy vấn.

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 theo thứ tự khi tạo truy vấn.

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

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

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

Bạn có thể sử dụng các phương thức limitToFirst()limitToLast() để đặt giá trị số lượng phần tử con tối đa cần đồng bộ hoá cho một sự kiện cụ thể. Ví dụ: nếu bạn sử dụng limitToFirst() để đặt giới hạn là 100, ban đầu bạn chỉ nhận được lên 100 sự kiện child_added. Nếu bạn có ít hơn 100 mục được lưu trữ trong Cơ sở dữ liệu Firebase, một sự kiện child_added sẽ kích hoạt cho từng mặt hàng.

Khi mặt hàng thay đổi, bạn sẽ nhận được child_added sự kiện cho những mặt hàng nhập và child_removed sự kiện cho các mục biến mất để thì tổng số vẫn là 100.

Ví dụ sau minh hoạ 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:

Web

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

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

Web

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

Ví dụ này chỉ xác định một truy vấn để thực sự đồng bộ hoá dữ liệu mà truy vấn cần có một trình nghe đính kèm.

Lọc theo khoá hoặc giá trị

Bạn có thể sử dụng startAt(), startAfter(),endAt(), endBefore()equalTo() để chọn điểm bắt đầu, kết thúc và điểm tương đương cho 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ó phần tử 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 phương thức trong Lớp Query.

orderByChild

Khi sử dụng orderByChild(), dữ liệu chứa khoá con được chỉ định sẽ được sắp xếp như sau:

  1. Phần tử con có giá trị null cho khoá con đã chỉ định sẽ xuất hiện đầu tiên.
  2. Khoá con được chỉ định có giá trị false tiếp theo. Nếu nhiều phần tử con có giá trị false, thì chúng sẽ được sắp xếp theo từ điển theo khoá.
  3. Khoá con được chỉ định có giá trị true tiếp theo. Nếu nhiều phần tử con có giá trị true, thì chúng sẽ được sắp xếp theo từ điển theo khoá.
  4. Các phần tử con có giá trị số sẽ xuất hiện tiếp theo, được sắp xếp theo thứ tự tăng dần. Nếu nhiều phần tử con có cùng giá trị số cho phần tử con được chỉ định nút, chúng được sắp xếp theo khoá.
  5. Chuỗi đứng sau số và được sắp xếp theo từ điển theo thứ tự tăng dần đơn đặt hàng. Nếu nhiều phần tử con có cùng giá trị đối với phần tử con được chỉ định nút, các nút này được sắp xếp từ vựng theo khoá.
  6. Đối tượng đứng cuối và được sắp xếp theo từ điển theo khoá theo thứ tự tăng dần.

orderByKey

Khi sử dụng orderByKey() để sắp xếp dữ liệu, dữ liệu sẽ được trả về theo thứ tự tăng dần theo khoá.

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

orderByValue

Khi sử dụng orderByValue(), phần tử con được sắp xếp theo giá trị. Thứ tự tiêu chí sẽ giống như trong orderByChild(), ngoại trừ giá trị của nút là được dùng thay cho giá trị của khoá con được chỉ định.

Tách trình nghe

Các lệnh gọi lại sẽ bị xoá bằng cách gọi phương thức off() trên Tài liệu tham khảo về cơ sở dữ liệu Firebase.

Bạn có thể xoá một trình nghe bằng cách truyền trình nghe đó dưới dạng tham số đến off(). Việc gọi off() trên vị trí không có đối số sẽ xoá tất cả trình nghe tại vị trí đó vị trí.

Việc gọi off() trên trình nghe cha mẹ sẽ không tự động xoá trình nghe đã đăng ký trên các nút con; off() cũng phải được gọi trên mọi trình nghe con để loại bỏ lệnh gọi lại.

Các bước tiếp theo