本文使用创作助手。
包含了美观的页面设计、购物内容、购物车和支付界面的功能。请注意，这只是一个基本示例，您可以根据自己的需求进行修改和扩展。
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_for
app = 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插件来实现用户登录功能的更高级管理。