基于 Django 与 Vue 的汽车数据分析系统设计与实现

摘要

随着互联网技术、汽车产业数字化转型以及数据分析技术的发展，围绕汽车产品参数、价格区间、能源结构和推荐决策的信息系统逐渐成为数据服务、行业研究和产品展示的重要工具。传统静态网页或单一表格查询方式难以满足用户对汽车数据进行多维度分析、可视化展示以及个性化推荐的需求，因此设计并实现一套结构清晰、功能完整、便于扩展的汽车数据分析系统具有较高的实践价值。

本文围绕汽车数据管理与分析场景，设计并实现了一套基于 Django 与 Vue 的前后端分离汽车数据分析系统。系统以后端 Django 5 和 Django REST Framework 为核心实现数据建模、CSV 数据导入、统计分析接口、图片代理接口以及多目标加权推荐接口；以前端 Vue 3、Vite、Vue Router、Axios 和 ECharts 为核心实现数据总览、车型展示、车型查询、车型详情和智能推荐等功能页面。系统引入 autohome_specs_summary.csv 作为原始数据源，对 15368 条车型数据和 257 个品牌信息进行清洗、导入和组织，以支持价格区间分布、能源类型分析、品牌排行、级别分布和推荐分析等业务需求。

在功能设计方面，本文重点实现了三个层面的能力。第一，围绕汽车参数数据构建统一的数据模型与 REST API 接口，实现车型信息的筛选、分页和详情展示。第二，围绕可视化分析需求实现多维统计图表，使用户能够直观地查看价格、能源、品牌和级别分布情况。第三，围绕推荐场景构建多目标加权推荐算法，综合预算匹配、动力性能、经济性、续航能力、空间实用性和品牌热度等指标，对候选车型进行评分排序，并输出可解释的推荐结果与推荐理由。此外，针对第三方图片跨源加载受限的问题，系统实现了图片代理接口，保证车型图片在展示页和详情页中的稳定加载。

测试结果表明，系统已完成从数据导入、后端接口、前端页面到推荐分析模块的完整闭环，实现了汽车数据展示、统计分析与推荐决策支持功能。后端测试用例全部通过，前端构建成功，核心页面可以正常访问。本文设计的系统不仅能够作为数据分析类信息系统的课程项目或毕业设计案例，也为后续扩展品牌对比分析、用户鉴权、趋势预测和部署运维提供了较好的基础。

关键词： Django；Vue；汽车数据分析；数据可视化；推荐系统；前后端分离

Abstract

With the rapid development of Internet technology, digital transformation in the automobile industry, and data analysis methods, information systems for vehicle parameter management, price analysis, energy structure statistics, and recommendation decision support have become increasingly important. Traditional static pages and simple tabular query methods are no longer sufficient for multi-dimensional analysis, visualization, and personalized recommendation of automobile data. Therefore, it is of practical significance to design and implement a complete and extensible automobile data analysis system.

This paper designs and implements a front-end and back-end separated automobile data analysis system based on Django and Vue. The back-end is built with Django 5 and Django REST Framework to provide data modeling, CSV data import, statistical analysis APIs, image proxy APIs, and a multi-objective weighted recommendation API. The front-end is built with Vue 3, Vite, Vue Router, Axios, and ECharts to provide pages for dashboard overview, vehicle showcase, vehicle query, vehicle detail, and intelligent recommendation. The system uses autohome_specs_summary.csv as the original data source, and imports 15,368 vehicle records covering 257 brands, which supports analysis of price distribution, energy type distribution, brand ranking, class distribution, and vehicle recommendation.

The system mainly provides three kinds of capabilities. First, it establishes a unified vehicle data model and RESTful APIs to support filtering, pagination, and detail display. Second, it implements visualization functions for multi-dimensional statistical analysis, allowing users to intuitively understand the distribution of price, energy type, brand, and vehicle class. Third, it introduces a multi-objective weighted recommendation algorithm that evaluates candidate vehicles based on budget fit, performance, economy, driving range, practical space, and brand popularity, and outputs interpretable recommendation scores and reasons. In addition, to solve cross-origin loading issues of third-party vehicle images, an image proxy API is implemented to ensure stable image rendering on showcase and detail pages.

The test results show that the system has completed the full workflow from data import and back-end service to front-end interaction and intelligent recommendation. Back-end test cases all pass, the front-end build succeeds, and key pages can be accessed normally. The designed system can serve as a practical case for graduation projects related to data analysis systems and also provides a solid foundation for future extensions such as brand comparison, user authentication, trend prediction, and deployment optimization.

Keywords: Django; Vue; automobile data analysis; data visualization; recommendation system; front-end and back-end separation

---

目录

第1章 绪论

第2章 相关技术与理论基础

第3章 系统需求分析

第4章 系统总体设计

第5章 系统实现

第6章 系统测试

第7章 总结与展望

参考文献

致谢

---

第1章 绪论

1.1 本章目标

本章主要说明课题的研究背景、研究意义、国内外相关研究现状、本文的研究内容与实现目标，并介绍论文整体组织结构，为后续章节展开系统设计与实现奠定基础。

1.2 研究背景与意义

近年来，汽车行业在新能源化、智能化与数字化方向持续发展，汽车相关数据的规模和复杂度显著提升。对于整车厂商、汽车媒体平台、经销商以及普通消费者而言，车型价格、动力参数、续航信息、能源类型和结构化配置数据具有较高的决策价值。一方面，管理人员或研究人员需要对大规模车型数据进行批量分析，以获取价格分布、品牌排行、能源结构变化等宏观信息；另一方面，普通用户也希望根据预算、级别、能源偏好和功能关注点获得更直观的车型推荐。

在当前大量汽车信息平台中，虽然能够提供车型参数与价格展示，但其面向开发教学或论文展示的开放性和可扩展性相对有限。对于信息系统课程设计、数据分析方向课题或毕业设计项目而言，仅仅完成静态查询功能难以体现系统在数据处理、可视化分析和推荐逻辑上的综合能力。因此，设计一套具备数据导入、统计分析、图表展示、车型详情和推荐功能的汽车数据分析系统，既能够体现 Web 全栈开发能力，也能够反映数据组织与业务分析能力。

