Richard牛逼网站代码

DCY_er

已于 2023-06-01 15:31:03 修改

阅读量151

点赞数

文章标签： flask python 后端

于 2023-05-26 20:53:52 首次发布

本文链接：https://blog.csdn.net/DCY_er/article/details/130893810

版权

app.py

from flask import Flask, render_template, request, redirect, url_for, flash
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import generate_password_hash, check_password_hash
import pymysql
from sqlalchemy import text
from flask import jsonify
from flask import session
from datetime import datetime
from flask import request
pymysql.install_as_MySQLdb()

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://newuser:password@localhost/website_database'
db = SQLAlchemy(app)

class Product(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), nullable=False)
description = db.Column(db.String(1000), nullable=False)
price = db.Column(db.Float, nullable=False)
category = db.Column(db.String(100), nullable=False)
like_count = db.Column(db.Integer, default=0)
dislike_count = db.Column(db.Integer, default=0)

class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), nullable=False)
email = db.Column(db.String(100), nullable=False, unique=True)
password = db.Column(db.String(100), nullable=False)
role = db.Column(db.String(100), nullable=False)

class Image(db.Model):
id = db.Column(db.Integer, primary_key=True)
product_id = db.Column(db.Integer, db.ForeignKey('product.id'), nullable=False)
image_url = db.Column(db.String(200), nullable=False)

class Comment(db.Model):
__tablename__='comments'
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
product_id = db.Column(db.Integer, db.ForeignKey('product.id'), nullable=False)
comment = db.Column(db.String(500), nullable=False)
timestamp = db.Column(db.DateTime, default=datetime.utcnow)

@app.route('/api/products')
def api_products():
products = Product.query.all()
product_list = []
for product in products:
image = Image.query.filter_by(product_id=product.id).first()
product_dict = {
"name": product.name,
"desc": product.description,
"price": str(product.price),
"category": product.category,
"imgSrc": image.image_url if image else "default.jpg"
}
product_list.append(product_dict)
return jsonify(product_list)

@app.route('/api/products', methods=['POST'])
def add_product():
product_data = request.json

# Use your database connection to insert the new product
new_product = Product(
name=product_data["name"],
description=product_data["desc"],
price=product_data["price"],
category=product_data["category"]
)
db.session.add(new_product)
db.session.commit()

# Add the image to the Image table
new_image = Image(product_id=new_product.id, image_url=product_data["imgSrc"])
db.session.add(new_image)
db.session.commit()

return jsonify({"success": True, "message": "Product added successfully"}), 201

@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
email = request.form['email']
password = request.form['password']
user = User.query.filter_by(email=email).first()
if user and check_password_hash(user.password, password):
session['user_id'] = user.id
flash('Login successful', 'success')
return {'success': True, 'redirect': url_for('homepage')}
else:
message = 'Email or password is incorrect, please try again'
return {'success': False, 'message': message}
return render_template('login.html')

@app.route('/check-login-status')
def check_login_status():
if 'user_id' in session:
return jsonify({'logged_in': True})
else:
return jsonify({'logged_in': False})

@app.route('/logout')
def logout():
# remove the 'user_id' from the session if it is there
session.pop('user_id', None)
return redirect(url_for('login')) # or redirect to any other page

@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
password = request.form['password']
role = request.form['role']
user = User.query.filter_by(email=email).first()
if user:
flash('Email already exists', 'danger')
else:
hashed_password = generate_password_hash(password, method='sha256')
new_user = User(name=name, email=email, password=hashed_password, role=role)
db.session.add(new_user)
db.session.commit()
flash('Registration successful', 'success')
return redirect(url_for('product_list'))
return render_template('register.html')

@app.route('/homepage')
def homepage():
return render_template('homepage.html')

@app.route('/')
def product_list():
return render_template('product-list.html')

@app.route('/index')
def index():
return render_template('index.html')

@app.route('/message-center')
def message_center():
return render_template('message-center.html')

@app.route('/payment')
def payment():
return render_template('payment.html')

@app.route('/shopping-cart')
def shopping_cart():
return render_template('shopping-cart.html')

@app.route('/test_db')
def test_db():
try:
result = db.session.execute(text('SELECT 1'))
return 'Database connection successful!'
except Exception as e:
return str(e)

@app.route('/product/<product_name>', methods=['GET', 'POST'])
def product_page(product_name):
if request.method == 'POST':
# 获取评论内容和用户名
comment_text = request.form['comment']
user_id = session.get('user_id')
if not user_id:
return {"message": "You must be logged in to comment"}, 401

# 通过商品名称获取商品ID
product = Product.query.filter_by(name=product_name).first()
if product:
product_id = product.id
# 创建评论对象并保存到数据库
comment = Comment(user_id=user_id, product_id=product_id, comment=comment_text)
db.session.add(comment)
db.session.commit()
else:
return {"message": "Product not found"}, 404

