6.1 CRUD 簡介
CRUD 是一個首字母縮寫詞，表示可以對數據進行的四個基本操作： 創建 (Create)，讀取 (Read)，更新 (Update) 和 刪除 (Delete)。 這些操作是數據庫操作的基本操作，也是大多數 Web 應用程式的基礎。
什麼是 CRUD？
- Create (創建): 創建操作用於向數據庫添加新的記錄。這允許將新數據輸入系統。
- Read (讀取): 讀取操作用於從數據庫中檢索數據。這允許用戶查詢和查看現有信息。
- Update (更新): 更新操作用於修改數據庫中的現有記錄。這允許編輯和更正數據。
- Delete (刪除): 刪除操作用於從數據庫中刪除記錄。這允許刪除不需要或過時的數據。
HTTP 方法來進行 CRUD 操作
在 Web 開發的語境中，CRUD 操作通常通過對 API 的 HTTP 請求來執行。不同的 HTTP 方法對應於不同的 CRUD 操作：
- POST: 用於創建新資源。
- GET: 用於讀取（獲取）資源。
- PUT 和 PATCH: 用於更新現有資源。 PUT 通常用於完全替換資源， 而 PATCH 用於部分更新。
- DELETE: 用於刪除資源。
為什麼需要 CRUD 操作？
CRUD 操作是 Web 應用程式中數據操作的基礎。它們允許開發人員實現基本的功能特性，如創建用戶賬戶、編輯個人檔案、查看數據和刪除記錄。這些操作還提供了客戶端和服務器之間的交互，允許數據和命令的傳遞。
現代工具來進行 CRUD 操作
現代 Web 應用程序通常使用各種工具和庫來通過 API 執行 CRUD 操作：
- Fetch API: 瀏覽器中內建的基於 Promise 的 HTTP 請求方法。
- Axios: 一個流行的 HTTP 請求庫，提供了一個便捷且擴展的 API。
這些工具幫助開發人員輕鬆高效地執行 CRUD 操作，提供靈活性並簡化與不同服務器 API 的整合。
6.2 使用 Fetch
來看一下如何使用 Fetch 來執行 CRUD 操作。
創建 (Create):
JavaScript
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 });
讀取 (Read):
JavaScript
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);
更新 (Update):
JavaScript
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 });
刪除 (Delete):
JavaScript
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 使用 Axios
來看看如何使用 Axios 來執行 CRUD 操作。
創建 (Create):
JavaScript
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 });
讀取 (Read):
JavaScript
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);
更新 (Update):
JavaScript
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 });
刪除 (Delete):
JavaScript
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 使用 CRUD 的小技巧
通過 API 使用 CRUD 操作的小技巧：
- 錯誤處理: 在執行 HTTP 請求時務必處理可能的錯誤。使用
try...catch塊或catch方法來處理錯誤。 - 數據驗證: 在向服務器發送數據之前，確保它們符合預期格式。
- 身份驗證和授權: 在處理受保護的資源時，確保正確處理身份驗證和授權，例如將訪問令牌添加到請求標頭。
- 分頁和篩選: 在接收大量數據時，使用查詢參數進行分頁和篩選數據。
- 緩存: 為了提高性能，可以緩存經常請求的數據。
GO TO FULL VERSION