本课题的实践意义主要体现在以下几个方面。

第一，能够构建一套面向汽车数据场景的完整信息系统。系统不仅支持数据展示，还提供了分析和推荐功能，从而实现从数据采集、存储、处理到可视化展示的完整闭环。

第二，能够体现前后端分离架构在信息系统开发中的工程价值。通过 Django 提供结构化 API 服务，通过 Vue 提供灵活的用户交互界面，有助于提升系统可维护性、扩展性和前后端协同效率。

第三，能够将数据可视化与推荐决策结合。价格区间分布、能源类型分布、品牌排行和级别统计等功能能够帮助用户从宏观角度理解数据，而推荐模块则能够在用户个性化条件下生成候选车型，提高系统的应用深度。

第四，具备较好的展示性与扩展性。系统当前已完成数据总览、分析推荐、车型展示、车型查询和车型详情等核心页面，并支持 CSV 数据导入和图片代理功能，为后续继续扩展用户权限控制、品牌趋势分析和更复杂的推荐逻辑提供了良好的基础。

1.3 国内外研究现状

从信息系统建设角度看，国内外围绕汽车数据服务的研究与产品实践主要集中在汽车信息聚合平台、车辆价格预测、汽车销量分析、用户偏好推荐和数据可视化平台等方向。国外相关研究更强调推荐系统方法、用户行为建模与大数据分析框架的应用；国内相关研究则更多关注面向行业业务场景的数据服务平台、企业管理系统以及可视化决策支持系统建设。

在 Web 信息系统技术方面，前后端分离已成为主流实现模式。后端框架负责业务逻辑、数据建模、接口暴露与安全控制，前端框架则负责页面渲染、组件管理和交互体验。Django 以其成熟的 ORM、路由、管理后台和可维护性优势，在中小型信息系统和教学项目中具有较广泛应用；Vue 以其轻量、易用和组件化特征，在后台管理系统和数据可视化页面中也得到广泛使用。二者结合形成的前后端分离架构，既具有较高开发效率，又有利于模块独立维护。

在数据可视化方面，ECharts 等图表库的普及使得统计图表可以较低成本地集成到业务系统中。对于汽车数据这种结构化特征明显的数据对象，通过柱状图、折线图、饼图和排行图等方式展示价格分布、能源类型和品牌占比，可以有效增强数据分析的直观性和可解释性。

在推荐系统方面，当前主流方法包括基于内容的推荐、协同过滤推荐、混合推荐以及多目标加权推荐等。对于本课题而言，由于项目当前并未采集用户行为日志，也没有评分矩阵，因此不适合直接引入协同过滤方法。相比之下，多目标加权推荐更适用于结构化参数数据场景。它能够围绕预算匹配、性能、经济性、空间和续航等指标进行量化建模，并根据不同用户偏好动态调整权重，具有实现成本低、结果可解释、便于展示等优点。因此，本文在推荐模块中采用多目标加权评分方式生成推荐结果。

综上所述，当前国内外相关研究和工程实践已为本课题提供了较好的技术基础，但在面向课程项目或毕业设计的汽车数据分析系统中，仍需要围绕真实数据导入、可视化分析、参数展示和可解释推荐进行系统化整合。本文的工作正是在此背景下展开。

1.4 研究内容与目标

本文的研究内容围绕一套前后端分离的汽车数据分析系统展开，主要包括以下几个方面。

1. 基于真实 CSV 数据源构建统一的汽车车型数据模型，完成车型数据的导入、存储与管理。
2. 设计并实现数据统计分析接口，为价格分布、能源分布、品牌排行、级别分布和动力排行等页面提供数据支撑。
3. 设计并实现前端可视化页面，包括数据总览、分析推荐、车型展示、车型数据和车型详情等功能模块。
4. 设计并实现多目标加权推荐模块，根据预算、级别、能源类型和偏好模板，对候选车型进行综合评分排序。
5. 针对第三方图片跨源加载问题设计图片代理功能，以保证车型展示页面和详情页面的完整性。
6. 对系统进行测试验证，说明系统在功能完整性和可用性方面达到的效果。

本文拟实现的总体目标是：完成一套具备完整数据分析流程、良好页面展示效果以及推荐决策支持功能的汽车数据分析系统，并形成一份结构完整、内容真实、可用于答辩和论文写作的系统设计与实现说明。

1.5 论文组织结构

本文共分为七章，内容安排如下。

第1章为绪论，介绍研究背景、研究意义、国内外研究现状以及本文的研究内容。

第2章为相关技术与理论基础，介绍 Django、Django REST Framework、Vue 3、Vite、ECharts 以及多目标加权推荐方法。

第3章为系统需求分析，从功能需求与非功能需求两个层面对系统进行分析，并梳理业务流程。

第4章为系统总体设计，重点说明系统架构、模块划分、数据模型与接口设计。

第5章为系统实现，围绕后端接口、前端页面、图片代理与推荐模块展开实现说明。

第6章为系统测试，展示测试环境、测试策略、测试用例与测试结果。

第7章为总结与展望，总结课题成果，分析系统不足，并提出后续优化方向。

1.6 本章小结

本章从汽车数据服务需求与 Web 信息系统建设角度出发，说明了课题的研究背景与应用价值，分析了相关研究现状，并给出了本文的研究目标和论文组织结构。后续章节将在此基础上对系统所依赖的关键技术和具体实现方案进行详细阐述。

1.7 待确认点

• 学校是否要求在绪论中单列"课题来源"
• 学校是否要求在绪论中加入"研究方法"小节

---

第2章 相关技术与理论基础

2.1 本章目标

本章主要介绍系统实现所依赖的关键技术和理论方法，包括 B/S 架构、Django、Django REST Framework、Vue 3、Vite、ECharts 以及多目标加权推荐方法，并说明这些技术在本系统中的作用与选型依据。

2.2 B/S 架构概述

B/S，即 Browser/Server 架构，是现代 Web 信息系统中最常见的系统组织形式。在该模式下，客户端使用浏览器访问系统页面，业务逻辑和数据服务主要由服务器端负责处理。相较于传统 C/S 架构，B/S 架构具有部署方便、维护成本低、跨平台兼容性强等优点。