# 获取商品信息
product = Product.query.filter_by(name=product_name).first()
if product:
image = Image.query.filter_by(product_id=product.id).first()
imgSrc = image.image_url if image else "default.jpg"
comments = Comment.query.filter_by(product_id=product.id).all()
if imgSrc.startswith('static/'):
imgSrc = imgSrc[len('static/'):]
product_dict = {
"name": product.name,
"desc": product.description,
"price": str(product.price),
"category": product.category,
"imgSrc": imgSrc,
"like_count": product.like_count,
"dislike_count": product.dislike_count
}
comments_dict = [{"username": User.query.get(comment.user_id).name, "comment": comment.comment} for comment in
comments]
return render_template('product.html', product=product_dict, comments=comments_dict)
else:
return "Product not found", 404

@app.route('/product/<product_name>/comment', methods=['POST'])
def add_comment(product_name):
if 'user_id' not in session:
return redirect(url_for('login'))
# 假设用户已登录，其ID存储在session中
user_id = session['user_id']
comment_text = request.form['comment']
product = Product.query.filter_by(name=product_name).first()
if product:
comment = Comment(user_id=user_id, product_id=product.id, comment=comment_text)
db.session.add(comment)
db.session.commit()
return jsonify({'success': True, 'user_id': user_id})
else:
return jsonify({'success': False, 'message': 'Product not found'}), 404

@app.route('/product/<product_name>/like', methods=['POST'])
def like_product(product_name):
product = Product.query.filter_by(name=product_name).first()
if product:
product.like_count += 1
db.session.commit()
return {'success': True, 'like_count': product.like_count}
else:
return {'success': False, 'message': 'Product not found'}, 404

@app.route('/product/<product_name>/dislike', methods=['POST'])
def dislike_product(product_name):
product = Product.query.filter_by(name=product_name).first()
if product:
product.dislike_count += 1
db.session.commit()
return {'success': True, 'dislike_count': product.dislike_count}
else:
return {'success': False, 'message': 'Product not found'}, 404

if __name__ == '__main__':
with app.app_context():
try:
db.create_all()
print("Tables created successfully!")
except Exception as e:
print(f"Failed to create tables: {e}")
app.run(debug=True)

homepage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='homepage.css') }}">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ url_for('static', filename='homepage.js') }}"></script>

</head>
<body>


<nav class="navbar">
<a href="{{ url_for('product_list') }}">Product List</a>
<a href="{{ url_for('homepage') }}">Homepage</a>
<a href="{{ url_for('shopping_cart') }}">My Shopping Cart</a>
<a href="{{ url_for('message_center') }}">Message Center</a>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</nav>

<h1 class="title">Homepage</h1>

<div class="info-row">
<label>Name:</label>
<input type="text" class="name-input" value="" />
<button class="confirm-btn">Confirm</button>
</div>

<div class="info-row">
<label>Address:</label>
<input type="text" class="address-input" value="" />
<button class="confirm-btn">Confirm</button>
</div>

<div class="info-row">
<label>Phone Number:</label>
<input type="text" class="phone-input" value="" />
<button class="confirm-btn">Confirm</button>
</div>
<div class="info-row">
<label>Email</label>
<input type="text" class="email-input" value="" />
<button class="confirm-btn">Confirm</button>
</div>

<div>
<h2>My Order:</h2>
<div id="order-list">

</div>

</div>
<button class="logout-button" οnclick="location.href='{{ url_for('logout') }}'">Logout</button>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Details</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='index.css') }}">

</head>
<body>


<nav class="navbar">
<a href="{{ url_for('product_list') }}">Product List</a>
<a href="{{ url_for('homepage') }}">Homepage</a>
<a href="{{ url_for('shopping_cart') }}">My Shopping Cart</a>
<a href="{{ url_for('message_center') }}">Message Center</a>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</nav>


<div class="product">
<div class="product-image"></div>
<div class="product-details">
<h2 class="product-name">Product Name</h2>
<div class="product-price">
<a href="#" id="type1" class="price-type"><a href="#" class="price-type" data-price="$100">Type 1 (Price)</a>
<a href="#" class="price-type" data-price="$200">Type 2 (Price)</a>
<a href="#" class="price-type" data-price="$300">Type 3 (Price)</a>
</div>

<div class="product-buttons">
<div class="quantity">
<button class="btn-minus">-</button>
<input type="text" class="input-quantity" value="1">
<button class="btn-plus">+</button>
</div>
<button class="btn-buy-now">Buy Now</button>
<button class="btn-add-to-cart">Add to Cart</button>
</div>
<div class="product-feedback">
<button class="btn-like">
Like <span class="like-count">0</span>
</button>
<button class="btn-dislike">
Dislike <span class="dislike-count">0</span>
</button>
</div>
<div class="product-description">
Product Description
</div>
<div class="product-origin">
Origin
</div>
</div>
</div>


