6.1 Giới thiệu về CRUD
CRUD là viết tắt của bốn thao tác chính có thể thực hiện với dữ liệu: tạo mới (Create), đọc (Read), cập nhật (Update) và xóa (Delete). Những thao tác này là cơ bản cho công việc với cơ sở dữ liệu và là nền tảng của hầu hết các ứng dụng web.
CRUD là gì?
- Create (Tạo mới): thao tác tạo mới được sử dụng để thêm bản ghi mới vào cơ sở dữ liệu. Điều này cho phép nhập dữ liệu mới vào hệ thống.
- Read (Đọc): thao tác đọc được sử dụng để truy xuất dữ liệu từ cơ sở dữ liệu. Nó cho phép người dùng yêu cầu và xem thông tin đã có.
- Update (Cập nhật): thao tác cập nhật được sử dụng để thay đổi các bản ghi hiện có trong cơ sở dữ liệu. Điều này cho phép chỉnh sửa và điều chỉnh dữ liệu.
- Delete (Xóa): thao tác xóa được sử dụng để xóa các bản ghi khỏi cơ sở dữ liệu. Điều này cho phép loại bỏ dữ liệu không cần thiết hoặc đã lỗi thời.
HTTP methods cho CRUD operations
Trong ngữ cảnh phát triển web, CRUD operations thường được thực hiện bằng cách sử dụng HTTP requests đến API. Các phương thức HTTP khác nhau sẽ tương ứng với các CRUD operations khác nhau:
- POST: được sử dụng để tạo mới các tài nguyên.
- GET: được sử dụng để đọc (nhận) các tài nguyên.
- PUT và PATCH: được sử dụng để cập nhật tài nguyên hiện có. PUT thường được dùng để thay thế hoàn toàn tài nguyên, trong khi PATCH — để cập nhật một phần.
- DELETE: được sử dụng để xóa tài nguyên.
Tại sao cần CRUD operations?
CRUD operations là nền tảng để làm việc với dữ liệu trong ứng dụng web. Chúng cho phép các nhà phát triển thực hiện các chức năng cơ bản như tạo tài khoản người dùng, chỉnh sửa hồ sơ, xem dữ liệu và xóa bản ghi. Những thao tác này cũng cung cấp sự tương tác giữa máy khách và máy chủ, cho phép truyền dữ liệu và lệnh.
Công cụ hiện đại để thực hiện CRUD operations
Ứng dụng web hiện đại thường sử dụng nhiều công cụ và thư viện để thực hiện CRUD operations qua API:
- Fetch API: cách thực hiện HTTP requests tích hợp trong trình duyệt, dựa trên promises.
- Axios: thư viện phổ biến để thực hiện HTTP requests, cung cấp API tiện lợi và nâng cao.
Những công cụ này giúp các developers dễ dàng và hiệu quả thực hiện CRUD operations, cung cấp tính linh hoạt và đơn giản trong việc tích hợp với các server API khác nhau.
6.2 Sử dụng Fetch
Xem xét việc sử dụng Fetch để thực hiện CRUD operations.
Tạo mới (Create):
const createData = async (data) => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Created:', result);
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Đọc (Read):
const readData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const result = await response.json();
console.log('Read:', result);
};
readData(1);
Cập nhật (Update):
const updateData = async (id, data) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Updated:', result);
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Xóa (Delete):
const deleteData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE'
});
if (response.ok) {
console.log('Deleted:', id);
} else {
console.error('Failed to delete:', id);
}
};
deleteData(1);
6.3 Sử dụng Axios
Xem xét việc sử dụng Axios để thực hiện CRUD operations.
Tạo mới (Create):
const axios = require('axios');
const createData = async (data) => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
console.log('Created:', response.data);
} catch (error) {
console.error('Error creating data:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
Đọc (Read):
const readData = async (id) => {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
console.log('Read:', response.data);
} catch (error) {
console.error('Error reading data:', error);
}
};
readData(1);
Cập nhật (Update):
const updateData = async (id, data) => {
try {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
console.log('Updated:', response.data);
} catch (error) {
console.error('Error updating data:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
Xóa (Delete):
const deleteData = async (id) => {
try {
const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (response.status === 200) {
console.log('Deleted:', id);
}
} catch (error) {
console.error('Error deleting data:', error);
}
};
deleteData(1);
6.4 Mẹo sử dụng CRUD
Mẹo sử dụng CRUD operations qua API:
- Xử lý lỗi: luôn xử lý các lỗi có thể xảy ra khi thực hiện HTTP requests. Sử dụng các khối
try...catchhoặc phương thứccatchđể xử lý lỗi. - Xác thực dữ liệu: trước khi gửi dữ liệu lên server, đảm bảo rằng chúng phù hợp với định dạng mong đợi.
- Xác thực và ủy quyền: khi làm việc với các tài nguyên bảo mật, đảm bảo rằng bạn xử lý đúng xác thực và ủy quyền, ví dụ, thêm các token truy cập vào trong header của request.
- Phân trang và lọc: khi nhận lượng lớn dữ liệu, sử dụng tham số request để phân trang và lọc dữ liệu.
- Bộ nhớ đệm: để cải thiện hiệu suất có thể lưu trữ dữ liệu thường xuyên được yêu cầu.
GO TO FULL VERSION