本系统采用典型的 B/S 架构。前端使用浏览器访问 Vue 构建的后台管理界面，后端通过 Django 和 Django REST Framework 提供 REST API 接口，数据则由 SQLite 数据库存储。在这一模式下，页面渲染和交互逻辑与业务接口相互分离，有利于提高系统扩展能力与维护效率。

系统技术路线如图 2-1 所示。
数据层
SQLite数据库
CSV原始数据
服务层
Django后端
DRF接口服务
图片代理服务
推荐分析服务
客户端
浏览器
Vue前端页面

2.3 Django 与 Django REST Framework 技术基础

2.3.1 Django 框架概述

Django 是一种基于 Python 的高层 Web 开发框架，具有"开发效率高、结构清晰、组件完善"的特点。其核心优势包括：

1. 自带 ORM，对数据库访问进行了统一封装；
2. 路由、视图、中间件和模板机制成熟；
3. 项目结构规范，便于团队协作和后续维护；
4. 能够快速构建中小型信息系统。

在本系统中，Django 主要承担项目配置、路由分发、数据模型管理以及业务逻辑组织等工作。例如，CarSpec 模型用于描述车型信息，管理命令用于完成 CSV 数据导入，而视图层则负责统计分析、详情查询和推荐逻辑实现。

2.3.2 Django REST Framework 的作用

Django REST Framework 是基于 Django 的 REST API 开发框架，具有序列化、分页、认证和接口响应标准化等能力。由于本系统采用前后端分离架构，前端与后端之间主要通过 JSON 数据进行交互，因此 DRF 能够显著降低接口开发复杂度。

在本系统中，DRF 主要实现了以下能力：

• 通过序列化器将 CarSpec 模型数据转换为 JSON；
• 通过通用视图类实现车型列表分页和详情查询；
• 通过统一接口响应格式为前端图表与页面组件提供数据；
• 结合分页类提升车型列表查询的可用性。

2.4 Vue 3 与 Vite 前端开发技术

Vue 3 是一款流行的渐进式前端框架，支持组件化开发、响应式数据绑定和组合式 API。相比传统静态页面，Vue 能够更方便地组织多页面后台管理系统的组件结构和交互逻辑。

本系统前端采用 Vue 3 的主要原因包括：

1. 组件化能力强，适合构建后台管理界面；
2. 与 Axios、Vue Router、ECharts 等生态工具集成方便；
3. 代码组织清晰，便于页面模块拆分与后续功能扩展；
4. 对于毕业设计项目而言，上手门槛较低且展示效果较好。

Vite 是一种现代化的前端构建工具，其开发模式具有启动快、热更新快和配置简单等特点。相较于传统构建方案，Vite 在小型或中型 Vue 项目中具有更高的开发效率。本系统使用 Vite 作为前端工程的开发与打包工具，使前端页面能够快速启动并完成生产构建。

2.5 ECharts 可视化技术

ECharts 是 Apache 开源的前端可视化图表库，支持柱状图、折线图、饼图、雷达图和排行图等多种图表类型。由于汽车数据分析场景对统计展示和交互可视化有较高要求，因此 ECharts 十分适合本系统。

本系统利用 ECharts 实现了：

• 指导价区间分布柱状图；
• 能源类型分布饼图；
• 品牌排行条形图；
• 级别分布折线图；
• 推荐模块中的权重分布图与得分对比图；
• 首选车型分项雷达图。

通过这些图表，系统能够将原本抽象的数据统计结果转化为直观的图形表达，提高分析结果的可读性与展示效果。

2.6 多目标加权推荐方法基础

2.6.1 推荐场景分析

在汽车推荐场景中，用户往往并不仅仅关注单一指标，而是会综合预算、动力、经济性、续航、空间和品牌等多个因素进行判断。由于本系统当前并未引入真实用户行为数据，因此协同过滤方法缺乏稳定的数据基础。为保证推荐模块在课程项目和毕业设计场景下具备可实现性与可解释性，本文选择多目标加权推荐方法。

2.6.2 指标归一化思想

由于不同指标的量纲不同，例如价格以元为单位、功率以千瓦为单位、加速时间以秒为单位，因此需要先对指标进行归一化处理。对于正向指标，可以使用以下公式：

si=xi−xmin⁡xmax⁡−xmin⁡ s_i = \frac{x_i - x_{\min}}{x_{\max} - x_{\min}} si=xmax−xminxi−xmin

其中，xix_ixi 表示某车型在某项指标上的原始值，xmin⁡x_{\min}xmin 和 xmax⁡x_{\max}xmax 分别表示候选集中该指标的最小值和最大值，sis_isi 表示归一化后的分值。

对于反向指标，例如价格和油耗，值越小越优，因此采用逆向归一化：

si′=1−xi−xmin⁡xmax⁡−xmin⁡ s_i' = 1 - \frac{x_i - x_{\min}}{x_{\max} - x_{\min}} si′=1−xmax−xminxi−xmin

2.6.3 综合评分模型

完成指标标准化之后，可按照不同推荐偏好设置权重，并通过加权求和得到最终推荐分。综合评分公式如下：

Score=(∑k=1nwksk)×100 \mathrm{Score} = \left( \sum_{k=1}^{n} w_k s_k \right) \times 100 Score=(k=1∑nwksk)×100

其中，wkw_kwk 表示第 kkk 个指标的权重，sks_ksk 表示对应指标得分，且满足：

∑k=1nwk=1 \sum_{k=1}^{n} w_k = 1 k=1∑nwk=1

本系统设置了均衡推荐、性能优先、经济省心、家庭实用和新能源导向五种偏好模板，不同模板对应不同权重组合，从而使推荐结果更加贴近使用场景。

2.6.4 预算匹配度设计

用户预算在购车决策中具有约束作用。本文采用预算中心容忍区间方法计算预算匹配度。若车型价格与用户预算接近，则预算匹配分较高；当价格偏离预算较大时，预算匹配分降低。该方法不依赖历史用户行为，适合结构化参数数据场景。

2.7 本章小结

本章介绍了系统开发所依赖的 B/S 架构、Django、Django REST Framework、Vue 3、Vite、ECharts 以及多目标加权推荐方法，为后续需求分析、系统设计和实现提供了理论基础。上述技术共同构成了本系统的前端界面层、后端业务层、数据层与推荐分析层。

