Web System
基于 Flask 的多角色购物网站（shopping.vertexf.top）
围绕 Web 开发技术期末大作业完成的在线购物系统，采用 Flask、Jinja2、SQL Server、Firebase Auth、Gunicorn 与 Nginx，形成前台交易、商家经营、管理员治理和安全防护闭环。
系统已部署至 shopping.vertexf.top，访问链路由 Nginx HTTPS 入口、Gunicorn 托管 Flask 应用、SQL Server 业务数据库和 /uploads/ 静态资源路径组成。
总体架构按“前端展示层、应用服务层、业务数据层、静态资源层、后台任务层”分层组织，页面展示、业务判断、数据存储、资源访问和订单状态推进边界清晰。
角色体系采用普通用户、商家、管理员三类身份，后端通过 login_required、merchant_required、admin_required 等路由级权限控制实现访问边界。
交易主线覆盖商品浏览、搜索、购物车、结算拆单、钱包支付、订单状态日志、商家发货、确认收货和商家结算。
商家侧支持入驻申请、管理员审核、店铺生成、商品新增与编辑、富文本图片上传、店铺主页维护和商家订单处理。
安全策略覆盖运行时配置、Firebase 会话、本地兼容登录、密码哈希升级、CSRF 防护、安全响应头、请求限流、上传校验、富文本清洗和统一错误响应。
Timeline
论文结构
系统概要设计确定“普通用户负责交易、商家负责经营、管理员负责治理”的角色结构，并将系统拆分为前端展示层、应用服务层、业务数据层、静态资源层和后台任务层。
数据库设计围绕 users、roles、user_roles、merchant_applications、merchants、shops、categories、products、product_media、carts、cart_items、user_addresses、orders、order_items、order_addresses、order_status_logs、shipments、wallets、wallet_transactions、request_rate_limits 等表建立业务结构。
系统详细设计按注册登录、首页、搜索、商品列表、商品详情、购物车、地址、结算拆单、订单支付、订单流转、钱包、用户主页、商家入驻、管理员后台、商家审核、钱包调账、商品管理、店铺主页和富文本上传等模块展开实现。
安全策略将敏感配置从业务代码中分离，并在认证、会话、权限控制、CSRF、限流、上传、富文本、交易状态和错误响应等位置设置防护。
运行测试与安装在 Ubuntu 22.04 服务器上完成正式部署，并整理 Windows 本地运行包、数据库恢复说明、Nginx 配置、systemd 服务和运行截图。
特色与改进项目形成完整业务闭环和双运行环境；后续可扩展多店铺经营、审计日志、售后流程、库存预警、运行监控和持续部署。
Methods
实现方法
Flask 3主程序 app.py 负责路由分发、业务处理、权限判断、订单状态流转、上传校验、安全头和错误响应。
Jinja2模板目录包含首页、商品页、搜索页、购物车、结算、订单、钱包、商家后台、管理员后台、认证和错误页等页面。
SQL Server作为核心业务数据库，保存用户、角色、商家、店铺、商品、购物车、订单、地址、钱包、流水、限流状态等结构化数据。
pyodbcFlask 通过 ODBC Driver 18 访问 SQL Server，统一执行业务查询、状态更新、库存处理和钱包流水写入。
Firebase Auth用于邮箱认证和 Session Cookie 校验，并通过 sync_business_user 将外部认证身份同步为业务用户。
RBAC数据库使用 users、roles、user_roles 构成角色基础，后端用装饰器限制普通登录、商家页面和管理员页面。
CSRF所有 POST、PUT、PATCH、DELETE 请求默认进入 CSRF 校验，并在 HTML 表单响应阶段自动补入隐藏 Token。
Rate Limitrequest_rate_limits 表保存限流窗口，登录、密码重置、支付、发货、确认收货、钱包调账和上传等高风险操作均被限制。
Pillow头像、站点图标、商品图、店铺 Logo 和富文本图片上传均通过图片有效性校验、压缩和重新编码。
Quill商品说明和店铺主页编辑支持富文本录入，后端统一进行 HTML 清洗和受控输出。
Gunicorn线上应用由 systemd 管理 Gunicorn 服务，绑定本机回环地址后交给 Nginx 反向代理。
Nginx负责 shopping.vertexf.top 的 HTTPS 入口、动态请求代理和 /uploads/ 上传资源别名。
Mermaid
业务闭环
flowchart LR U[普通用户] --> Browse[商品浏览与搜索] Browse --> Cart[购物车] Cart --> Checkout[结算与按店铺拆单] Checkout --> Wallet[钱包支付] Wallet --> Order[订单与状态日志] Order --> Ship[商家发货] Ship --> Receipt[确认收货与商家结算] U --> Apply[商家入驻申请] Apply --> Admin[管理员审核] Admin --> Merchant[商家角色与店铺生成] Merchant --> Product[商品管理与店铺主页] Product --> Browse Admin --> Branding[站点品牌设置] Admin --> Adjustment[钱包调账] Worker[后台状态任务] --> Order
Gallery
运行截图
Resources