Hướng dẫn chi tiết về thao tác thêm dữ liệu trong cơ sở dữ liệu đám mây ứng dụng mini

1. Phương pháp thêm dữ liệu cơ bản

API cốt lõi: themDuLieu()

csdl.taoTapHop('tên_tập_hợp').themDuLieu({
  dữLiệu: {
    trường1: giáTrị1,
    trường2: giáTrị2,
    // ... các trường khác
  }
})

Ví dụ đầy đủ

// Kết nối đến tập hợp người_dùng và thêm dữ liệu
csdl.taoTapHop('người_dùng').themDuLieu({
  dữLiệu: {
    tenDangNhap: 'SAKURA',
    tuoi: 20,
    congViec: 'Học viện Xiaomi',
    hinhAnh: 'đường_dẫn_hình_ảnh'
  }
}).then(kq => {
  console.log('Thêm thành công:', kq)
}).catch(lỗi => {
  console.error('Thêm thất bại:', lỗi)
})

2. Quy trình thêm dữ liệu đầy đủ

1. Nút bấm kích hoạt thêm

<!-- WXML -->
<nút type="chính" bindtap="themDuLieu">Thêm dữ liệu</nút>

2. Hàm thực hiện thêm

// JS
themDuLieu: hàm() {
  const csdl = wx.cloud.database()
  
  csdl.taoTapHop('người_dùng').themDuLieu({
    dữLiệu: {
      tenDangNhap: 'SAKURA',
      tuoi: 20,
      congViec: 'Học viện Xiaomi',
      hinhAnh: 'https://example.com/avatar.jpg'
    }
  }).then(kq => {
    console.log('Thêm thành công:', kq)
    
    // Lấy lại dữ liệu sau khi thêm
    này.layDuLieu()
  }).catch(lỗi => {
    console.error('Thêm thất bại:', lỗi)
  })
}

3. Giải thích kết quả thêm

// Kết quả trả về khi thêm thành công
{
  _id: "mã_id_mới_tạo",    // Mã ID duy nhất do hệ thống tạo
  tinNhắnLỗi: "tap_hợp.them:ok"  // Thông báo thành công
}

// Kiểm tra trạng thái thành công qua tinNhắnLỗi
nếu (kq.tinNhắnLỗi === "tap_hợp.them:ok") {
  console.log('Dữ liệu đã được thêm')
}

3. Hiển thị dữ liệu lên giao diện

1. Lấy và lưu trữ dữ liệu

// Hàm lấy dữ liệu
layDuLieu: hàm() {
  const csdl = wx.cloud.database()
  
  csdl.taoTapHop('người_dùng')
    .gioiHan(20)  // Giới hạn số lượng bản ghi
    .lay()
    .then(kq => {
      // Lưu trữ dữ liệu vào giao diện
      này.thietLapDuLieu({
        danhSach: kq.dữLiệu
      })
    })
    .catch(lỗi => {
      console.error('Lấy dữ liệu thất bại:', lỗi)
    })
}

// Gọi khi tải trang
khiTai: hàm() {
  này.layDuLieu()
}

2. Hiển thị dữ liệu

<!-- WXML hiển thị danh sách -->
<khối wx:for="{{danhSach}}" wx:key="_id" class="mục">
  <!-- Hình ảnh -->
  <hình src="{{mục.hinhAnh}}" style="width: 50px; height: 70px;"></hình>
  
  <!-- Thông tin văn bản -->
  <khối>
    <chữ>Tên: {{mục.tenDangNhap}}</chữ>
    <chữ>Tuổi: {{mục.tuoi}}</chữ>
    <chữ>Công việc: {{mục.congViec}}</chữ>
  </khối>
</khối>

4. Cập nhật dữ liệu sau khi thêm

Phương án 1: Tải lại dữ liệu

themDuLieu: hàm() {
  const csdl = wx.cloud.database()
  
  // Thêm dữ liệu
  csdl.taoTapHop('người_dùng').themDuLieu({
    dữLiệu: {
      // Các trường dữ liệu...
    }
  }).then(kq => {
    // Kiểm tra trạng thái
    nếu (kq.tinNhắnLỗi === "tap_hợp.them:ok") {
      // Tải lại dữ liệu
      này.layDuLieu()
    }
  })
}