2.8 待确认点

• 学校是否要求在本章中补充数据库理论基础
• 是否需要单列"RESTful 风格设计原则"小节

---

第3章 系统需求分析

3.1 本章目标

本章从系统建设目标、功能需求、非功能需求和业务流程四个方面对汽车数据分析系统进行分析，明确系统边界和实现重点，为后续系统设计提供依据。

3.2 系统建设目标

本系统以结构化汽车车型数据为核心对象，围绕数据导入、统计分析、推荐决策和可视化展示需求展开建设。系统建设目标主要包括以下几点。

1. 建立可扩展的车型数据管理能力，支持 CSV 数据导入和数据库存储。
2. 提供多维统计分析能力，支持对价格、能源类型、品牌和级别进行分析展示。
3. 提供基于条件筛选的车型检索和详情查看功能。
4. 提供基于用户偏好的智能推荐能力。
5. 提供具备较好展示效果的后台管理前端界面。

3.3 功能需求分析

根据当前项目已实现的模块，系统功能需求可划分为五个部分。

3.3.1 数据导入需求

系统需要支持从外部 CSV 文件导入汽车数据，并写入数据库，以形成系统运行所需的基础数据。导入过程应当能够完成字段读取、类型转换、批量写入和重复数据清理。本系统中，CSV 文件 autohome_specs_summary.csv 位于项目根目录，后端通过管理命令完成数据导入。

3.3.2 可视化分析需求

系统需要为使用者提供宏观分析视角，使其能够快速理解数据整体分布。为此，系统应支持：

• 车型总量、品牌数量、车系数量和新能源车型数量等总体统计；
• 指导价区间分布分析；
• 能源类型分布分析；
• 品牌排行和级别分布分析；
• 动力排行展示。

3.3.3 车型查询与筛选需求

系统需要支持对大量车型数据进行分页展示和多条件筛选，以便用户快速定位目标车型。筛选条件包括品牌、级别、能源类型、价格区间和关键词，排序方式包括指导价、最大功率和百公里加速等。

3.3.4 车型展示与详情需求

仅依靠表格展示容易使系统表现形式单一，因此系统还需要支持车型卡片式展示与详情页面展示。展示页应当尽量提供车型封面图、品牌和基础参数；详情页则应提供完整参数、价格信息、性能指标和外部链接等内容。

3.3.5 智能推荐需求

系统需要根据用户输入的预算、级别、能源类型、品牌偏好以及推荐模板，对候选车型进行排序，输出推荐结果。推荐结果应当包含推荐分、分项得分和推荐理由，以增强系统的可解释性和展示性。

3.4 非功能需求分析

3.4.1 可用性需求

系统页面应布局清晰、交互直观，后台界面应具有良好的可读性。对用户而言，能够在短时间内理解系统功能，并通过导航快速到达目标页面。

3.4.2 可维护性需求

系统采用前后端分离架构，后端接口逻辑与前端页面逻辑分离。通过清晰的模块划分，便于后续对推荐模块、分析模块和页面模块进行独立扩展。

3.4.3 可扩展性需求

系统应支持后续扩展新的分析页、趋势页、用户权限模块以及更复杂的推荐逻辑。为此，在初始设计中应尽量保持接口格式统一、模块边界清晰。

3.4.4 正确性需求

系统的查询结果、统计结果和推荐结果应当基于当前数据库中的真实数据生成。所有统计图表与接口输出都应与导入数据保持一致。

3.4.5 兼容性需求

系统应能在常见浏览器环境下稳定访问，同时支持在 Windows 环境中进行本地部署和运行，便于项目演示和交付。

3.5 业务流程分析

3.5.1 数据导入业务流程

系统启动前，维护者先执行后端迁移命令创建数据库结构，再执行 CSV 导入命令将数据写入数据库。导入完成后，前端页面和后端接口即可围绕数据库中的车型数据展开统计与查询。
准备CSV数据文件
执行数据库迁移
执行导入命令
解析CSV字段
写入SQLite数据库
前端页面和接口使用数据

3.5.2 用户分析业务流程

当用户进入系统后，可先在数据总览页面查看统计结果，再根据业务需要进入车型展示页、车型数据页或分析推荐页。若用户希望查看某一车型的完整参数，则可从展示页或列表页跳转至详情页。
数据库 后端接口 前端页面 使用者 数据库 后端接口 前端页面 使用者 进入分析页面 请求统计或车型数据 查询车型数据 返回结果 返回JSON 渲染图表或列表

3.5.3 推荐业务流程

用户在推荐页面输入预算、级别、能源类型和偏好模板后，系统将先过滤候选车型，再对预算匹配、性能、经济性和续航等指标进行归一化，最后按照模板权重加权求和并输出推荐结果。
输入预算与偏好
过滤候选车型
指标归一化
多目标加权评分
排序输出TopN
展示推荐理由

3.6 功能结构总结

结合以上分析，系统功能结构可概括为"数据导入层、数据服务层、页面展示层、推荐分析层"四部分。其中数据导入层负责将 CSV 文件写入数据库；数据服务层负责为前端页面提供接口；页面展示层负责可视化分析和参数展示；推荐分析层负责按照用户条件输出个性化结果。

3.7 本章小结

本章从功能需求和非功能需求两个层面对系统进行了分析，并围绕数据导入、统计分析、筛选查询、车型展示和智能推荐等核心需求明确了系统建设目标。业务流程分析为后续模块划分和接口设计提供了依据。

3.8 待确认点

• 学校是否要求单独给出用例图
• 是否需要增加"数据字典需求"小节

---

第4章 系统总体设计

4.1 本章目标

本章围绕系统总体架构、模块划分、数据模型、接口设计与推荐分析模块设计展开说明，重点体现系统结构的合理性与工程实现的可维护性。

4.2 系统总体架构设计

本系统采用典型的前后端分离架构，整体可划分为前端展示层、后端服务层和数据存储层三部分。前端展示层负责页面渲染、图表绘制和交互逻辑，后端服务层负责接口处理、数据统计、推荐计算和图片代理，数据层负责保存结构化车型数据。