<h2>User Comments on This Product</h2>
<div id="comment-list">
<div class="user-comment">
<span class="user-id">John</span>: This watch is amazing! I love the design and it works great.
</div>
<div class="user-comment">
<span class="user-id">Emily</span>: I bought this watch as a gift for my husband and he loves it! It's sleek and stylish, and he gets compliments all the time.
</div>
<div class="user-comment">
<span class="user-id">David</span>: The price for this watch is a bit high, but the quality is definitely worth it. I wear it every day and it still looks like new.
</div>
</div>
<div class="comment-input">
<input type="text" id="comment-input">
<button id="send-btn">Send</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ url_for('static', filename='index.js') }}"></script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Website Login</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='login.css') }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
<h1>Login</h1>
<form action="/login" method="post" id="login-form">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == 'error' %}
<div class="alert alert-danger">{{ message }}</div>
{% endif %}
{% endfor %}
{% endif %}
{% endwith %}
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" id="login-button">Login</button>
</form>
<a href="register" class="register-link">Don't have an account? Register now</a>
</div>
</div>
<script src="{{ url_for('static', filename='login.js') }}"></script>
</body>
</html>

message-center.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Message Center</title>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='message-center.css') }}">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ url_for('static', filename='message-center.js') }}"></script>

</head>
<body>

<nav class="navbar">
<a href="{{ url_for('product_list') }}">Product List</a>
<a href="{{ url_for('homepage') }}">Homepage</a>
<a href="{{ url_for('shopping_cart') }}">My Shopping Cart</a>
<a href="{{ url_for('message_center') }}">Message Center</a>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</nav>

<h1 class="title">Message Center</h1>

<div class="message-box">

</div>
</body>
</html>

payment.html

<!DOCTYPE html>
<html lang="en">

<div id="myModal" class="modal">

<span class="close">×</span>

<img class="modal-content" id="img01">

<div id="caption"></div>
</div>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Page</title>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='payment.css') }}">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ url_for('static', filename='payment.js') }}"></script>

</head>
<body>
<h1 class="page-title">Payment Page</h1>

<div class="cart-summary">
<h2>Cart Summary:</h2>
<div id="cart-items">

</div>

<div class="buy-now-summary">
<h2>"Buy Now" Product:</h2>
<div id="buy-now-item">

</div>
</div>

<h2>Total: <span id="total-price"></span></h2>
</div>

<div class="payment-options">
<h2>Choose a payment method:</h2>
<div>
<input type="radio" id="alipay" name="payment-method" value="Alipay">
<label for="alipay">Alipay</label>
</div>
<div>
<input type="radio" id="wechat" name="payment-method" value="WeChat Pay">
<label for="wechat">WeChat Pay</label>
</div>
{# <div>#}
{# <input type="radio" id="unionpay" name="payment-method" value="UnionPay">#}
{# <label for="unionpay">UnionPay</label>#}
{# </div>#}
</div>
<button class="complete-payment">Complete Payment</button>

</body>
</html>

product.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Details</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='product.css') }}">
</head>
<body>
<input type="hidden" id="product-id" value="{{ product.id }}" />


<nav class="navbar">
<a href="{{ url_for('product_list') }}">Product List</a>
<a href="{{ url_for('homepage') }}">Homepage</a>
<a href="{{ url_for('shopping_cart') }}">My Shopping Cart</a>
<a href="{{ url_for('message_center') }}">Message Center</a>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</nav>


<div class="product">
<div class="product-image">
<img src="{{ url_for('static', filename=product.imgSrc) }}" alt="Product Image">
</div>
<div class="product-details">
<h2 class="product-name">{{ product.name }}</h2>
<input type="hidden" id="product-name" value="{{ product.name }}">
<div class="product-price">

<a href="#" id="type1" class="price-type">{{ product.price }}</a>

<a href="#" id="type2" class="discount-price"></a>
</div>

<div class="product-buttons">
<div class="quantity">
<button class="btn-minus needs-login">-</button>
<input type="text" class="input-quantity" value="1">
<button class="btn-plus needs-login">+</button>
</div>
<button class="btn-buy-now needs-login">Buy Now</button>
<button class="btn-add-to-cart needs-login">Add to Cart</button>
</div>
<div class="product-feedback">
<button class="btn-like needs-login" data-product-name="{{ product.name }}">
Like <span class="like-count">{{ product.like_count }}</span>
</button>
<button class="btn-dislike needs-login" data-product-name="{{ product.name }}">
Dislike <span class="dislike-count">{{ product.dislike_count }}</span>
</button>

</div>
<div class="product-description">
{{ product.desc }}
</div>
<div class="product-origin">
Origin:china
</div>
</div>
</div>


<h2>User Comments on This Product</h2>


<h2>Comments</h2>
{% for comment in comments %}
<div class="comment" id="comment-list">
<p><strong>{{ comment.username }}</strong> said:</p>
<p>{{ comment.comment }}</p>
</div>
{% endfor %}

<div class="comment-section">
<input type="text" id="comment-input" placeholder="Enter your comment">
<button id="submit-comment-btn" class="needs-login">Submit</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ url_for('static', filename='product.js') }}"></script>
</body>
</html>
product-list.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product List</title>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='product-list.css') }}">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="{{ url_for('static', filename='product-list.js') }}"></script>

