HTML5编写管理员页面
引言
随着互联网的快速发展，越来越多的网站和应用需要提供管理员页面来管理用户、数据和系统设置等。HTML5作为一种标准的前端技术，提供了丰富的功能和样式，可以用来编写强大且美观的管理员页面。本文将介绍如何使用HTML5编写管理员页面，并解决一个实际问题。
实际问题
假设我们正在开发一个电商网站，并需要提供一个管理员页面来管理商品信息。管理员页面需要具有以下功能：
- 显示所有商品的列表，包括商品名称、价格和库存等信息。
- 支持添加新商品的表单，并在提交后将新商品添加到列表中。
- 支持编辑商品信息的表单，并在提交后更新相应的商品信息。
- 支持删除商品，包括确认删除和取消删除操作。
解决方案
页面结构
首先，我们需要定义管理员页面的结构。以下是一个简单的HTML结构示例：
<!DOCTYPE html>
<html>
<head>
<title>管理员页面</title>
</head>
<body>
商品列表
<!-- 商品列表 -->
<ul id="product-list">
<!-- 商品项 -->
<li>
<span class="product-name">商品1</span>
<span class="product-price">100</span>
<span class="product-stock">10</span>
<button class="edit-product">编辑</button>
<button class="delete-product">删除</button>
</li>
<!-- 其他商品项... -->
</ul>
<!-- 添加商品表单 -->
<h2>添加商品</h2>
<form id="add-product-form">
<label for="product-name">商品名称：</label>
<input type="text" id="product-name">
<label for="product-price">商品价格：</label>
<input type="number" id="product-price">
<label for="product-stock">商品库存：</label>
<input type="number" id="product-stock">
<button type="submit">添加</button>
</form>
<!-- 编辑商品表单 -->
<h2>编辑商品</h2>
<form id="edit-product-form">
<label for="edit-product-name">商品名称：</label>
<input type="text" id="edit-product-name">
<label for="edit-product-price">商品价格：</label>
<input type="number" id="edit-product-price">
<label for="edit-product-stock">商品库存：</label>
<input type="number" id="edit-product-stock">
<button type="submit">保存</button>
<button class="cancel-edit">取消</button>
</form>
<script src="admin.js"></script>
</body>
</html>
JavaScript交互
接下来，我们使用JavaScript来实现页面的交互功能。以下是一个简单的示例代码，用于添加商品、编辑商品和删除商品：
// 获取页面元素
const productList = document.getElementById('product-list');
const addProductForm = document.getElementById('add-product-form');
const editProductForm = document.getElementById('edit-product-form');
// 商品列表数据
let products = [
{ name: '商品1', price: 100, stock: 10 },
{ name: '商品2', price: 200, stock: 20 },
// 其他商品数据...
];
// 渲染商品列表
function renderProductList() {
productList.innerHTML = '';
for (const product of products) {
const listItem = document.createElement('li');
listItem.innerHTML = `
<span class="product-name">${product.name}</span>
<span class="product-price">${product.price}</span>
<span class="product-stock">${product.stock}</span>
<button class="edit-product">编辑</button>
<button class="delete-product">删除</button>
`;
productList.appendChild(listItem);
}
}
// 添加商品
addProductForm.addEventListener('submit', (event) => {
event.preventDefault();
const newName = document.getElementById('product-name').value;
const newPrice = document.getElementById('product-price').value;
const newStock = document.getElementById('product-stock').value;
products.push({ name: newName, price: newPrice, stock: newStock });
renderProductList();
addProductForm.reset();
});
// 编辑商品
let selectedProductIndex = -1;
productList.addEventListener('click', (event) => {
if (event.target.classList.contains('edit-product')) {
const listItem = event.target.parentElement;
const name = listItem.querySelector('.product-name').textContent;
const price =