系统总体架构如图 4-1 所示。
数据层
SQLite数据库
CSV原始数据文件
后端服务层
统计分析接口
车型列表接口
车型详情接口
推荐接口
图片代理接口
CSV导入命令
前端展示层
数据总览页
分析推荐页
车型展示页
车型数据页
车型详情页

该架构具有以下特点：

1. 职责分离明确，前端仅关注界面展示与用户交互；
2. 后端统一提供数据接口，便于不同前端页面复用；
3. 数据导入与业务接口分离，便于后期更换数据源；
4. 推荐逻辑作为独立模块存在，便于后续升级算法。

4.3 功能模块设计

根据系统需求，功能模块划分如下。

4.3.1 数据管理模块

该模块包括 CSV 数据导入命令和车型数据模型两部分，负责从原始文件中读取汽车数据并写入数据库，形成统一的数据存储基础。

4.3.2 统计分析模块

该模块负责汇总车型总量、品牌数量、能源类型、价格区间和级别分布等统计信息，并为数据总览页面提供可视化接口支持。

4.3.3 车型查询模块

该模块负责实现车型数据分页、条件筛选、排序和详情查看，是系统基础数据服务能力的重要组成部分。

4.3.4 展示模块

该模块负责将车型数据以卡片式和详情式两种形式展示给用户，其中卡片展示更强调视觉表达，详情页更强调参数完整性。

4.3.5 推荐分析模块

该模块负责对候选车型进行多目标评分，并根据用户输入条件生成推荐结果，是系统中最具分析特色的业务模块之一。

4.4 数据模型设计

4.4.1 数据实体分析

从当前项目实现情况来看，系统核心实体为车型实体 CarSpec。由于原始 CSV 文件已提供结构化字段，因此数据库设计以单核心表为主。该表涵盖品牌、车系、车型、价格、动力、车身、续航和外部链接等信息。

4.4.2 关键字段设计

表 4-1 给出了 CarSpec 模型的主要字段设计。

字段名	含义	类型	说明
brand_name	品牌名称	CharField	支持品牌筛选与统计
series_name	车系名称	CharField	支持车系展示
spec_id	车型编号	CharField	唯一标识车型
spec_name	车型名称	CharField	详情页主标题
guide_price_yuan	指导价	DecimalField	价格分析和筛选
dealer_price_yuan	经销商价	DecimalField	详情页价格对比
level	级别	CharField	级别分布分析
energy_type	能源类型	CharField	能源分布分析
max_power_kw	最大功率	DecimalField	动力排行和推荐评分
max_torque_nm	最大扭矩	DecimalField	性能指标展示
official_0_100_s	百公里加速	DecimalField	性能推荐指标
cltc_range_km	CLTC续航	IntegerField	新能源推荐指标
pure_electric_range_km	纯电续航	IntegerField	新能源推荐指标
sample_image_url	示例图片地址	URLField	展示页封面图
spec_gallery_url	图集链接	URLField	详情页外部资源

4.4.3 索引设计

为了提升筛选与统计效率，系统在品牌、级别、能源类型和价格字段上建立了索引。例如：

• brand_name + level
• energy_type + guide_price_yuan
• brand_name + max_power_kw

这些索引能够提升品牌筛选、级别筛选以及基于价格和能源条件的查询效率。

4.5 接口设计

系统后端采用 REST 风格接口设计，主要接口如表 4-2 所示。

接口路径	方法	功能说明
/api/dashboard/overview/	GET	返回系统总览统计数据
/api/dashboard/price-buckets/	GET	返回价格区间分布
/api/dashboard/energy-distribution/	GET	返回能源类型分布
/api/dashboard/brand-ranking/	GET	返回品牌排行
/api/dashboard/power-ranking/	GET	返回动力排行
/api/dashboard/level-distribution/	GET	返回级别分布
/api/cars/filters/	GET	返回筛选项
/api/cars/	GET	返回车型分页列表
/api/cars/<spec_id>/	GET	返回车型详情
/api/analysis/recommend/	GET	返回推荐结果
/api/images/proxy/	GET	返回代理后的车型图片

接口统一使用 JSON 格式响应，便于前端直接消费。

4.6 推荐分析模块设计

4.6.1 设计思路

推荐模块的设计目标不是进行复杂机器学习训练，而是在当前结构化汽车数据基础上，构建一个可解释、可展示、可调整的推荐评分体系。其核心流程如下：

1. 根据预算、级别、能源类型和品牌偏好过滤候选集；
2. 提取价格、功率、加速时间、油耗、续航、轴距等指标；
3. 对不同量纲指标进行归一化处理；
4. 根据推荐模板设置权重；
5. 计算综合推荐分并排序输出。

4.6.2 偏好模板设计

系统提供五种偏好模板：

• 均衡推荐
• 性能优先
• 经济省心
• 家庭实用
• 新能源导向

不同模板通过调整权重反映用户关注重点。例如，性能优先模板对动力性能权重更高，经济省心模板对预算匹配和经济性权重更高，新能源导向模板对续航能力和经济性权重更高。

4.6.3 预算匹配机制

推荐系统首先根据用户预算确定可接受价格区间，并对价格与预算接近程度进行量化。若车辆价格越接近用户预算，则预算匹配得分越高；若价格明显超出预算范围，则候选优先级降低。

4.6.4 可解释输出设计

为增强推荐模块的展示效果和答辩解释性，系统不仅输出综合推荐分，还输出以下信息：

• 各维度分项得分；
• 推荐理由标签；
• 候选集数量；
• 当前偏好模板对应的权重分布。

这种设计能够使用户或答辩教师清晰理解推荐结果是如何形成的，而不是只看到一个最终排序。

4.7 本章小结

本章围绕系统架构、功能模块、数据模型、接口设计和推荐分析模块展开，说明了系统整体结构和核心设计方案。通过分层架构与模块化组织，系统实现了良好的可维护性与可扩展性，为后续功能实现提供了设计基础。

4.8 待确认点

• 学校是否要求单列数据库 E-R 图
• 是否需要补充接口字段级说明表

---

第5章 系统实现

5.1 本章目标

本章结合系统真实代码实现过程，对开发环境、后端功能实现、前端页面实现、图片代理和推荐分析模块进行说明，体现系统的完整开发过程。