Phương án 2: Tối ưu trải nghiệm người dùng

themDuLieu: hàm() {
  // Hiển thị trạng thái tải
  wx.hienThiGiaiĐoán({
    tiêuDe: 'Đang thêm...',
  })
  
  const csdl = wx.cloud.database()
  
  csdl.taoTapHop('người_dùng').themDuLieu({
    dữLiệu: {
      // Các trường dữ liệu...
    }
  }).then(kq => {
    // Ẩn trạng thái tải
    wx.anGiaiĐoán()
    
    nếu (kq.tinNhắnLỗi === "tap_hợp.them:ok") {
      // Hiển thị thông báo thành công
      wx.hienThiThongBáo({
        tiêuDe: 'Thêm thành công',
        biệuTượng: 'thành_công',
        thờiGian: 1500
      })
      
      // Tải lại dữ liệu
      này.layDuLieu()
    }
  }).catch(lỗi => {
    wx.anGiaiĐoán()
    wx.hienThiThongBáo({
      tiêuDe: 'Thêm thất bại',
      biệuTượng: 'lỗi',
      thờiGian: 2000
    })
    console.error('Thêm thất bại:', lỗi)
  })
}

5. Lưu ý quan trọng

1. Vấn đề trùng dữ liệu

• Nội dung có thể trùng: Miễn là _id khác nhau, dữ liệu giống nhau vẫn có thể thêm
• Mã _id tự động: Mỗi lần thêm hệ thống sẽ tạo mã _id duy nhất

2. Tính nhất quán của trường

// Đảm bảo các trường khớp với cấu trúc tập hợp
// Các trường trong cơ sở dữ liệu: tenDangNhap, tuoi, congViec, hinhAnh
themDuLieu({
  dữLiệu: {
    tenDangNhap: 'Trần Anh',  // √ Đúng
    tuoi: 25,          // √ Đúng
    congViec: 'Kỹ sư',     // × Sai (nên là congViec)
    hinhAnh: ''          // √ Đúng (có thể để trống)
  }
})

3. Xử lý đường dẫn hình ảnh

• Lưu trữ địa chỉ hình ảnh cần đảm bảo là URL hợp lệ
• Có thể lấy từ kho lưu trữ đám mây hoặc sử dụng liên kết ngoài

6. Ví dụ hoàn chỉnh

Cấu trúc giao diện (WXML)

<khối class="khung">
  <!-- Nút thêm -->
  <nút type="chính" bindtap="themDuLieu">Thêm dữ liệu</nút>
  
  <!-- Danh sách -->
  <khối class="danh_sách">
    <khối wx:for="{{danhSach}}" wx:key="_id" class="mục">
      <hình src="{{mục.hinhAnh}}" class="ảnh_đại_diện"></hình>
      <khối class="thông_tin">
        <chữ class="tên">{{mục.tenDangNhap}}</chữ>
        <chữ class="tuổi">Tuổi: {{mục.tuoi}}</chữ>
        <chữ class="cong_viec">{{mục.congViec}}</chữ>
      </khối>
    </khối>
  </khối>
</khối>

Logic trang (JS)