</head>
<body>


<nav class="navbar">
<a href="{{ url_for('product_list') }}">Product List</a>
<a href="{{ url_for('homepage') }}">Homepage</a>
<a href="{{ url_for('shopping_cart') }}">My Shopping Cart</a>
<a href="{{ url_for('message_center') }}">Message Center</a>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</nav>

<h2 class="categories-title">Categories</h2>
<div class="categories-container">
<button class="category">jewelry</button>
<button class="category">clothes</button>
<button class="category">shoes</button>
<button class="category">sport</button>
<input type="text" class="search-categories" placeholder="Search categories">
<input type="range" min="1" max="100" value="100" class="slider" orient="vertical">
</div>
<div class="product-list">

</div>
<h2>Upload a new product</h2>
<form id="product-upload-form">
<label for="discount">Discount:</label><br>
<input type="number" id="discount" name="discount" min="0" max="1" step="0.01"><br>

<label for="name">Product Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="category">Category:</label><br>
<input type="text" id="category" name="category"><br>
<label for="desc">Description:</label><br>
<input type="text" id="desc" name="desc"><br>
<label for="price">Price:</label><br>
<input type="text" id="price" name="price"><br>
<label for="imgSrc">Image URL:</label><br>
<input type="text" id="imgSrc" name="imgSrc"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Website Registration</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='register.css') }}">
<script src="{{ url_for('static', filename='register.js') }}"></script>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
<h1>Registration</h1>
<form action="/register" method="post" οnsubmit="return validateForm()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required>
</div>
<div class="form-group">
<label>Role</label>
<div class="radio-group">
<input type="radio" id="user" name="role" value="user" required>
<label for="user" class="radio-label">User</label>
<input type="radio" id="admin" name="role" value="admin">
<label for="admin" class="radio-label">Admin</label>
</div>
</div>
<button type="submit">Register</button>
<button type="button" class="cancel">Cancel</button>
</form>
</div>
</div>
</body>
</html>

shopping-cart.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='shopping-cart.css') }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ url_for('static', filename='shopping-cart.js') }}"></script>
</head>
<body>

<nav class="navbar">
<a href="{{ url_for('product_list') }}">Product List</a>
<a href="{{ url_for('homepage') }}">Homepage</a>
<a href="{{ url_for('shopping_cart') }}">My Shopping Cart</a>
<a href="{{ url_for('message_center') }}">Message Center</a>
<div class="search-bar">
<input type="text" placeholder="Search...">
<button>Search</button>
</div>
</nav>

<div class="products-container">
{% for item in cart %}
<div class="product-row">
<div class="image-container">
<img src="{{ item.imgSrc }}" alt="Product Image">
</div>
<div class="product-info">
<h3>{{ item.name }}</h3>
<p>{{ item.price }} x {{ item.quantity }}</p>
</div>
<div class="buttons">
<button class="remove-btn" data-product-name="{{ item.id }}">Remove</button>
</div>

</div>
{% endfor %}
</div>
<div class="settlement-container">
<button class="settlement-btn">Settlement</button>
</div>

</body>
</html>

homepage.js

$(document).ready(function () {
$(".logout-button").click(function() {
// Clear local storage
localStorage.clear();

// Redirect to the logout route
window.location.href = '/logout';
});

// 当页面加载时，从 localStorage 中获取信息并显示在对应的输入框中
$(".info-row input[type='text']").each(function() {
var inputKey = $(this).attr('class').split('-')[0]; // 获取输入框的类型，如"name", "address"等
var inputValue = localStorage.getItem(inputKey); // 从localStorage中获取值

if (inputValue) {
$(this).val(inputValue); // 将值显示在输入框中
}
});

// 当页面加载时，从 localStorage 中获取订单信息数组
var buyNowProducts = JSON.parse(localStorage.getItem('buyNowProducts')) || [];

buyNowProducts.forEach(function(buyNowProduct, index) {
// 获取当前时间
var currentTime = new Date().toLocaleString();

// 创建一个新的订单行
var orderRow = $("<div class='order-row'></div>");
var orderText = $("<span></span>").text(currentTime + ": " + buyNowProduct.name + " - " + buyNowProduct.quantity + " item(s)");
var btnRemove = $("<button class='remove'>Remove</button>");

// 将订单信息添加到订单行中
orderRow.append(orderText, btnRemove);

// 将订单行添加到订单列表中
$("#order-list").append(orderRow);
});

// 删除按钮点击事件
$(".remove").click(function () {
// 删除订单行
var orderRow = $(this).closest('.order-row');
var index = orderRow.index();
orderRow.remove();

// 更新 localStorage 中的订单信息数组
buyNowProducts.splice(index, 1);
localStorage.setItem('buyNowProducts', JSON.stringify(buyNowProducts));
});
$(".confirm-btn").click(function() {
var inputField = $(this).prev(); // 获取输入框
var inputKey = inputField.attr('class').split('-')[0]; // 获取输入框的类型，如"name", "address"等
var inputValue = inputField.val(); // 获取输入框的值
localStorage.setItem(inputKey, inputValue); // 将输入的值保存到localStorage中

alert('Your ' + inputKey + ' has been saved.'); // 提示用户信息已保存
});

});