5.2 开发环境与运行环境

本系统开发环境如下：

• 操作系统：macOS / Windows 10 或 11
• Python：3.11 或以上
• Node.js：20 LTS 或以上
• 后端框架：Django 5.2.13
• 接口框架：Django REST Framework 3.17.1
• 跨域组件：django-cors-headers 4.9.0
• 前端框架：Vue 3.5.32
• 构建工具：Vite 8.0.4
• 图表库：ECharts 6.0.0
• 数据库：SQLite

项目运行流程分为四步：安装依赖、执行迁移、导入 CSV 数据、启动前后端服务。后端使用 manage.py 作为入口，前端使用 npm run dev --prefix frontend 启动开发服务。

5.3 后端核心功能实现

5.3.1 车型数据模型实现

后端在 backend/cars/models.py 中定义了 CarSpec 模型，用于描述车型的品牌、车系、价格、动力、续航、图片和链接信息。由于原始数据来自 CSV 文件，因此模型字段尽量与原始数据保持一致，以避免导入时出现不必要的数据丢失。

在实现中，对于价格、功率、扭矩和油耗等数值型字段采用 DecimalField，对于续航、轴距和配置数量等整型字段采用 IntegerField。对于品牌、车系和能源类型等高频筛选字段增加索引，以提高查询性能。

5.3.2 CSV 导入命令实现

系统在 backend/cars/management/commands/import_carspecs.py 中实现了 import_carspecs 管理命令。该命令通过 csv.DictReader 读取根目录数据文件，并对数值字段进行类型转换，然后以批量写入方式将数据导入数据库。

导入实现的关键点包括：

1. 支持指定 CSV 路径；
2. 支持批量写入大小配置；
3. 导入前清空旧数据，避免重复记录；
4. 对空值和非法数值进行安全处理。

5.3.3 统计分析接口实现

后端在 backend/cars/views.py 中实现了多个统计分析接口，包括：

• 总览统计接口；
• 价格区间分布接口；
• 能源类型分布接口；
• 品牌排行接口；
• 动力排行接口；
• 级别分布接口。

这些接口主要依赖 Django ORM 的聚合能力，例如 Count、Avg、Min 和 Max 等函数，用于快速生成统计结果。接口输出结果统一封装成 JSON，以便前端图表组件直接消费。

5.3.4 车型列表与详情接口实现

车型列表接口使用 DRF 的 ListAPIView 实现，并结合自定义分页类支持 page 和 page_size 参数。接口支持品牌、级别、能源类型、价格区间、关键词和排序方式等条件过滤。排序字段主要包括指导价、经销商价、最大功率、最大扭矩和百公里加速时间。

车型详情接口使用 RetrieveAPIView 实现，以 spec_id 作为唯一查找标识，返回完整车型参数和封面图信息。这种设计能够保证列表页与详情页的数据结构一致，降低前端处理复杂度。

5.4 前端核心页面实现

5.4.1 后台整体布局实现

前端通过 AdminLayout.vue 构建统一后台壳子，包括左侧导航、顶部标题区、内容区和页面说明区域。整体视觉延续蓝白色调和圆角卡片设计，以提升系统展示效果。

5.4.2 数据总览页面实现

总览页面 DashboardPage.vue 负责展示系统整体统计结果和关键图表。页面通过并行调用多个统计接口，生成总量卡片、价格区间图、能源分布图、品牌排行图和级别分布图。同时，页面还展示了动力排行列表，增强了数据分析页面的信息密度。

5.4.3 车型展示页面实现

车型展示页面 ShowcasePage.vue 使用卡片式布局展示车型封面图、品牌、车系、描述、价格和性能信息。相较于传统表格，卡片式展示更适合项目演示和视觉呈现。页面支持筛选条件输入，并支持分页切换。

5.4.4 车型数据页面实现

车型数据页面 CarsPage.vue 以表格形式展示车型信息，重点支持多条件筛选与排序。该页面在功能上更偏向"数据检索与比对"，与车型展示页形成互补。

5.4.5 车型详情页面实现

车型详情页面 CarDetailPage.vue 用于展示单个车型的完整参数信息。页面包括封面图、价格信息、基础参数、动力参数和扩展链接。通过分组展示方式，提升参数页面的可读性。

5.5 图片代理与展示功能实现

5.5.1 问题分析

在前端直接使用第三方图片链接时，浏览器可能由于跨源限制、资源拦截或加载策略问题导致图片无法显示。对于展示型系统而言，图片缺失会明显影响页面完整性和视觉效果。

5.5.2 实现方式

为解决上述问题，后端实现了图片代理接口 /api/images/proxy/。其基本流程为：

1. 前端请求后端代理接口；
2. 后端验证目标图片域名是否在允许列表中；
3. 后端以带 Referer 和 User-Agent 的请求头访问第三方图片资源；
4. 获取图片二进制内容后再返回给前端。

这种方式将第三方图片请求转换为同源请求，提高了车型展示页和详情页中图片加载的稳定性。

5.6 智能推荐模块实现

5.6.1 候选集过滤

推荐接口首先读取预算、级别、能源类型、品牌和偏好模板等条件，对数据库中的车型集合进行过滤，形成候选集。若候选集过小，则系统会适度放宽价格范围，以确保能够返回一定数量的候选车型。

5.6.2 指标计算

系统从候选集中提取价格、功率、加速时间、续航、油耗、轴距和品牌热度等指标。对于不同指标，通过正向归一化或逆向归一化转化为统一量纲得分。

5.6.3 权重求和与结果输出

根据用户选择的推荐模板，系统从预定义权重表中读取各指标权重，并计算综合推荐分。之后，对候选车型按推荐分降序排序，取前若干项作为推荐结果。返回结果同时包含：

• 车型基础信息；
• 综合推荐分；
• 各维度分项得分；
• 推荐理由；
• 当前权重分布；
• 推荐算法优势说明。

5.6.4 前端推荐页面实现

前端推荐页面 RecommendationPage.vue 提供预算、级别、能源类型、品牌和偏好模板输入项，并通过图表展示权重分布、首选车型雷达图和推荐分排行图。同时页面以卡片方式突出首选车型，并展示推荐理由，从而增强推荐模块的可解释性和展示效果。

