try：创作助手-python制作一个购物网站。

bicart

已于 2024-01-12 13:33:48 修改

阅读量526

点赞数 13

文章标签： tensorflow 人工智能 python

于 2024-01-12 13:05:54 首次发布

本文链接：https://blog.csdn.net/bicart/article/details/135550134

版权

本文使用创作助手。

包含了美观的页面设计、购物内容、购物车和支付界面的功能。请注意，这只是一个基本示例，您可以根据自己的需求进行修改和扩展。

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插件来实现用户登录功能的更高级管理。

bicart

关注

13
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
try：创作助手-python制作一个购物网站。

请注意，这只是一个基本示例，您可以根据自己的需求进行修改和扩展。路由中，我们将用户名和密码存储到一个文本文件中（这只是一个简单的示例，请根据实际需求进行修改）。请注意，以上示例中的图片和支付功能并没有真正的实现，您可以自行根据需要进行相应的修改和扩展。路由中，我们从文本文件中验证用户名和密码，并根据验证结果重定向用户到。另外，为了保证用户登录后才能访问购物网站页面，你可以使用Flask的。的HTML模板文件，并将其保存在与Python文件相同的目录下。在上面的示例中，我们使用了Flask的。
复制链接

扫一扫