index.js

$(document).ready(function() {
// Buy Now 按钮点击事件
$('.btn-buy-now').click(function() {
window.location.href = 'payment.html';
});

// Add to Cart 按钮点击事件
$('.btn-add-to-cart').click(function() {
window.location.href = 'shopping-cart.html';
});

// 获取所有 price-type 元素
var priceTypes = document.querySelectorAll('.price-type');

// 遍历所有 price-type 元素，并为它们添加单击事件监听器
for (var i = 0; i < priceTypes.length; i++) {
priceTypes[i].addEventListener('click', function(event) {
// 阻止默认链接行为
event.preventDefault();
// 根据单击的元素来更新价格信息
var type = event.target.id; // 获取单击元素的 ID
if (type === 'type1') {
// 更新价格为 Type 1 的价格
$('#price').text('$100');
} else if (type === 'type2') {
// 更新价格为 Type 2 的价格
$('#price').text('$200');
} else if (type === 'type3') {
// 更新价格为 Type 3 的价格
$('#price').text('$300');
}
});
}

// Quantity counter
$('.btn-plus').click(function() {
var input = $(this).prev('input');
var value = parseInt(input.val());
input.val(value + 1);
});

$('.btn-minus').click(function() {
var input = $(this).next('input');
var value = parseInt(input.val());
if (value > 1) {
input.val(value - 1);
}
});

// Feedback
$('.btn-like').click(function() {
var count = $(this).find('.like-count');
count.text(parseInt(count.text()) + 1);
});

$('.btn-dislike').click(function() {
var count = $(this).find('.dislike-count');
count.text(parseInt(count.text()) - 1);
});

// Comment
$('#send-btn').click(function() {
var comment = $('#comment-input').val();
if (comment !== '') {
var newComment = $('<div></div>').addClass('user-comment');
var userId = $('<span></span>').addClass('user-id').text('UserID');
var text = $('<span></span>').addClass('comment-text').text(comment);
newComment.append(userId).append(': ').append(text);
$('#comment-list').append(newComment);
$('#comment-input').val('');
}
});
});

$(document).ready(function() {
$("#login-form").submit(function(event) {
// 阻止表单默认提交行为
event.preventDefault();

// 获取表单数据
var formData = {
email: $("#email").val(),
password: $("#password").val()
};

// 发送POST请求到服务器端验证登录
$.ajax({
type: "POST",
url: "/login",
data: formData,
dataType: "json",
encode: true
}).done(function(data) {
// 显示成功或错误信息
if (data.success) {
window.location.href = data.redirect;
} else {
$("#login-form .alert").remove();
$("#login-form").prepend(
'<div class="alert alert-danger">' + data.message + "</div>"
);
}
});
});
});

message-center.js

$(document).ready(function () {
// 加载消息
loadMessages();

// 注意：我们将点击事件监听器添加到.message-box，而不是.btn-top
$(".message-box").on("click", ".btn-top", function () {
// 获取点击的按钮所在的消息行
const messageRow = $(this).closest(".message-row");
// 将消息行插入到消息框的最上方
messageRow.prependTo(".message-box");
});

// 注意：我们将点击事件监听器添加到.message-box，而不是.btn-delete
$(".message-box").on("click", ".btn-delete", function () {
// 获取点击的按钮所在的消息行
const messageRow = $(this).closest(".message-row");
// 删除消息行
messageRow.remove();

// 从 localStorage 中删除消息
var messages = JSON.parse(localStorage.getItem('messages')) || [];
var index = messageRow.index();
messages.splice(index, 1);
localStorage.setItem('messages', JSON.stringify(messages));

// 重新加载消息
loadMessages();
});

// 加载消息
function loadMessages() {
var messages = JSON.parse(localStorage.getItem('messages')) || [];

// 清空消息框
$(".message-box").empty();

// 为每条消息创建一个消息行
messages.forEach(function (message) {
var messageRow = createMessageRow(message);
$(".message-box").append(messageRow);
});
}

// 创建消息行
function createMessageRow(message) {
var messageRow = $("<div class='message-row'></div>");
var messageContent = $("<span class='message-content'></span>");
var messageActions = $("<div class='message-actions'></div>");
var btnTop = $("<button class='btn-top'>Top</button>");
var btnDelete = $("<button class='btn-delete'>Delete</button>");

// 确保正确地解析 message 对象
var messageText = message.time + ": " + message.action + " " + message.product;

messageContent.text(messageText);
messageActions.append(btnTop, btnDelete);
messageRow.append(messageContent, messageActions);

return messageRow;
}
});

