Django 4.2 + Vue 运动商城：前后端分离课程设计实战指南

简介这套运动商城系统是一份完整的Python课程设计源码包基于Django与Vue实现前后端分离架构面向高校计算机相关专业学生及需要快速搭建商城项目的开发者。项目后端通过Django的views.py提供API接口前端Vue代码已打包至static目录同时附带API接口文档、数据库脚本与详细项目文档便于理解从数据库设计到接口联调的完整流程。压缩包共119个文件包含41个Python源码文件、5个Markdown文档、SQL数据库脚本、JSON配置以及用于展示的商品图片等素材整体大小约12.08MB目录结构清晰运行步骤明确。目前已有190人学习参考对于正在做课程设计、毕业设计或学习前后端分离开发的人来说是一套上手度高、能直接运行并二次改造的优质实践资源。1. 运动商城课程设计Django 4.2 与 Vue 分离式架构的起点做过课程设计的人都知道最难的不是写代码而是让代码同时满足「能跑、能讲、能答辩」三个条件。这个基于 Django Vue 的运动商城系统恰恰把这三件事揉进了一个前后端分离的骨架里前端 Vue 代码已经编译成静态资源放在 static 目录后端用 Django views.py 手写 API 接口数据库用 MySQL 8 承载中间靠 PyMySQL 驱动连接。你拿到手的是一份可以直接启动的完整工程包括 sports_shop.sql 数据库脚本和一份 API 接口文档.md。对你的价值在于不需要从头构思商城逻辑而是把精力花在理解「请求怎么从前端页面走到数据库再返回」这条主链路上恰好这也是课程设计答辩时老师最常追问的环节。2. 请求链路与目录结构static 静态资源如何与 views.py 协作2.1 从 index.html 到 API 接口的完整路径这个项目的核心特征是前后端分离但分离得比较聪明——前端没有单独跑一个 Node 服务而是构建后直接放进 Django 能托管的 static 目录。浏览器访问根路径时Django 直接吐出index.html同时加载chunk-vendors.e92fd658.css和app.282f74b9.css这些构建产物。页面里的 JavaScript 会向后端发 Ajax 请求目标地址被写死为http://127.0.0.1:8888。请求打进来之后Django 的 URL 路由把请求分发到views.py中对应的函数函数内部执行数据库查询把结果转换成 JSON 返回。前端拿到数据后渲染成商品列表、购物车、订单页。我一般会把这条链路画成一张简单的时序图给答辩老师看浏览器 → 静态页面 → fetch 请求 → Django 路由 → views.py → dao.py → MySQL一图说清整个工程的运转逻辑。列出根目录下的关键文件它的布局其实很克制sports_shop/ ├── index.html # Vue 构建后的入口页面 ├── static/ # 所有静态资源JS/CSS/图片 │ ├── app.282f74b9.css │ ├── chunk-vendors.e92fd658.css │ ├── lunbo1.5cb0f226.jpg # 首页轮播图 │ └── dock2.66d71121.jpeg ├── sports_shop.sql # MySQL 数据库初始化脚本 ├── sports_shop_backend_war/ # Django 项目主目录 │ ├── manage.py │ ├── dao.py # 数据库连接与查询封装 │ └── views.py # API 接口实现 └── API接口文档.md # 接口列表与参数说明注意dao.py是一个独立于 Django ORM 的数据库访问层文件也就是说这个项目的数据库操作没有走 Django 自带的 models.py 映射而是直接用 PyMySQL 执行 SQL。好处是数据库逻辑透明出问题容易排查代价是少了 ORM 的自动转义写查询时需要注意 SQL 注入风险。2.2 views.py 中 API 接口的设计模式项目里的 API 接口全部集中在views.py每个接口对应一个函数函数里先拿请求参数再调dao.py里的查询方法最后用JsonResponse返回。这种写法在课程设计里非常常见它把「路由 → 业务逻辑 → 数据访问」三层拆得足够简单答辩时每一层都能单独讲清楚。下面是一段符合该项目风格的接口代码示例对应商品列表接口# views.py 中的商品列表接口示例 import json from django.http import JsonResponse from dao import get_product_list # 从 dao.py 中导入数据查询函数 def product_list(request): if request.method GET: # 从 query string 中取分页参数带默认值 page int(request.GET.get(page, 1)) page_size int(request.GET.get(pageSize, 10)) # 调用 dao 层查询数据库 data get_product_list(page, page_size) # 统一返回格式code 表示状态data 存放业务数据 return JsonResponse({code: 0, data: data, msg: success}) return JsonResponse({code: -1, data: [], msg: 请求方法不支持})这段代码有几个细节值得注意。page和pageSize从前端 URL 参数中获取比如GET /api/products?page2pageSize8JsonResponse是 Django 自带的 JSON 响应类会帮我们设置Content-Type为application/json返回格式统一用code字段标记正常或异常这是前后端约定好的数据契约。你的前端页面请求接口时如果返回的code不是 0就需要在页面里弹出错误提示。接口文档.md 里记录了所有接口的路径、请求方式和参数。拿到项目后建议先把文档里的接口列表和views.py里的函数逐个对照用关键字如product_detail、add_to_cart搜索把每个接口对应的 URL 标出来这是你后面调试的基础地图。3. 数据库导入与连接配置MySQL 8 PyMySQL 的完整落地3.1 sports_shop.sql 的导入操作拿到项目后第一件事是准备数据库这一步不能跳过。系统要求 MySQL 8如果你的本机装的是 5.7 也能跑大部分查询但强烈建议直接用 8.0因为项目里的 SQL 脚本可能用了 8.0 才支持的语法比如窗口函数或utf8mb4的默认字符集。进入 MySQL 的命令行执行导入# 登录 MySQL输入密码后进入交互模式 mysql -u root -p # 在 MySQL 交互模式中先创建数据库再导入 CREATE DATABASE sports_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE sports_shop; SOURCE /path/to/sports_shop.sql;也可以用重定向方式直接导入适合在 Windows 的 cmd 中操作mysql -u root -p sports_shop sports_shop.sql导入完成后用几条 SQL 验证数据表是否就绪-- 查看所有表 SHOW TABLES; -- 统计商品表记录数确认数据已经灌入 SELECT COUNT(*) FROM product;导入最常报的错有两个。一个是Unknown database sports_shop说明你还没创建数据库或者数据库名拼写不一致另一个是ERROR 1366 (HY000): Incorrect string value说明 SQL 文件里的中文字符与数据库字符集不匹配。你需要在创建库时明确指定utf8mb4再把 SQL 文件的编码转成 UTF-8 格式用 Notepad 或 VS Code 另存时选择 UTF-8。3.2 dao.py 中数据库连接参数的修改dao.py是后端连接 MySQL 的唯一入口它通常会在文件顶部维护一段连接配置你的任务是把登录名和密码改成自己 MySQL 的账号。下面是典型写法# dao.py 文件头部——MySQL 连接配置 import pymysql DB_CONFIG { host: 127.0.0.1, # 数据库地址本机就是回环地址 port: 3306, # MySQL 默认端口改了则要对应修改 user: root, # 改成你自己的 MySQL 登录名 password: 123456, # 改成你自己的密码 database: sports_shop, # 数据库名称与导入 sql 时的库名保持一致 charset: utf8mb4, autocommit: True, # 自动提交事务避免手动 commit } def get_connection(): return pymysql.connect(**DB_CONFIG)修改密码时要特别注意MySQL 8 默认的认证插件是caching_sha2_passwordPyMySQL 在较新版本中已经支持但如果连不上且报错信息里提到Authentication plugin需要执行下面这条 SQL 把认证方式改回来ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码; FLUSH PRIVILEGES;连接参数写好后可以用一小段脚本验证连通性python -c import dao; conn dao.get_connection(); print(数据库连接成功); conn.close()如果输出数据库连接成功说明整个链路中的数据访问层已经打通。这个步骤能提前排除约一半的启动问题因为数据库连接失败在 Django 项目里往往不会在runserver启动时报错而是等你第一次请求接口时才暴露出来。4. 运行环境搭建与启动Django 4.2、PyMySQL 与端口对齐4.1 依赖安装与 Python 版本对齐项目要求 Python 3.11 和 Django 4.2这两个版本号同时出现是有原因的Django 4.2 是 LTS 版本对 Python 3.8 以上的支持稳定Python 3.11 在性能上比 3.8 有明显提升。如果你本机装了多个 Python 版本务必确认pip和python指向的是同一个 3.11 解释器。安装依赖只需要两个包命令如下# 安装 Django 固定版本 pip install django4.2 # 安装 MySQL 驱动的 Python 客户端 pip install pymysql安装时常见的问题是在 macOS/Linux 环境下需要加sudoWindows 下如果报pip 不是内部或外部命令说明 Python 没有加入 PATH用python -m pip install代替。安装完成后验证版本python -c import django; print(django.get_version()) # 预期输出4.24.2 runserver 启动与前端基准地址的对齐项目描述里明确写了「前端已经写死了请求后端 api 的基准地址为 http://127.0.0.1:8888」所以你必须在 8888 端口启动后端否则前端页面能打开但所有数据都请求不到。启动命令要切到项目根目录也就是manage.py所在的目录执行python manage.py runserver 127.0.0.1:8888指定127.0.0.1:8888是为了强制 Django 的开发服务器监听本机 8888 端口。如果只写python manage.py runserver默认端口是 8000而前端代码请求的是 8888接口会全部报跨域或连接失败。启动成功后在浏览器地址栏输入http://127.0.0.1:8888你应该能看到商城首页。此时打开浏览器开发者工具F12切到 Network 面板刷新页面观察请求列表里是否有红色的失败记录。一个正常的链路应该是页面 HTML 加载成功 → 若干 CSS/JS 资源加载成功 → 一个或多个http://127.0.0.1:8888/api/...的 XHR 请求返回 200。为了让你心里更有底这里给一个表格列出最常见的启动问题与排查方向现象可能原因排查方式页面打开白屏控制台报ERR_CONNECTION_REFUSED后端没有启动或端口不对确认命令是runserver 127.0.0.1:8888页面能打开但商品列表为空数据库连接失败或 SQL 查询异常看后端命令行窗口是否输出了异常堆栈接口返回 500 且提示Unknown column数据库表结构与 SQL 不匹配确认导入的是根目录下的 sports_shop.sql控制台报跨域CORS错误前端地址与后端地址不在同源策略范围内本项目中前后端同端口一般不会触发此错误4.3 Django 请求日志的信息价值后端运行后每次前端发出请求runserver的控制台都会打出一条访问日志格式类似[22/Mar/2025 14:32:18] GET /api/product/list?page1pageSize10 HTTP/1.1 200这条日志的价值在于快速确认请求是否打到了 Django 层。如果你在页面上点了某个按钮没反应但控制台没有任何日志输出说明请求没到后端问题在前端的 JavaScript如果日志里有请求但状态码是 500问题就在后端代码或数据库层面。定位问题时先看日志再往深处追这条经验在任何 Web 项目里都适用。views.py里的接口函数会直接从请求中解析参数如果参数格式和文档不一致最常见的报错是ValueError: invalid literal for int() with base 10意思是前端传来的字符串无法转成整数。遇到这种情况建议给解析参数的代码加上容错处理def get_int_param(request, key, default1): try: return int(request.GET.get(key, default)) except (ValueError, TypeError): return default一个小的容错函数能帮你省下很多调试时间也让你在答辩时展示自己考虑过参数异常的情况。5. 让答辩更顺手的验证方法接口文档对照表与断点调试技巧最后一章不是功能而是「怎么向老师证明项目是健壮的」。这里给你一个可操作的三步验证法全部基于你手上现有的资源不增加额外依赖。第一步做一张接口文档对照表。打开API接口文档.md把里面的接口逐个列出来旁边写上views.py中对应的函数名和 URL 路由。比如文档里写了一个「购物车列表」接口路径是/api/cart/list你就去urls.py或views.py里找到处理这个路径的函数名记在表里。这张表既是你自查的清单也是答辩时可以展示的「需求覆盖率」证据。如果有些接口在文档里写了但代码里找不到那就是文档与实现不一致的地方提前修正。第二步用 Chrome 开发者工具的 Sources 面板结合 Python 断点调试。在views.py的函数第一行点一下行号位置设置断点然后在前端页面触发对应操作代码执行到断点处会暂停此时可以查看request对象里的GET或POST参数。这种方式比print更高效因为它能看到函数内部所有变量的实时值。举个例子在商品详情接口的断点处查看request.GET里是否有productId没有的话就是前端没带上参数。第三步跑一遍核心业务的完整链路访问首页 → 进入商品列表 → 点击商品详情 → 加入购物车 → 提交订单。每个步骤关注两件事一是页面 UI 是否正常跳转二是 Network 面板里的接口状态码是否为 200。把这个流程走通你的课程设计就已经达到了「完成」级别如果还能指出每一步对应的数据表变化比如加入购物车后cart_item表多了一条记录那老师基本会认定这不是照搬的代码。如果项目运行中遇到django.core.exceptions.ImproperlyConfigured这类异常请按顺序排查先检查 Django 版本pip show django看版本号是否 4.2再检查settings.py中数据库配置是否与本项目实际使用的dao.py冲突最后看manage.py所在路径下是否存在__init__.py缺失的目录。课程设计的代码量不大问题通常集中在环境而非逻辑保持先看报错堆栈、再定位到具体文件、最后修改参数的习惯这个项目的每一个坑都能在半小时内解决。本文还有配套的精品资源点击获取