5.7 本章小结

本章围绕后端数据建模、CSV 导入、统计分析接口、车型查询与详情接口、前端多页面实现、图片代理功能以及多目标推荐模块进行了说明，展示了系统从需求分析到工程落地的完整实现过程。

5.8 待确认点

• 学校是否要求在本章中加入关键代码截图
• 是否需要增加"前后端联调过程"单独小节

---

第6章 系统测试

6.1 本章目标

本章通过对系统进行功能测试、接口测试和构建测试，验证系统的可用性和正确性，说明系统是否达到预期设计目标。

6.2 测试环境与测试策略

6.2.1 测试环境

系统测试环境与开发环境基本一致，主要包括：

• Python 虚拟环境；
• Django 后端服务；
• SQLite 数据库；
• Vue 前端开发服务；
• 浏览器访问环境。

6.2.2 测试策略

结合当前项目特点，系统测试主要采用以下方式：

1. 后端单元与接口测试；
2. 页面访问与功能联调测试；
3. 前端生产构建测试；
4. 重点模块问题修复验证。

需要说明的是，本课题当前重点是功能正确性与系统完整性验证，因此未进行大规模并发性能压测，也未引入专门的自动化 UI 测试框架。

6.3 功能测试

系统功能测试围绕已实现的核心模块展开，测试重点包括：

• 数据总览接口是否正确返回统计数据；
• 车型列表是否支持分页、筛选与排序；
• 车型详情接口是否返回完整参数；
• 推荐接口是否返回推荐结果和推荐理由；
• 图片代理接口是否能稳定返回图片资源；
• 展示页、详情页和推荐页是否能正常渲染。

表 6-1 为主要功能测试用例。

用例编号	模块	测试项	前置条件	测试步骤	预期结果	实际结果	状态
TC-001	数据总览	加载总览接口	数据已导入	访问 /api/dashboard/overview/	返回车型总量、品牌数、均价等数据	与预期一致	通过
TC-002	车型列表	品牌筛选	数据已导入	访问 /api/cars/?brand=奥迪&page_size=2	返回奥迪品牌分页列表	与预期一致	通过
TC-003	车型详情	获取详情	数据已导入	访问 /api/cars/73298/	返回指定车型完整参数	与预期一致	通过
TC-004	推荐分析	新能源推荐	数据已导入	访问推荐接口并设置新能源偏好	返回推荐结果、推荐分和推荐理由	与预期一致	通过
TC-005	图片代理	加载车型图片	图片链接有效	访问图片代理接口	返回正确图片资源	与预期一致	通过
TC-006	前端页面	页面跳转	前后端均启动	访问 /dashboard、/recommendation 等页面	页面正常显示	与预期一致	通过

6.4 接口测试结果

在当前项目中，后端测试通过 Django 自带测试框架完成。执行命令如下：

python backend/manage.py test cars.tests -v 2

实际测试结果显示，当前已编写的 6 个测试用例全部通过，覆盖了总览接口、筛选接口、详情接口、图片代理接口和推荐接口等核心业务能力。这表明系统后端接口在功能正确性上具备基本保障。

6.5 页面与交互测试

前端部分主要通过页面实际访问与生产构建两种方式进行验证。

第一，页面访问验证。通过启动前端开发服务，依次访问数据总览、分析推荐、车型展示、车型数据和车型详情等页面，检查页面结构是否正确、图表是否正常渲染、详情跳转是否可用以及推荐结果是否能够正确显示。

第二，生产构建验证。执行以下命令：

npm run build --prefix frontend

构建成功说明前端项目不存在影响打包的语法错误和模块引用错误，满足项目演示与交付要求。

6.6 缺陷分析与修复说明

在系统联调过程中，主要发现并修复了以下问题。

6.6.1 图片外链无法直接显示问题

问题表现为：车型展示页和详情页中的第三方图片资源在浏览器中无法直接加载，影响页面视觉完整性。

问题原因在于浏览器对第三方图片资源存在跨源限制和资源拦截机制。

修复方案为：增加后端图片代理接口，将第三方图片请求转为同源访问，从而保证图片资源能够稳定显示。

6.6.2 推荐页面空状态图表报错问题

问题表现为：推荐页面在初始状态下，雷达图组件可能在无数据时触发图表错误。

修复方案为：在前端为图表组件增加空状态判断，仅在推荐结果存在时才渲染雷达图，从而避免图表初始化异常。

6.7 测试结果分析

从测试结果看，系统在功能完整性、接口可用性和页面联动性方面基本达到设计目标。数据导入、接口响应、页面跳转、图表渲染和推荐结果输出均能够正常完成。当前系统已经具备较完整的演示和答辩展示能力。

同时也应看到，系统尚未进行大规模性能测试与安全测试，例如用户认证安全性、接口限流、防恶意访问等功能仍未纳入当前版本实现。因此，若系统用于更复杂的生产场景，还需继续补充对应能力。

6.8 本章小结

本章围绕系统测试环境、测试策略、测试用例与测试结果展开，验证了汽车数据分析系统在数据导入、统计分析、车型查询、详情展示、推荐分析和图片代理等核心功能上的正确性。测试结果表明，系统已具备良好的可用性与完整性。

6.9 待确认点

• 学校是否要求单列"性能测试"章节
• 是否需要补充页面截图作为测试结果证明

---

第7章 总结与展望

7.1 本章目标

本章对全文研究工作进行总结，归纳系统已实现成果，分析系统当前存在的不足，并提出后续优化方向。

7.2 研究成果总结

本文围绕汽车数据分析场景，设计并实现了一套基于 Django 与 Vue 的前后端分离汽车数据分析系统。通过对真实汽车数据进行建模、导入和管理，系统实现了数据统计分析、车型筛选查询、卡片展示、详情查看和智能推荐等核心功能。

本文的主要工作成果包括：