payment.js

$(document).ready(function() {
var buyNowProducts = JSON.parse(localStorage.getItem('buyNowProducts')) || [];
var cartItems = JSON.parse(localStorage.getItem('cart')) || [];

var totalPrice = 0;

// Handle buyNowProducts as an array
buyNowProducts.forEach(function(buyNowProduct) {
var buyNowProductRow = `
<div class="product-row">
<h3>${buyNowProduct.name}</h3>
<p>${buyNowProduct.price} x ${buyNowProduct.quantity}</p>
</div>
`;

$('#buy-now-item').append(buyNowProductRow);

// Check if discountPrice exists, if it does, use it, otherwise use the original price
var productPrice = buyNowProduct.discountPrice ? buyNowProduct.discountPrice : buyNowProduct.price;

totalPrice += productPrice * buyNowProduct.quantity;
});

cartItems.forEach(function(item) {
var productRow = `
<div class="product-row">
<h3>${item.name}</h3>
<p>${item.price} x ${item.quantity}</p>
</div>
`;

$('#cart-items').append(productRow);

// Check if discountPrice exists, if it does, use it, otherwise use the original price
var productPrice = item.discountPrice ? item.discountPrice : item.price;

totalPrice += productPrice * item.quantity;
});

$('#total-price').html(totalPrice.toFixed(2)).css('color', 'red').css('font-weight', 'bold');

$('.complete-payment').on('click', function() {
const selectedPaymentMethod = $('input[name="payment-method"]:checked').val();
if (selectedPaymentMethod) {
const purchaseSuccessMessage = `Purchase successful! You selected ${selectedPaymentMethod} as your payment method.`;
if (window.confirm(purchaseSuccessMessage)) {
// Redirect to homepage.html when the user closes the confirm dialog
window.location.href = '/homepage';
} else {
// Redirect to homepage.html when the user closes the confirm dialog
window.location.href = '/homepage';
}
} else {
alert('Please select a payment method before completing the purchase.');
}
});

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");

// When the user clicks on a payment method, open the modal
$('input[type=radio][name=payment-method]').change(function() {
if (this.value == 'Alipay') {
modal.style.display = "block";
modalImg.src = "static/alipay.jpg";
} else if (this.value == 'WeChat Pay') {
modal.style.display = "block";
modalImg.src = "static/wechatpay.jpg";
}
});
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the close button, close the modal
span.onclick = function() {
modal.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
};
});

product.js

