本文使用创作助手。
包含了美观的页面设计、购物内容、购物车和支付界面的功能。请注意，这只是一个基本示例，您可以根据自己的需求进行修改和扩展。
index.html:
<!DOCTYPE html>
<html>
<head><title>Shopping Website</title><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><h1>Welcome to the Shopping Website!</h1><div class="product"><img src="product1.jpg" alt="Product 1"><h2>Product 1</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Price: $10</p><button onclick="addToCart(1)">Add to Cart</button></div><div class="product"><img src="product2.jpg" alt="Product 2"><h2>Product 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Price: $15</p><button onclick="addToCart(2)">Add to Cart</button></div><div class="product"><img src="product3.jpg" alt="Product 3"><h2>Product 3</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Price: $20</p><button onclick="addToCart(3)">Add to Cart</button></div><div id="cart"><h2>Shopping Cart</h2><ul id="cart-items"></ul><p id="total-price">Total Price: $0</p><button onclick="checkout()">Checkout</button></div><div id="payment"><h2>Payment</h2><form action="/checkout" method="POST"><label for="name">Name:</label><input type="text" id="name" name="name" required><br><br><label for="credit-card">Credit Card Number:</label><input type="text" id="credit-card" name="credit-card" required><br><br><input type="submit" value="Pay Now"></form></div><script src="script.js"></script>
</body>
</html>
styles.css:
body {font-family: Arial, sans-serif;
}h1 {text-align: center;
}.product {width: 200px;border: 1px solid #ccc;padding: 10px;margin: 10px;text-align: center;display: inline-block;
}.cart-item {margin: 5px 0;
}#cart {margin-top: 50px;
}#payment {display: none;margin-top: 50px;
}
script.js:
let cartItems = [];
let totalPrice = 0;function addToCart(productId) {let product = findProduct(productId);cartItems.push(product);updateCart();
}function updateCart() {let cartItemsContainer = document.getElementById("cart-items");cartItemsContainer.innerHTML = "";totalPrice = 0;for (let i = 0; i < cartItems.length; i++) {let cartItem = cartItems[i];let listItem = document.createElement("li");listItem.textContent = cartItem.name + " - $" + cartItem.price;cartItemsContainer.appendChild(listItem);totalPrice += cartItem.price;}let totalPriceElement = document.getElementById("total-price");totalPriceElement.textContent = "Total Price: $" + totalPrice;showCart();
}function findProduct(productId) {// 根据productId从数据库或其他数据源中查找商品信息并返回// 这里使用硬编码的方式进行示例if (productId === 1) {return { name: "Product 1", price: 10 };} else if (productId === 2) {return { name: "Product 2", price: 15 };} else if (productId === 3) {return { name: "Product 3", price: 20 };}
}function showCart() {let cartContainer = document.getElementById("cart");let paymentContainer = document.getElementById("payment");if (cartItems.length > 0) {cartContainer.style.display = "block";paymentContainer.style.display = "none";} else {cartContainer.style.display = "none";paymentContainer.style.display = "block";}
}function checkout() {// 执行结账操作，可以将购物车信息发送到服务器进行处理// 在这个示例中，只是简单地把购物车信息打印到控制台console.log("Checkout");console.log("Items:", cartItems);console.log("Total Price:", totalPrice);
}
请注意，以上示例中的图片和支付功能并没有真正的实现，您可以自行根据需要进行相应的修改和扩展。
以下是一个使用Flask实现登录和注册功能的示例Python文件：
from flask import Flask, render_template, request, redirect, url_forapp = Flask(__name__)@app.route('/')
def home():return render_template('home.html')@app.route('/register', methods=['GET', 'POST'])
def register():if request.method == 'POST':username = request.form['username']password = request.form['password']# 将用户名和密码存储到文本文件中，这里只是一个简单的示例with open('users.txt', 'a') as f:f.write(f'{username}:{password}\n')return redirect(url_for('login'))return render_template('register.html')@app.route('/login', methods=['GET', 'POST'])
def login():if request.method == 'POST':username = request.form['username']password = request.form['password']# 从文本文件中验证用户名和密码，这里只是一个简单的示例with open('users.txt', 'r') as f:for line in f:stored_username, stored_password = line.strip().split(':')if username == stored_username and password == stored_password:return redirect(url_for('index'))return render_template('login.html', error=True)return render_template('login.html', error=False)@app.route('/index')
def index():return render_template('index.html')if __name__ == '__main__':app.run()
在上面的示例中，我们使用了Flask的render_template函数来加载HTML模板，并使用request对象来获取用户提交的表单数据。在register路由中，我们将用户名和密码存储到一个文本文件中（这只是一个简单的示例，请根据实际需求进行修改）。在login路由中，我们从文本文件中验证用户名和密码，并根据验证结果重定向用户到index页面或者展示登录失败的消息。
请注意，你需要创建名为home.html、register.html、login.html和index.html的HTML模板文件，并将其保存在与Python文件相同的目录下。
另外，为了保证用户登录后才能访问购物网站页面，你可以使用Flask的@login_required装饰器。你可以通过Flask-Login插件来实现用户登录功能的更高级管理。
