你的第一个数据库应用
等级： 1-初学者
理解数据库概念以及如何在应用程序中使用它们是所有开发者需要掌握的知识。你的第一个数据库应用的目的是提供一个温和的入门指南，介绍数据库概念和学习一个用于前端应用程序的数据库使用案例。
那么，你知道现代浏览器内置了一个数据库管理系统吗？IndexedDB内置在大多数现代浏览器中，并为开发者提供了基本的数据库功能、事务支持和客户端跨会话持久性。
要求与约束
-
基于浏览器的数据库的主要用例是维护需要在会话之间持续存在或在临时数据工作区中存储的状态或状态信息。例如，从服务器检索的数据必须在呈现给用户之前进行重新格式化或清理。
-
需要记住的是，由于客户端浏览器环境无法得到保障，因此不应该在基于浏览器的数据库中维护任何机密或个人身份识别信息（PII）。
-
下面提供的Javascript类具有允许您的应用程序最初从浏览器中填充并清除数据库的功能，以便您可以测试您将要添加的查询逻辑。您需要在您构建的网页上挂钩按钮到
clearDB和loadDB函数，并编写自己的queryDB处理程序连接到查询DB按钮。您还需要向Customer类添加一个queryAllRows函数。
class Customer {
constructor(dbName) {
this.dbName = dbName;
if (!window.indexedDB) {
window.alert("你的浏览器不支持稳定版本的IndexedDB。诸如和之类的特性将不可用。");
}
}
/**
* 从数据库中删除所有行
* @memberof Customer
*/
removeAllRows = () => {
const request = indexedDB.open(this.dbName, 1);
request.onerror = (event) => {
console.log('removeAllRows - 数据库错误：', event.target.error.code,
" - ", event.target.error.message);
};
request.onsuccess = (event) => {
console.log('删除所有客户...');
const db = event.target.result;
const txn = db.transaction('customers', 'readwrite');
txn.onerror = (event) => {
console.log('removeAllRows - Txn错误：', event.target.error.code,
" - ", event.target.error.message);
};
txn.oncomplete = (event) => {
console.log('所有行已删除！');
};
const objectStore = txn.objectStore('customers');
const getAllKeysRequest = objectStore.getAllKeys();
getAllKeysRequest.onsuccess = (event) => {
getAllKeysRequest.result.forEach(key => {
objectStore.delete(key);
});
}
}
}
/**
* 用初始客户数据填充Customer数据库
* @param {[object]} customerData 数据要添加
* @memberof Customer
*/
initialLoad = (customerData) => {
const request = indexedDB.open(this.dbName, 1);
request.onerror = (event) => {
console.log('initialLoad - 数据库错误：', event.target.error.code,
" - ", event.target.error.message);
};
request.onupgradeneeded = (event) => {
console.log('填充客户...');
const db = event.target.result;
const objectStore = db.createObjectStore('customers', { keyPath: 'userid' });
objectStore.onerror = (event) => {
console.log('initialLoad - objectStore错误：', event.target.error.code,
" - ", event.target.error.message);
};
// 创建一个按名称和电子邮件搜索客户的索引
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
// 用初始行集填充数据库
customerData.forEach(function(customer) {
objectStore.put(customer);
});
db.close();
};
}
}
// 网页事件处理程序
const DBNAME = 'customer_db';
/**
* 从数据库中删除所有客户数据
*/
const clearDB = () => {
console.log('从Customers数据库中删除所有行');
let customer = new Customer(DBNAME);
customer.removeAllRows();
}
/**
* 向数据库中添加客户数据
*/
const loadDB = () => {
console.log('加载Customers数据库');
// 要添加到数据库中的初始客户数据
const customerData = [
{ userid: '444', name: 'Bill', email: 'bill@company.com' },
{ userid: '555', name: 'Donna', email: 'donna@home.org' }
];
let customer = new Customer(DBNAME);
customer.initialLoad(customerData);
}
用户故事
- [ ] 用户可以看到一个包含控制面板的网页，控制面板上有三个按钮 - '加载数据库'、'查询数据库' 和 '清除数据库'。
- [ ] 用户可以看到一个通知面板，其中将发布状态消息。
- [ ] 用户可以看到一个可滚动的日志面板，在这里将发布描述应用程序操作和与Customer实例交互的执行详细信息。
- [ ] 用户可以在日志面板中看到通知面板消息的运行历史记录。
- [ ] 用户可以看到一个可滚动的查询结果区域，在这里将显示检索到的客户数据。
- [ ] 用户可以点击'加载数据库'按钮用数据填充数据库。你的UI中的'加载数据库'按钮应该连接到提供的
loadDB事件处理程序。 - [ ] 用户可以在数据加载操作开始和结束时在通知面板中看到一条消息。
- [ ] 用户可以点击'查询数据库'按钮在查询结果区域列出所有客户。你的UI中的'查询数据库'按钮应该连接到你将在程序中添加的
queryDB事件处理程序。 - [ ] 用户可以在查询开始和结束时在通知面板中看到一条消息。
- [ ] 如果没有要显示的行，则用户可以在查询结果区域看到一条消息。
- [ ] 用户可以点击'清除数据库'按钮从数据库中删除所有行。
数据库。UI中的“清空数据库”按钮应连接到提供的
clearDB事件处理程序。 - [ ] 当清空操作开始和结束时，用户可以在通知面板中看到一条消息。
额外功能
-
[ ] 用户可以根据下表看到启用和禁用的按钮。
状态 加载数据库 查询数据库 清空数据库 初始应用显示 已启用 已启用 已禁用 加载数据库点击 已禁用 已启用 已启用 查询数据库点击 已禁用 已启用 已启用 清空数据库点击 已启用 已启用 已禁用 -
[ ] 用户可以看到在代码中包含的额外客户数据字段。开发者应该添加最后订单日期和年度总销售额。
-
[ ] 开发者应对此项目进行回顾：
- 你能在前端应用程序中使用IndexedDB看到哪些用例？
- 与使用文件或本地存储相比，你能看到哪些优缺点？
- 总的来说，你可能会用什么标准来判断IndexedDB是否适合你的应用程序。（提示：100%是或否不是有效答案）。
有用链接和资源
示例项目
- N/a