$(document).ready(function() {

$('.needs-login').click(function(event) {
event.preventDefault(); // 先阻止默认的点击事件，等待登录检查的结果
var self = this; // 保存当前点击的对象，因为在done函数中this会变化

isLoggedIn().done(function(loggedIn) {
if (!loggedIn) {
alert('please login first！');
window.location.href = '/login'; // 重定向到登录页面
} else {
// 如果用户已经登录，我们创建一个新的事件并手动触发它
var newEvent = $.Event('click', {bubbles: true});
$(self).off('click').trigger(newEvent);
}
});
});

// 你的原始点击事件处理器
$('.btn-minus').click(function() {
var quantityInput = $(this).siblings('.input-quantity');
var quantity = parseInt(quantityInput.val());
if (quantity > 1) {
quantityInput.val(quantity - 1);
}
});

function isLoggedIn() {
// 发送Ajax请求以检查用户登录状态
return $.ajax({
type: 'GET',
url: '/check-login-status',
dataType: 'json'
}).then(function (response) {
return response.logged_in;
});
}

$('.btn-minus, .btn-plus, .btn-like, .btn-dislike, .btn-buy-now, .btn-add-to-cart, #submit-comment-btn').click(function(event) {
// 先阻止默认的点击事件，等待登录检查的结果
event.preventDefault();
var self = this; // 保存当前点击的对象，因为在done函数中this会变化

isLoggedIn().done(function(loggedIn) {
if (!loggedIn) {
alert('please login first！');
window.location.href = '/login'; // 重定向到登录页面
} else {
// 如果用户已经登录，再触发原来的点击事件
$(self).off('click').click();
}
});
});

// 对所有需要用户登录的按钮，我们在点击事件处理器中添加登录检查逻辑
$('.btn-minus, .btn-plus, .btn-like, .btn-dislike, .btn-buy-now, .btn-add-to-cart, #submit-comment-btn').click(function(event) {
if (!isLoggedIn()) {
event.preventDefault(); // 阻止原来的事件处理
alert('please login first！');
window.location.href = '/login'; // 重定向到登录页面
}
});
// 获取产品名称
var productName = $('#product-name').val();

// 获取折扣
const discounts = JSON.parse(localStorage.getItem('discounts')) || {};
const discount = discounts[productName];

if (discount) {
var originalPrice = parseFloat($('#type1').text());
var discountPrice = (originalPrice * discount).toFixed(2); // 修改了这里
localStorage.setItem('discountPrice', discountPrice);
$('#type1').addClass('discounted');
$('#type2').text('Discount Price: ' + discountPrice).show();
}
// When the "-" button is clicked, decrease the quantity by 1
$('.btn-minus').click(function() {
var quantityInput = $(this).siblings('.input-quantity');
var quantity = parseInt(quantityInput.val());

if (quantity > 1) {
quantityInput.val(quantity - 1);
}
});

// When the "+" button is clicked, increase the quantity by 1
$('.btn-plus').click(function() {
var quantityInput = $(this).siblings('.input-quantity');
var quantity = parseInt(quantityInput.val());

quantityInput.val(quantity + 1);
});
// 获取产品名称
var productName = $('#product-name').val();
$('.btn-like').click(function() {
var productName = $(this).data('product-name');
likeProduct(productName);
});

$('.btn-dislike').click(function() {
var productName = $(this).data('product-name');
dislikeProduct(productName);
});

// 点赞商品函数
function likeProduct(productName) {
$.ajax({
url: '/product/' + productName + '/like',
method: 'POST',
success: function(response) {
if (response.success) {
var likeCount = response.like_count;
$('.btn-like[data-product-name="' + productName + '"] .like-count').text(likeCount);
} else {
alert('Failed to like product: ' + response.message);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Failed to like product: ' + errorThrown);
}
});
}

// 不喜欢商品函数
function dislikeProduct(productName) {
$.ajax({
url: '/product/' + productName + '/dislike',
method: 'POST',
success: function(response) {
if (response.success) {
var dislikeCount = response.dislike_count;
$('.btn-dislike[data-product-name="' + productName + '"] .dislike-count').text(dislikeCount);
} else {
alert('Failed to dislike product: ' + response.message);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Failed to dislike product: ' + errorThrown);
}
});
}

$('.btn-buy-now').click(function() {
var productId = $('#product-id').val().toString();
var productName = $('#product-name').val();
var productPrice = parseFloat($('.product-price').text());
var productQuantity = parseInt($('.input-quantity').val());
var productImgSrc = $('.product-image img').attr('src');
var productDesc = $('.product-description').text();

// 获取折扣价格
var discountPriceText = $('#type2').text();
var discountPrice = null;
if (discountPriceText) {
var priceText = discountPriceText.split(': ')[1];
discountPrice = parseFloat(priceText);
}

var selectedProduct = {
id: productId,
name: productName,
price: productPrice,
discountPrice: discountPrice, // 添加这一行
quantity: productQuantity,
imgSrc: productImgSrc,
desc: productDesc
};

// 添加到消息中心
addMessageToLocalStorage('Bought', productName);

// 使用一个新的localStorage key来存储"Buy Now"商品
var buyNowProducts = JSON.parse(localStorage.getItem('buyNowProducts')) || [];
buyNowProducts.push(selectedProduct);
localStorage.setItem('buyNowProducts', JSON.stringify(buyNowProducts));

window.location.href = '/payment';
});

$('.btn-add-to-cart').click(function() {
var productId = $('#product-id').val().toString();
var productName = $('#product-name').val();
var productPrice = parseFloat($('.product-price').text());
var productQuantity = parseInt($('.input-quantity').val());
var productImgSrc = $('.product-image img').attr('src');
var productDesc = $('.product-description').text();

// 获取折扣价格
var discountPriceText = $('#type2').text();
var discountPrice = discountPriceText ? parseFloat(discountPriceText) : null;

var cart = JSON.parse(localStorage.getItem('cart')) || [];

var productInCart = cart.find(function(item) {
return item.id === productId.toString();
});

if (productInCart) {
productInCart.quantity += productQuantity;
} else {
cart.push({
id: productId,
name: productName,
price: productPrice,
discountPrice: discountPrice, // 添加这一行
quantity: productQuantity,
imgSrc: productImgSrc,
desc: productDesc
});
}

// 添加到消息中心
addMessageToLocalStorage('Added to cart', productName);

localStorage.setItem('cart', JSON.stringify(cart));

alert('Product added to cart successfully!');
});

// 提交评论函数
function postComment() {
var comment = $('#comment-input').val();
if (comment !== '') {
$.ajax({
url: '/product/' + productName + '/comment', // 使用 productName 而不是 productId
method: 'POST',
data: { comment: comment },
success: function(response) {
if (response.success) {
alert('Comment submitted successfully!');
$('#comment-input').val('');
location.reload();
} else {
alert('Failed to submit comment: ' + response.message);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Failed to submit comment: ' + errorThrown);
}
});
} else {
alert('Please enter a comment.');
}
}

// 点击提交按钮提交评论
$('#submit-comment-btn').click(function(event) {
event.preventDefault();
postComment();
});
// 添加消息到 localStorage 给消息中心用的
function addMessageToLocalStorage(action, productName) {
var message = {
time: new Date().toLocaleString(),
action: action,
product: productName
};

var messages = JSON.parse(localStorage.getItem('messages')) || [];
messages.push(message);
localStorage.setItem('messages', JSON.stringify(messages));
}

});

product-list.js

$(document).ready(function() {
let allProducts;
$('#product-upload-form').on('submit', function(e) {
e.preventDefault();
const name = $('#name').val();
const category = $('#category').val();
const desc = $('#desc').val();
const price = $('#price').val();
const imgSrc = $('#imgSrc').val();
const discount = $('#discount').val();

// 添加验证逻辑
if (!name || !category || !desc || !price || !imgSrc||! discount) {
alert('所有字段都是必填项');
return;
}

const productData = {
name,
category,
desc,
price,
imgSrc,
discount,
};

$.ajax({
url: '/api/products',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(productData),
dataType: 'json',
success: function (response) {
// Handle the response from the server
$.get("/api/products", function(products) {
allProducts = products;
renderProducts(products);
});
},
error: function (error) {
console.error(error);
}
});
const discounts = JSON.parse(localStorage.getItem('discounts')) || {};
discounts[name] = discount;
localStorage.setItem('discounts', JSON.stringify(discounts));
});

function renderProducts(products) {
$('.product-list').empty();
products.forEach(product => {
const productItem = `
<div class="product-item">
<img class="product-img" src="${product.imgSrc}" alt="${product.name}">
<span class="product-name">${product.name}</span>
<span class="product-category">${product.category}</span>
<span class="product-desc">${product.desc}</span>
<span class="product-price">${product.price}</span>
</div>
`;
$('.product-list').append(productItem);
});

// Re-add click event to product items
$('.product-item').on('click', function() {
const productName = $(this).find('.product-name').text();
window.location.href = `/product/${productName}`;

});
}

$.get("/api/products", function(products) {
allProducts = products;
renderProducts(products);

// Add click event to category buttons
$('.category').on('click', function() {
const categoryName = $(this).text().trim().toLowerCase();
const filteredProducts = allProducts.filter(product => product.category.toLowerCase() === categoryName);
if (filteredProducts.length === 0) {
$('.product-list').html('<p>No products found for this category</p>');
} else {
renderProducts(filteredProducts);
}
});

// Search categories and product names
$('.search-categories').on('keyup', function() {
const searchText = $(this).val().trim().toLowerCase();
const filteredProducts = allProducts.filter(product => product.category.toLowerCase().includes(searchText) || product.name.toLowerCase().includes(searchText));
if (filteredProducts.length === 0) {
$('.product-list').html('<p>No products found for this search</p>');
} else {
renderProducts(filteredProducts);
}
});

});
});

function validateForm() {
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm-password").value;
if (password != confirmPassword) {
alert("The two password inputs are inconsistent.");
return false;
}
return true;
}

shopping-cart.js

$(document).ready(function() {
var cartItems = JSON.parse(localStorage.getItem('cart')) || [];

function updateCart() {
$('.products-container').empty();

cartItems.forEach(function(item) {
var productRow = `
<div class="product-row">
<div class="image-container">
<img src="${item.imgSrc}" alt="Product Image">
</div>
<div class="product-info">
<h3>${item.name}</h3>
<p>${item.price} x ${item.quantity}</p>
<p>${item.desc}</p>
</div>
<div class="buttons">
<button class="remove-btn" data-product-id="${item.id}">Remove</button>
</div>
</div>
`;

$('.products-container').append(productRow);
});
}

function removeFromCart(productId) {
cartItems = cartItems.filter(function(item) {
return item.id !== productId;
});

localStorage.setItem('cart', JSON.stringify(cartItems));

updateCart();
}

$(document).on('click', '.remove-btn', function() {
var productId = $(this).data('product-id');
removeFromCart(productId);
});
$(".settlement-btn").click(function () {
window.location.href = "/payment";
});

updateCart();
});