获取Github Python+Vue 商城项目

推荐项目1：

https://github.com/EugeneDae/django-vue-cli-webpack-demo

亮点：

• 项目是用 Django + Vue CLI + Webpack 集成的。
• 前端代码放在 client/ 目录，后端在 server/ 目录。Vue 的构建产物被让 Django 模板引用。也就是说，并非接口 + 前端完全分离，而是前端打包后嵌入 Django 模板里面。

项目总体结构

django-vue-cli-webpack-demo/
├── client/                ← Vue 前端项目（用 Vue CLI 创建）
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── webpack.config.js
│
├── server/                ← Django 后端项目
│   ├── manage.py
│   ├── demo/              ← Django 主应用
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── views.py
│   └── templates/
│       └── index.html     ← Django 模板（引入 Vue 打包文件）
│
└── README.md

项目运行原理

Vue 部分(client/)
 └── npm run build → dist/ 生成静态文件(js/css)

Django 部分(server/)
 └── templates/index.html 引用 dist/js/app.js

用户访问 http://127.0.0.1:8000/
 → Django 返回模板 index.html
 → Vue 在浏览器加载并接管前端交互

安装前提

先确保你本地已经安装好：

Node.js ≥ 12.x（推荐用 nvm
 管理）
npm 或 yarn
Python ≥ 3.8
pipenv 或 virtualenv（虚拟环境工具）
git

克隆项目

git clone https://github.com/EugeneDae/django-vue-cli-webpack-demo.git
cd django-vue-cli-webpack-demo

安装 Django 后端依赖

进入 server 目录，创建虚拟环境，安装依赖（没有依赖可以跳过）

cd server

python -m venv .venv
source .venv/bin/activate   # macOS/Linux
venv\Scripts\activate      # Windows

# pip install -r requirements.txt
# 如果没有 requirements.txt，至少安装 Django，这里需要根据项目中 readme 指导安装django即可
pip install django

安装 Vue 前端依赖

进入前端目录：

cd ../client
npm install

Node.js v17+ 版本中运行 Webpack 4 或旧版 Vue CLI 时，Node.js 的 OpenSSL 3 安全机制和旧版 Webpack 的哈希算法不兼容，在终端运行打包命令前，加入一个兼容参数，让 Node.js 使用旧版 OpenSSL 算法，绕过 Webpack 4 的兼容性问题。

# macOS / Linux：
export NODE_OPTIONS=--openssl-legacy-provider 

# windows PowerShell 如下：
# setx NODE_OPTIONS "--openssl-legacy-provider"

构建 Vue 前端（打包）

npm run build

执行完后，会在 /server/static/dist 目录生成打包好的静态文件。

这些文件会被 Django 模板引用（Django 模板路径在 server/templates/index.html）。

启动 Django 后端

cd ../server
python manage.py runserver

访问：

PyCharm打开项目（可选）

左上角：文件->打开->找到django-vue-cli-webpack-demo项目路径打开

配置 PyCharm Python 解释器

打开 Preferences → Project → Python Interpreter，选择你刚创建的 .venv/bin/python

终端执行后台运行命令即可

推荐项目2：

https://github.com/grunsho/django-vue-ecommerce?utm_source=chatgpt.com

特点：

• 直接集成的商城项目
• 前后端分离

功能：

• 用户身份验证和授权
• 产品浏览、搜索和筛选
• 购物车功能
• 结账和支付处理集成
• 订单管理
• 管理员控制面板，用于管理产品、订单和用户

克隆项目

git clone https://github.com/grunsho/django-vue-ecommerce.git
cd django-vue-ecommerce

后端 Django 部署

# 进入 Django 目录：
cd djackets_django

# 创建虚拟环境
python -m venv .venv
source .venv/bin/activate  # Mac/Linux
venv\Scripts\activate     # Windows

# 安装依赖：
pip install -r requirements.txt

# 数据库迁移：
python manage.py migrate

# 创建超级管理员（用于后台管理）：
python manage.py createsuperuser

# 启动 Django 服务：
python manage.py runserver

前端 Vue 部署

# 进入 Vue 项目目录：
cd ../djackets_vue

# 安装依赖：
npm install

# 启动开发服务器：
npm run serve

访问网站

• 前端页面：http://localhost:8080
• 后端 API：http://localhost:8000/api/v1/
• Django 管理后台：http://localhost:8000/admin/

推荐项目3：美多商城（后续课程项目）

https://github.com/lijiahao1996/meiduo

