提问人：Kiwi 提问时间：11/16/2023 更新时间：11/16/2023 访问量：34
如何创建仅显示数据库中某些条目的页面？[关闭]
How to create pages that displays only certain entries from a database? [closed]
问：
基本上，我有一个网站来显示我拥有的所有项目，但我希望它们自动分类到它们自己的类别页面中，而不是将它们全部显示在一个页面中。 我在编码方面不是很了解，但我相信我需要一个包含所有单个条目的数据库文件，以及一个调用具有指定类别的条目以显示在页面中的代码。我甚至不知道如何开始编写所有这些代码，而且我正在使用 neocities 的免费版本，所以我可以使用的文件类型和代码有点有限。 如果您能给我任何想法或指导，我将不胜感激！
我一直在跟踪谷歌表格中的项目，并在额外的嵌入式谷歌表格中显示所述项目，但这需要我为每个类别手动添加/排序我拥有的不同电子表格中的条目，这将是无法管理的，现在我想要更多的类别。更不用说我什至无法对类别电子表格中的项目进行排序，因为我必须垂直而不是水平显示每个条目上的数据！ 每个条目都需要以下类型的信息：项目图像、我何时获得它、我来自谁、我是如何获得它的、主要类别、子类别和个人笔记
答：
-1赞
Anish Abraham
11/16/2023
#1
创建一个 JSON 文件来存储您的项目数据。它可能看起来像这样：
[
{
"itemName": "Item 1",
"image": "item1.jpg",
"acquisitionDate": "2023-01-01",
"acquiredFrom": "John Doe",
"acquisitionMethod": "Gift",
"mainCategory": "Category A",
"subCategory": "Subcategory A1",
"notes": "Lorem ipsum dolor sit amet."
},
// Add more items as needed
]
创建一个 HTML 文件来构建您的网页。您可以使用如下所示的简单模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Item Collection</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="categories"></div>
<div id="items"></div>
<script src="script.js"></script>
</body>
</html>
编写 JavaScript 代码以加载 JSON 数据，并为每个类别和项目动态创建 HTML 元素。
document.addEventListener('DOMContentLoaded', function () {
// Load JSON data
fetch('data.json')
.then(response => response.json())
.then(data => organizeItems(data));
});
function organizeItems(items) {
// Organize items by category
const categories = {};
items.forEach(item => {
const category = item.mainCategory;
categories[category] = categories[category] || [];
categories[category].push(item);
});
// Display categories
const categoriesContainer = document.getElementById('categories');
Object.keys(categories).forEach(category => {
const categoryButton = document.createElement('button');
categoryButton.textContent = category;
categoryButton.addEventListener('click', () => displayItems(categories[category]));
categoriesContainer.appendChild(categoryButton);
});
}
function displayItems(items) {
// Display items for the selected category
const itemsContainer = document.getElementById('items');
itemsContainer.innerHTML = ''; // Clear previous items
items.forEach(item => {
const itemElement = document.createElement('div');
itemElement.innerHTML = `
<h3>${item.itemName}</h3>
<img src="${item.image}" alt="${item.itemName}">
<p>Date: ${item.acquisitionDate}</p>
<p>Acquired from: ${item.acquiredFrom}</p>
<p>Method: ${item.acquisitionMethod}</p>
<p>Notes: ${item.notes}</p>
`;
itemsContainer.appendChild(itemElement);
});
}
将您的 HTML、CSS、JavaScript 和 JSON 文件上传到您的 neocities 帐户。
访问您的 neocities 网站以查看分类项目。
这是一个基本示例，您可能需要根据特定要求调整代码。此外，请注意，此解决方案不会在会话之间保留数据，因为 neocities 不支持服务器端脚本或数据库。如果需要更高级的功能或数据持久性，则可能需要考虑支持服务器端脚本和数据库的其他托管解决方案。
评论