本项目是复旦大学 2025 年春季课程**《数据库及实现》**(DATA130039.01)的课程项目(PJ)。
我们倾心打造了一个功能完备、界面精美的线上购物书店系统。后端设计经过精心考量,确保数据操作的严谨与高效;前端界面则追求极致的用户体验,力求简洁而美观。我们诚挚欢迎所有复旦大学的同学们参考与借鉴,共同进步!
本项目采用前后端分离的架构,确保了开发的灵活性与系统的可扩展性。
后端核心采用 Flask 框架,一个基于 Python 的微型 Web 框架。
Flask 的“微”体现在它提供构建 Web 应用程序所需的核心功能,但不强制捆绑大量额外的工具和库。这种轻量级、高度灵活的特性,让开发者可以根据项目具体需求自由选择和集成所需的组件,从而构建出精简而强大的服务。在本购物书店项目中,Flask 负责处理所有的数据逻辑、用户认证、订单管理等核心业务。
前端界面则由 React 驱动,一个由 Facebook(现更名为 Meta)开发的 JavaScript 库,专注于构建用户界面(UI)。
React 的强大之处在于其组件化的思想。通过将复杂的 UI 拆分成独立、可复用的组件,开发者能够高效地构建交互性强且易于维护的 Web 应用程序。在我们的书店项目中,React 负责呈现商品列表、购物车、用户界面等所有用户可见的元素,提供了流畅且直观的交互体验。
按照以下步骤,即可轻松启动你的书店项目!
-
克隆仓库:
git clone https://github.com/YinZT1/DB_sql_MIDPJ.git
-
后端配置:
-
安装依赖库:
pip install Flask Flask-Cors PyJWT python-dotenv openai Werkzeug
✅ 无需担心版本问题,直接安装即可。
-
-
前端配置:
-
进入前端目录:
cd frontend
-
安装前端依赖:
npm install
✅
frontend
目录下已包含配置文件,npm install
会自动下载所有必需的库。- 温馨提示: 如果终端提示
npm
不存在,说明您的电脑尚未安装 Node.js。请前往 Node.js 官网 根据指引进行安装。
- 温馨提示: 如果终端提示
-
安装跨域请求库:
npm install cors
✅ 由于前后端运行在不同端口,此库是实现数据顺畅传输的关键。
-
-
设置 Python 路径并启动后端服务:
export PYTHONPATH=$PYTHONPATH:$(pwd)/backend python backend/flask/app.py
这两步是为了确保 Python 能够正确解析项目内部的相对路径。
-
打开另一个终端,启动前端服务:
cd frontend npm run dev
随后,终端会提供一个 URL,点击即可在浏览器中打开项目。
-
数据导入:
库中已经包含了sales.db,这是数据库的可迁移版本。无需在额外导入数据库!
对于 macOS 用户,app.py
中默认的 5000 端口可能不太友好(可能被系统占用)。您需要进行以下修改:
- 将
app.py
中的app.run()
修改为:app.run(host='0.0.0.0', port=5001, debug=True)
- 同时,修改
frontend/src/api/api.jsx
中API_BASE_URL
的端口:const API_BASE_URL = 'http://localhost:5001';
- 尹志涛:前后端代码框架搭建,前后端代码实现。
- 刘丁嘉:前后端代码实现。
- 陈睿阳:前后端代码实现。
- 袁康瑞:前端样式设计。