这是一个「前后端分离 + 多容器」的一整套电商项目，你完全可以当成“电商脚手架模板”来用。重点是：保留代码、配置、Docker/CI 文件，清理掉所有运行时数据。

生产化架构：

用户浏览器
    ⇅ HTTP/HTTPS
前端 Nginx + Vue (容器：meiduo_mall_frontend)
    ⇅ HTTP (REST API)
后端 Django + uWSGI (容器：meiduo_mall)
    ↘ MySQL (容器/数据卷：data/mysql)
    ↘ Redis (容器/数据卷：data/redis)
    ↘ Elasticsearch (容器/数据卷：data/es)
    ↘ Celery 异步任务 (celery_worker 容器，通过 Redis/MQ 通信)
    ↘ 外部服务：支付宝、短信(YunTongXun)、QQ OAuth、钉钉登录、FastDFS 等

再加上：

• docker-compose.yaml：把这些服务编排到一起
• Dockerfile（后端 + 前端）：定义镜像
• Jenkinsfile + jenkins_release.py：CI/CD 发布流水线
• check_meiduo.sh / rebuild_clean.sh：本地诊断 + 清理脚本

目录

data/ —— 全是运行时数据（不要进 Git）

• data/mysql/
  • 里面是 MySQL 数据文件 + 证书 + redo log + undo log + schema/table ibd
  • meiduo_mall/*.ibd 就是你的业务表（tb_users、tb_goods、tb_orders...）
  • 对于“模板项目”，这些东西应该视为 运行时数据卷，而不是仓库的一部分。
• data/redis/appendonly.aof
  • Redis 的 AOF 持久化文件，同样是运行时数据。
• data/es/elasticsearch/nodes/
  • ES 的节点数据，也是运行时。
• data/logs/meiduo_mall.log
  • 运行日志。
• data/static/
  • 这是 Django collectstatic 后的静态文件：
    • admin/、rest_framework/、rest_framework_swagger/、ckeditor/ …
  • 理论上也属于“生成产物”，可以在部署时由 collectstatic 生成。

结论：
data/ 整个目录应该在模板里清空，并加到 .gitignore，仅保留目录结构占位（或在 README 说明部署时会自动挂载卷）。

meiduo_mall/ —— 后端 Django 项目核心

meiduo_mall/
├── manage.py          # Django 启动入口
├── Dockerfile         # 后端镜像
├── requirements.txt   # Python 依赖
├── start.sh           # 容器启动脚本
├── uwsgi.ini          # uWSGI 配置
├── celery_tasks/      # Celery 任务
├── packaging_tutorial/# 一个钉钉登录工具的打包示例（可选）
├── scripts/           # 预留脚本目录
└── meiduo_mall/       # Django 项目同名目录
    ├── apps/          # 业务应用（areas, carts, goods, orders...）
    ├── libs/          # 项目级共用库
    ├── settings/      # settings_dev / settings_prod
    ├── templates/     # 模板（目前主要 search）
    ├── urls.py        # 总路由
    ├── utils/         # 工具 & 通用组件
    ├── views.py       #（通常是一些全局视图/首页等）
    ├── asgi.py / wsgi.py
    └── ...

重点小目录：

• apps/：整个业务逻辑都在这，以后你做模板时最重要的资产
  • users、orders、payment、goods、carts、oauth 等，对应电商域模型。
• settings/
  • settings_dev.py：本地/开发环境用，DEBUG 打开，使用本地服务配置。
  • settings_prod.py：生产环境 config，Nginx/uWSGI 部署用。
• utils/
  • alipay.py：对支付宝 SDK 的封装。
  • db_router.py：如果有多数据库时的路由。
  • DingTalkLoginTool.py：钉钉登录相关。
  • fastdfs/：FastDFS 客户端/配置。
  • exceptions.py / pagination.py / tools.py：通用异常封装、分页、工具函数等。
• celery_tasks/
  • config.py / main.py：Celery 初始化。
  • email/tasks.py、sms/tasks.py：发邮件、发短信等异步任务。

这些部分是你以后所有项目复用的“后端脚手架核心”。

meiduo_mall_frontend/ —— Vue 前端项目

meiduo_mall_frontend/
├── Dockerfile
├── nginx.conf / nginx.conf.bak
├── package.json / package-lock.json
├── vue.config.js
├── public/index.html
└── src/
    ├── api/        # 所有 API 调用封装
    ├── components/ # 头部/底部/通用组件
    ├── views/      # 各个页面：Home, Login, Register, Cart...
    ├── router/     # 路由
    ├── store/      # Vuex
    ├── App.vue
    └── main.js

在“模板思路”里：

• src/api/：统一 API 网关，后续换后端/域名/前缀，只改这里和 vue.config.js。
• nginx.conf：容器内 Nginx 负责：
  • 反向代理 /api/ -> 后端 Django
  • 直接服务前端打包后的静态资源（dist/）
• dist/：打包产物，也属于生成文件，不适合进 Git（除非你特意想做“静态部署仓库”）。

其他顶层文件/目录

docker-compose.yaml

• 编排所有容器：后端、前端、MySQL、Redis、ES、Celery、可能还有 Nginx。
• 是整个“本地一键起项目”的核心。

Jenkinsfile + jenkins_release.py

• CI/CD：从 Git 拉代码、构建镜像、推仓库、部署到测试/生产等。

check_meiduo.sh

• 自定义检查脚本（比如端口、进程、URL 健康检查等），偏项目定制。

rebuild_clean.sh

• 清理 + 重建用的脚本（删容器、删数据卷等），偏运维辅助。

LICENSE / README.md

• 协议 + 项目说明。

如果要拿它当“长期基础模板”，要关注 / 改造什么？

必须重点关注 & 常改的文件

后端：

• meiduo_mall/manage.py
• meiduo_mall/meiduo_mall/settings/settings_dev.py
• meiduo_mall/meiduo_mall/settings/settings_prod.py
  • 数据库连接（host、port、user、password、db 名）
  • Redis、ES 地址
  • 第三方配置（支付宝、短信、QQ OAuth、邮箱配置）
  • SECRET_KEY、DEBUG、ALLOWED_HOSTS
  • 静态文件路径、MEDIA 路径、LOGGING 等
• meiduo_mall/meiduo_mall/urls.py
  • 全局路由结构，你以后可能要精简/划分命名空间。
• meiduo_mall/meiduo_mall/apps/*
  • 后端业务模块，以后新增模块就在这里；你也可以把过于业务化的删掉/精简，比如推广、某些运营活动之类。
• meiduo_mall/meiduo_mall/utils/*、celery_tasks/*
  • 通用工具、异步任务框架，这是你的“可复用能力库”。

前端：

• meiduo_mall_frontend/package.json
  • Vue 版本、依赖（axios、vue-router、vuex 等），以后你作为模板就从这里 fork。
• meiduo_mall_frontend/src/api/*.js
  • 所有 API 的 URL、统一封装。
• meiduo_mall_frontend/vue.config.js
  • devServer 代理、打包路径、跨域配置等。
• meiduo_mall_frontend/nginx.conf
  • 生产环境下的前端 Nginx 配置：静态目录、反向代理、CORS、压缩、缓存策略等。

容器 & CI：

• docker-compose.yaml
  • 服务名、镜像名、端口映射、数据卷挂载、依赖关系，后续你所有项目可以基于这个 docker-compose 做微调。
• meiduo_mall/Dockerfile
• meiduo_mall_frontend/Dockerfile
  • 后端/前端镜像构建流程。
• meiduo_mall/start.sh、meiduo_mall/uwsgi.ini
  • uWSGI 启动参数、进程数/线程数、日志路径、静态文件目录等。
• Jenkinsfile + jenkins_release.py
  • CI/CD 模板：后续只需要替换项目名、分支名、K8s 命名空间、镜像仓库地址等，就能重复使用。

建议改造成「通用模板配置」的点

这些是你以后肯定会踩的点，可以提前抽象：

1. 环境变量化
   • 不要把 DB 密码、支付宝 key、短信账号写死在 settings 里。
   • 用环境变量 + .env（docker-compose 里 env_file）的方式抽出去。
2. dev / prod 统一入口
   • 用 DJANGO_SETTINGS_MODULE=meiduo_mall.settings.settings_dev / settings_prod 控制，
   • 在 Dockerfile 或 start.sh 里通过环境变量切换。
3. 服务端口 & 域名
   • 前后端通信路径：
     • dev: localhost:8080 -> localhost:8000（通过 vue devServer 代理）
     • prod: Nginx 代理 /api/ -> 后端容器
   • 尽量把 URL 前缀抽象成配置（比如 /api/v1）。
4. 日志 & 数据卷路径
   • data/ 下的所有东西在生产环境应该挂到外部磁盘，而不是写死路径。
   • 你可以统一规范：/data/meiduo/{mysql,redis,es,logs,static} 之类。
5. 第三方服务可选化
   • 支付宝、QQ 登录、短信服务、钉钉登录、FastDFS …
   • 模板里可以把它们做成“可选模块”，通过配置开/关，避免你以后每个项目都得改代码。