1. 基于真实 CSV 数据构建了统一的车型数据模型，实现了 15368 条车型数据的导入与管理；
2. 设计并实现了总览统计、价格区间分布、能源类型分布、品牌排行、级别分布和动力排行等统计分析功能；
3. 设计并实现了车型展示页、车型数据页和车型详情页，提升了系统的可视化与交互表现；
4. 设计并实现了多目标加权推荐模块，能够根据预算、级别、能源和偏好模板输出可解释的推荐结果；
5. 通过图片代理机制解决了第三方图片资源在前端直接加载不稳定的问题；
6. 完成了后端测试与前端构建验证，证明系统具备基本可用性。

从课程项目或毕业设计角度来看，本系统不仅完成了信息系统开发的基本要求，还在数据可视化与推荐分析两个层面增强了系统深度，使其在展示效果和技术完整性方面具有较好表现。

7.3 系统不足分析

尽管系统已经实现了核心功能，但仍存在一定不足。

第一，系统当前主要面向演示和课程项目场景，尚未引入完整的用户认证与权限控制机制。虽然这不影响当前系统功能展示，但若用于多人协作或实际业务环境，仍需补充角色权限设计。

第二，推荐算法目前采用多目标加权评分方法，虽然具有实现简单、可解释性强的优点，但仍属于规则驱动型方案。它没有结合用户历史行为、点击偏好或购车反馈数据，因此推荐结果的个性化程度仍有提升空间。

第三，系统目前主要围绕静态结构化车型数据展开分析，尚未引入时间维度数据，例如销量趋势、价格波动趋势或市场热度变化，这使得系统在纵向分析能力上仍较为有限。

第四，系统未进行大规模性能压测与安全性测试。在教学项目中这并不构成主要问题，但若系统未来要接入更复杂的业务环境，还需补充缓存机制、异常控制、安全策略和部署优化方案。

7.4 后续优化方向

结合当前系统结构，后续可以从以下几个方向继续优化。

1. 增加用户登录、权限分级和后台管理能力，使系统具备更完整的管理系统属性；
2. 扩展品牌对比分析、车系趋势分析和价格区间钻取功能，进一步增强数据分析深度；
3. 引入用户行为数据，尝试结合基于内容的推荐与协同过滤方法，提升推荐模块个性化能力；
4. 优化图片缓存和静态资源加载策略，提高页面访问性能；
5. 在部署层面引入更规范的静态资源发布和服务管理方案，增强系统交付能力。

7.5 本章小结

本章对全文工作进行了总结，指出了系统在功能完整性、展示性和推荐分析能力方面取得的成果，同时也客观分析了当前系统在权限控制、动态分析、推荐深度与部署能力方面的不足。整体来看，本文完成的汽车数据分析系统已经达到了毕业设计项目的预期目标，并具备较好的继续扩展空间。

7.6 待确认点

• 是否需要增加"经济效益与应用价值"小节
• 是否需要按学校模板拆分为"结论"和"展望"两个独立章节

---

参考文献

以下参考文献为基于当前项目方向整理的建议版，正式提交前应按学校模板统一格式，并根据学校要求补充近五年中文文献。

1\] Django Software Foundation. Django documentation\[EB/OL\]. \[2026-04-09\]. https://docs.djangoproject.com/. \[2\] Encode OSS Ltd. Django REST framework\[EB/OL\]. \[2026-04-09\]. https://www.django-rest-framework.org/. \[3\] Vue.js Team. Vue.js Documentation\[EB/OL\]. \[2026-04-09\]. https://vuejs.org/. \[4\] Vite Team. Vite Guide\[EB/OL\]. \[2026-04-09\]. https://vite.dev/guide/. \[5\] Apache Software Foundation. Apache ECharts Handbook\[EB/OL\]. \[2026-04-09\]. https://echarts.apache.org/handbook/. \[6\] SQLite Consortium. SQLite Documentation\[EB/OL\]. \[2026-04-09\]. https://www.sqlite.org/docs.html. \[7\] Ricci F, Rokach L, Shapira B. Recommender Systems Handbook\[M\]. 2nd ed. New York: Springer, 2015. \[8\] Adomavicius G, Tuzhilin A. Toward the next generation of recommender systems: A survey of the state-of-the-art and possible extensions\[J\]. IEEE Transactions on Knowledge and Data Engineering, 2005, 17(6): 734-749. \[9\] Burke R. Hybrid recommender systems: Survey and experiments\[J\]. User Modeling and User-Adapted Interaction, 2002, 12(4): 331-370. \[10\] Fielding R T. Architectural Styles and the Design of Network-based Software Architectures\[D\]. University of California, Irvine, 2000. \[11\] Gamma E, Helm R, Johnson R, et al. Design Patterns: Elements of Reusable Object-Oriented Software\[M\]. Boston: Addison-Wesley, 1995. \[12\] van Rossum G, Drake F L. Python 3 Reference Manual\[M\]. Scotts Valley: CreateSpace, 2009. \[13\] 王珊, 萨师煊. 数据库系统概论\[M\]. 北京: 高等教育出版社, 2014. \[14\] 张海藩. 软件工程导论\[M\]. 北京: 清华大学出版社, 2013. \[15\] 李航. 统计学习方法\[M\]. 北京: 清华大学出版社, 2019. *** ** * ** *** ## 致谢 在本课题的设计、开发与论文撰写过程中，我对前后端分离架构、数据可视化技术和信息系统实现流程有了更加系统的认识。首先，感谢指导教师在课题方向、系统设计思路和论文结构安排方面给予的指导与建议，使我能够围绕真实项目逐步完成系统设计与论文写作。其次，感谢在项目开发过程中提供帮助的同学与朋友，他们在页面优化、部署验证和功能交流方面给予了实际支持。 同时，也感谢 Django、Vue、Vite、ECharts 等开源技术社区提供的成熟文档与生态支持，使本系统能够在较短时间内构建出完整的前后端分析平台。最后，感谢自己在课题实施过程中保持了持续学习和不断迭代的态度，使本次毕业设计能够顺利完成。 *** ** * ** *** ### 终稿说明 本文档已覆盖毕业论文初稿的主要结构，包括摘要、英文摘要、七章正文、参考文献和致谢。若需继续完善，可优先处理以下内容： 1. 按学校模板调整封面、摘要格式、标题编号与页眉页脚； 2. 补充系统页面截图并插入对应章节； 3. 按学校要求扩充参考文献数量； 4. 根据答辩教师意见补充数据库设计图或用例图。