Trang({
  dữLiệu: {
    danhSach: []  // Lưu trữ danh sách
  },
  
  khiTai: hàm() {
    // Lấy dữ liệu khi tải trang
    này.layDuLieu()
  },
  
  // Hàm lấy dữ liệu
  layDuLieu: hàm() {
    const csdl = wx.cloud.database()
    
    csdl.taoTapHop('người_dùng')
      .gioiHan(20)
      .lay()
      .then(kq => {
        này.thietLậpDuLieu({
          danhSach: kq.dữLiệu
        })
      })
      .catch(lỗi => {
        console.error('Lấy dữ liệu thất bại:', lỗi)
        wx.hienThiThongBáo({
          tiêuDe: 'Tải dữ liệu thất bại',
          biệuTượng: 'không'
        })
      })
  },
  
  // Hàm thêm dữ liệu
  themDuLieu: hàm() {
    // Hiển thị trạng thái tải
    wx.hienThiGiaiĐoán({
      tiêuDe: 'Đang thêm...',
    })
    
    const csdl = wx.cloud.database()
    
    csdl.taoTapHop('người_dùng').themDuLieu({
      dữLiệu: {
        tenDangNhap: 'SAKURA',
        tuoi: 20,
        congViec: 'Học viện Xiaomi',
        hinhAnh: 'https://example.com/avatar.jpg'
      }
    }).then(kq => {
      wx.anGiaiĐoán()
      
      nếu (kq.tinNhắnLỗi === "tap_hợp.them:ok") {
        wx.hienThiThongBáo({
          tiêuDe: 'Thêm thành công',
          biệuTượng: 'thành_công'
        })
        
        // Tải lại dữ liệu
        này.layDuLieu()
      }
    }).catch(lỗi => {
      wx.anGiaiĐoán()
      wx.hienThiThongBáo({
        tiêuDe: 'Thêm thất bại',
        biệuTượng: 'lỗi'
      })
      console.error('Thêm thất bại:', lỗi)
    })
  }
})

Phong cách (WXSS)

/* Kiểu danh sách */
.mục {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

/* Kiểu ảnh đại diện */
.ảnh_đại_diện {
  width: 50px;
  height: 70px;
  border-radius: 5px;
  margin-right: 15px;
}

/* Khu vực thông tin */
.thông_tin {
  display: flex;
  flex-direction: column;
}

.tên {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.tuổi, .cong_viec {
  font-size: 14px;
  color: #666;
  margin-bottom: 3px;
}

7. Lời khuyên thực hành

1. Tối ưu trải nghiệm

• Kiểm tra biểu mẫu trước khi thêm
• Hiển thị trạng thái tải khi thêm
• Cung cấp phản hồi rõ ràng khi thành/cô lập

2. Quản lý dữ liệu

• Thiết kế cấu trúc hợp lý, tránh dư thừa
• Sử dụng cập nhật cục bộ cho dữ liệu thường xuyên thay đổi
• Dọn dẹp dữ liệu lỗi thời định kỳ

3. Xử lý lỗi

// Xử lý lỗi hoàn chỉnh
themDuLieu: hàm() {
  // ... Logic thêm ...
  
  .catch(lỗi => {
    console.error('Chi tiết lỗi:', lỗi)
    
    // Phản hồi theo loại lỗi
    nếu (lỗi.mãLỗi === -1) {
      wx.hienThiThongBáo({
        tiêuDe: 'Lỗi mạng, vui lòng kiểm tra kết nối',
        biệuTượng: 'không'
      })
    } khác {
      wx.hienThiThongBáo({
        tiêuDe: 'Thao tác thất bại, vui lòng thử lại',
        biệuTượng: 'không'
      })
    }
  })
}

4. Xem xét hiệu năng

• Sử dụng thêm hàng loạt khi có nhiều dữ liệu (sẽ học ở bài sau)
• Tránh gọi add() liên tục trong vòng lặp
• Xem xét dùng hàm đám mây cho logic phức tạp

8. Kiến thức trọng tâm

1. Thêm dữ liệu: tap_hợp.them({dữLiệu: {...}})
2. Tạo _id tự động: Hệ thống tạo mã ID duy nhất cho mỗi bản ghi
3. Kiểm tra thành công: Dựa vào kq.tinNhắnLỗi === "tap_hợp.them:ok"
4. Cập nhật dữ liệu: Tải lại dữ liệu sau khi thêm thành công
5. Trải nghiệm người dùng: Hiển thị trạng thái và phản hồi rõ ràng

Với những thao tác này, bạn có thể hoàn thiện quy trình tương tác dữ liệu giữa ứng dụng mini và cơ sở dữ liệu đám mây: thêm dữ liệu → truy vấn → hiển thị. Đây là kỹ năng nền tảng quan trọng trong phát triển ứng dụng mini.