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: 浏览器自带的 HTTP 请求方式，基于 Promise。
- 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