项目介绍
电商门户网站
技术栈
本电商平台构建于一系列强大的技术和框架之上，以确保用户获得卓越的体验和无缝的购物流程。
- Bootstrap 3 - 提供响应式设计，使得网站在各种设备上均能展现出最佳效果。
- Layui 2 - 以其优雅的UI组件，增强了界面的美观性和用户的交互体验。
- Flask - 作为后端框架，它提供了简洁而强大的API，保证了网站的高效运行和易于扩展。
- Vue 3 - 前端框架的现代化选择，它通过双向数据绑定和组件化架构提升了开发效率和用户体验。
- jQuery - 经典的JavaScript库，简化了DOM操作和事件处理，为网站的交互性提供了坚实基础。
首页导航栏 --(待完善)
<div id="app">
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">JD</a>
</div>
<div class="navbar-links">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">切换企业版</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown cart">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="layui-icon layui-icon-cart-simple"></i> 购物车
<span class="caret">
<span class="badge">{{ session["cart_count"] }}</span>
</span>
</a>
</li>
<li class="dropdown user-menu">
{% if session["username"] %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{ session["username"] }} <i class="layui-icon layui-icon-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="/user/logout"><i class="layui-icon layui-icon-logout"></i> 退出</a></li>
<li><a href="/user/help"><i class="layui-icon layui-icon-help"></i> 帮助</a></li>
</ul>
{% else %}
<li><a href="/user/login"><i class="layui-icon layui-icon-username"></i> 登录</a></li>
<li><a href="/user/register"><i class="layui-icon layui-icon-username"></i> 注册</a></li>
{% endif %}
</li>
<li class="dropdown myjd-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="layui-icon layui-icon-username"></i> 我的京东<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="/user/{{ session["username"] }}/userinfo"><i
class="layui-icon layui-icon-set"></i>
个人中心</a></li>
<li><a href="/user/{{ session["username"] }}/orders"><i
class="layui-icon layui-icon-cart-simple"></i>
我的订单</a></li>
<li><a href="/user/{{ session["username"] }}/evaluation"><i
class="layui-icon layui-icon-star"></i>
我的评价</a></li>
<li><a href="/user/{{ session["username"] }}/collection"><i
class="layui-icon layui-icon-star"></i>
我的收藏</a></li>
<li><a href="/user/{{ session["username"] }}/footprint"><i
class="layui-icon layui-icon-star"></i>
我的足迹</a></li>
<li><a href="/user/{{ session["username"] }}/coupon"><i
class="layui-icon layui-icon-star"></i>
我的优惠券</a></li>
<li><a href="/user/{{ session["username"] }}/address"><i
class="layui-icon layui-icon-star"></i>
收货地址</a></li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
index.css
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
text-align: center;
padding: 20px 0;
}
注册 (可以根据自己需求改成flask-wtf表单)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<form class="layui-form layui-card" action="{{ url_for('register') }}" method="post">
<h2 class="layui-card-header">注册</h2>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="confirm_password" required lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="register">立即注册</button>
</div>
</div>
</form>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
// 监听提交
form.on('submit(register)', function(data){
// 提交表单，这里Layui会自动处理
});
});
</script>
</body>
</html>
登录(可以根据自己需求改成flask-wtf表单)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<form class="layui-form layui-card" action="{{ url_for('login') }}" method="post">
<h2 class="layui-card-header">登录</h2>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
</div>
</div>
</form>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
// 监听提交
form.on('submit(login)', function(data){
// 提交表单，这里Layui会自动处理
});
});
</script>
</body>
</html>
app
import os
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
app = Flask(__name__)
app.secret_key = os.urandom(24)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:password@localhost/web'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False #防止警告信息
db = SQLAlchemy(app)
# 用户模型
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(20), unique=True, nullable=False)
password = db.Column(db.String(60), nullable=False)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
user = User.query.filter_by(username=username).first()
if user and check_password_hash(user.password, password):
return redirect(url_for('home')) # 登录成功重定向首页
else:
flash('登录失败，请检查用户名或密码！') # 显示错误消息
return render_template('login.html')
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
confirm_password = request.form.get('confirm_password')
# 检查两次输入的密码是否一致
if password != confirm_password:
flash('两次输入的密码不一致！')
return redirect(url_for('register'))
# 检查用户名是否已存在
user = User.query.filter_by(username=username).first()
if user:
flash('该用户名已被注册！')
return redirect(url_for('register'))
# 创建新用户 hash加密
hashed_password = generate_password_hash(password, method='sha256')
new_user = User(username=username, password=hashed_password)
db.session.add(new_user)
db.session.commit()
flash('注册成功，请登录！')
return redirect(url_for('login'))
return render_template('register.html')
if __name__ == '__main__':
app.run(debug=True,host="0.0.0.0")
扫一扫
2946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
