背景介绍
在线购物系统是一个典型的Web开发项目，需要实现用户输入商品信息、自动计算价格、显示结果以及展示购物车状态的功能。该项目结合了前端交互、数据处理和Web开发的核心知识，帮助读者理解文件操作、数据结构和算法应用。
思路分析
- 数据存储：使用Python的
json模块读取JSON文件，保存用户商品信息，如products.json，实现数据持久化。 - 总价计算：采用乘法计算总金额，考虑货币单位统一为元。
- 前端交互：通过HTML表单实现用户输入，CSS样式美化界面，JavaScript动态计算总价并显示。
代码实现
前端HTML/CSS/JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线购物系统</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f4f4f4;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
td, th {
padding: 8px;
border: 1px solid #ccc;
}
th, td {
text-align: left;
}
#result {
font-size: 1.2em;
margin-top: 10px;
color: #333;
}
#cart-sticky {
display: flex;
flex-direction: column;
align-items: right;
margin: 10px;
}
.cart-item {
display: flex;
align-items: center;
margin: 5px;
}
.cart-item img {
width: 80px;
height: 80px;
}
.cart-item span {
font-weight: bold;
color: #555;
}
.cart-item.quantity {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>在线购物系统</h1>
<h2>商品信息</h2>
<input type="text" id="productName" placeholder="商品名称" required>
<input type="number" id="quantity" placeholder="数量" min="1">
<div id="result"></div>
<div id="cart-sticky">
<div class="cart-item" id="cart-item1">
<img src="https://via.placeholder.com/100x80?text=苹果" alt="苹果">
<span>苹果</span>
<div class="cart-item.quantity">10</div>
</div>
</div>
<script>
const products = [
{ name: '苹果', quantity: 10 },
{ name: '香蕉', quantity: 5 },
{ name: '橙子', quantity: 3 }
];
function calculatePrice(quantity) {
const price = 8.2; // 示例价格（元）
return price * quantity;
}
function updateCart() {
const cartItems = document.querySelectorAll('#cart-sticky .cart-item');
cartItems.forEach(item => {
const quantity = item.querySelector('.cart-item.quantity');
quantity.textContent = item.getAttribute('quantity');
});
}
function renderProducts() {
const result = document.getElementById('result');
result.innerHTML = `
<table>
<tr><th>商品名称</th><th>数量</th></tr>
${products.map(product => `
<tr><td>${product.name}</td><td>${product.quantity}</td></tr>
`).join()}
</table>
`;
}
document.getElementById('productName').addEventListener('input', () => {
const quantity = document.getElementById('quantity').value;
const price = 8.2; // 示例价格（元）
const total = price * quantity;
result.textContent = `总金额=${total.toFixed(2)}元`;
});
document.getElementById('quantity').addEventListener('input', () => {
renderProducts();
});
document.getElementById('cart-sticky').addEventListener('click', updateCart);
</script>
</body>
</html>
代码解释
- JSON数据存储：使用Python的
json模块读取products.json文件，并保存商品信息。 - 总价计算：通过计算价格（8.2元/件）乘以输入数量实现总金额计算。
- 前端交互：HTML表单输入商品和数量，CSS样式美化界面，JavaScript动态计算总价并显示结果。
- 购物车状态：通过
<div id="cart-sticky">元素展示购物车中的商品信息。
总结
本项目实现了在线购物系统的核心功能，通过Python进行数据存储和计算，结合HTML/CSS/JavaScript实现前端交互，展示了文件操作、数据结构和算法应用的核心知识。项目不仅具备功能性，还体现了Web开发的基础知识，为读者提供了一个完整的实践框架。