毕业设计还不知道做什么Python Flask Echarts 这套组合做出来的豆瓣音乐数据可视化平台可以说是Web方向课设、毕设里性价比极高的一个选择。既能体现完整的全栈开发思路又不会在技术上卡住大多数人而且最终展示效果非常直观——各种图表一铺开答辩演示的场面感直接拉满。我前前后后带过不少本科生做这个方向的题目自己也完整搭过一遍这篇就把整个项目的设计思路、开发细节、常见坑点一次说清楚你拿到手里可以直接照着做。1. 整体思路拆解为什么这个题目值得做全链路1.1 题目到底考察了什么能力这个项目表面上是音乐数据可视化但剥开看它实际上是一道非常典型的全链路小工程题数据采集爬虫、数据清洗与存储数据处理、后端接口设计Flask、前端可视化Echarts、最后是部署与展示。一个题目把整个Web开发的完整闭环串起来了。这种麻雀虽小五脏俱全的构成对毕设和课设来说非常划算。一方面每一项单独拿出来难度都不算高不需要你有三年的工程经验另一方面串起来之后项目的完整度和技术跨度是够的答辩时老师说讲讲你的项目架构你能从数据源讲到数据库再讲到API最后讲到图表渲染这个叙事逻辑本身就很有说服力。还有个现实因素音乐数据的展示效果非常友好。你不需要做多复杂的业务逻辑评分分布、年份趋势、风格占比、热门歌手排行随便几个维度就能生成一批漂亮的图表。对于看腻了图书管理系统学生信息管理系统的评委来说这种可视化平台在感官上就赢了。1.2 技术选型背后的考量技术栈选了 Python Flask Echarts不是没有理由的。Python爬虫和数据处理的第一选择。requests 请求页面、lxml/BeautifulSoup 解析HTML、pandas 做清洗聚合生态非常成熟几乎每一种操作都有开箱即用的库。这也意味着你的开发时间能省下一大截。FlaskWeb框架选它主要是轻和简单。对比 Django 那种全家桶Flask 的核心就是一个路由系统加模板渲染入门门槛低。你不需要被ORM、Admin后台、表单组件这些概念绕晕只需要写几个路由、返回JSON、渲染几个页面就够了。对于课程设计这个阶段来说Flask 恰好卡在够用但不复杂的位置上。Echarts百度开源的可视化库后来捐给了Apache。它的好处是配置项极其丰富图表类型非常多而且中文文档完善、案例社区活跃。你不需要会React或Vue一个 div 一段配置就能出图还自带动画、缩放、tooltip 这些交互效果对前端基础薄弱的同学来说非常友好。1.3 功能模块规划完整项目拆成几个模块来设计结构上会比较清楚数据采集模块负责从豆瓣音乐页面抓取专辑/歌曲的公开信息包括名称、作者、风格、发行时间、评分、评价人数等。数据存储模块设计数据库表结构把清洗后的数据持久化到SQLite或者MySQL中。后端API模块Flask提供一系列JSON接口供前端页面读取聚合后的统计数据。可视化展示模块前端页面按不同维度调用接口用Echarts渲染图表组成一个Dashboard看板。数据更新模块提供手动或定时刷新数据的脚本保证数据新鲜度。这个模块划分背后是分层思想——采集、存储、服务、展示各自独立改动一层不影响其他层。比如你后面想把豆瓣换成某个音乐平台的数据只需要替换采集和清洗部分后端和前端完全不用动。这种松耦合设计在答辩时也是加分项。2. 环境准备与项目骨架先跑一个能看的页面2.1 环境安装的四个关键点这块看起来简单但踩坑的人真不少。网上大量新手教程是过时的照着一顿操作好几个报错等着你。首先是Python版本。现在装3.10或者3.11都行不建议用3.8以下的旧版本。原因很简单新版语法更新、标准库补齐、第三方库兼容性也更好——比如你在处理中文编码时3.x系列的表现就比2.x时代省心太多。安装时注意勾选Add Python to PATH这个选项否则命令行敲 python 会提示找不到命令。然后是虚拟环境。强烈建议每个项目建一个独立的 venv不要直接把依赖装到全局。全局装包最容易出现的问题就是版本冲突今天装Flask升级了某个依赖明天另一个项目就崩了。建虚拟环境的命令非常简单# 在项目根目录执行 python -m venv venv # 激活Windows venv\Scripts\activate # 激活macOS/Linux source venv/bin/activate激活之后命令行前面会出现(venv)前缀这时候 pip install 装什么都不会污染全局环境。后面换电脑或者给老师演示环境迁移直接把 requirements.txt 拿过去重新装一遍就行。接着是pip换源。默认的PyPI源在国内下载速度不稳定经常一个包卡半天。换成清华源或者阿里源体验立升一个档次pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask flask-cors pandas requests lxml最后装依赖的时候建议统一写进 requirements.txt 方便迁移pip freeze requirements.txt2.2 项目目录结构设计一个清晰的项目结构胜过后面十次重构。我建议按下面的目录组织douban_music_visualization/ ├── app.py # Flask主入口注册路由和蓝图 ├── models.py # 数据库连接与查询封装 ├── spider/ │ ├── __init__.py │ ├── douban_spider.py # 豆瓣音乐数据采集爬虫 │ └── clean_data.py # 数据清洗与入库 ├── static/ │ ├── css/ │ ├── js/ │ └── echarts/ # 本地化echarts文件备用 ├── templates/ │ └── index.html # Dashboard主页面 ├── data/ │ └── music.db # SQLite数据库文件 └── requirements.txt注意两个容易忽略的细节static和templates这两个目录名是 Flask 的约定不能乱改否则模板和静态资源加载会失败data目录建议放数据库文件不要把数据库文件丢到项目根目录下否则后续打包、迁移、版本管理都不方便。2.3 写一个能跑的最小应用先别急着写完整功能一个能跑起来的最小应用才是你的定心丸。下面这个是 Flask 的最小可运行代码建议先把这条链路走通再往上叠加功能from flask import Flask, render_template, jsonify app Flask(__name__) app.route(/) def index(): return render_template(index.html) app.route(/api/health) def health(): return jsonify({status: ok, message: 豆瓣音乐可视化平台运行中}) if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)然后在 templates/index.html 里写一个基础骨架引入Echarts的CDN!DOCTYPE html html langzh-CN head meta charsetUTF-8 title豆瓣音乐数据可视化平台/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script /head body div idchart_rating stylewidth: 800px; height: 450px;/div script var chart echarts.init(document.getElementById(chart_rating)); chart.setOption({ title: { text: 评分分布测试 }, xAxis: { type: category, data: [5分, 6分, 7分, 8分, 9分, 10分] }, yAxis: { type: value }, series: [{ type: bar, data: [3, 8, 25, 42, 18, 4] }] }); /script /body /html跑起来python app.py浏览器访问http://localhost:5000看到柱子图就说明整条链路通了。这一步虽然简单但能把Flask 渲染模板、静态资源引入、Echarts 初始化这三件事一次验证完后面开发的时候再出问题范围就缩小了很多。3. 数据层实现从豆瓣页面到本地数据库3.1 目标页面分析与字段规划豆瓣音乐的榜单和数据分布很规整比如豆瓣音乐Top250、以及按流派分类的页面结构都是列表页套详情的形式。列表页会直接给出专辑名称、乐队/艺人、评分、评价人数这几个核心字段足够我们做大部分可视化。我建议你初始数据瞄准这几个字段title专辑/音乐作品名称author作者或乐队genres风格流派流行、民谣、摇滚、电子、说唱、古典等release_date发行日期rating豆瓣评分浮点数rating_count评价人数整数country/region发行国家或地区这个字段有时需要进详情页才能拿到字段规划时注意一个原则能拆的尽量拆开不要硬塞在一个字段里。比如发行时间建议拆成年份单独存储后面做历年发行趋势的折线图时直接用GROUP BY year就能聚合不需要再在Python里做字符串截取。3.2 爬虫核心代码与采集策略爬虫部分我用 requests lxml 来写这套组合相比 Selenium 轻量很多也不需要额外启动浏览器。下面是一个简单的采集示例import time import random import requests from lxml import etree HEADERS { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 } def fetch_music_list(page0): url fhttps://music.douban.com/top250?start{page * 25} resp requests.get(url, headersHEADERS, timeout10) resp.encoding utf-8 tree etree.HTML(resp.text) # 列表页每个条目对应的结构与class需要你自己查看页面源码确认 items tree.xpath(//table[classgreen-pill]//tr) for item in items: title item.xpath(.//a[classtitle]/text()) rating item.xpath(.//span[classrating_nums]/text()) people item.xpath(.//span[classpl]/text()) # 处理并返回字典 yield { title: title[0].strip() if title else , rating: float(rating[0]) if rating else 0.0, rating_count: people[0].strip(()人评价) if people else 0 } # 控制采集频率 for page in range(10): # 先抓10页共250条 for item in fetch_music_list(page): print(item) time.sleep(random.uniform(1.5, 3.5))这段代码有三个细节需要你特别注意第一是resp.encoding utf-8。豆瓣页面的编码方式如果不手动指定requests 有时会误判导致中文乱码。这个坑我当年也踩过。第二是time.sleep(random.uniform(1.5, 3.5))。不要小看这个随机延时它是控制请求频率、避免给目标站点造成压力的基本素养。不要写死 sleep(1)固定间隔反而容易被模式识别随机范围更稳妥。第三是列表页只能拿到评分和作者如果你需要发行年份风格流派这类信息就要进入详情页二次解析。在详情页里发行时间和风格的HTML结构相对固定你可以用类似思路再写一个parse_detail(url)函数。注意控制并发数不要用线程池无脑开几十个线程对课设项目来说逐条采集完全够用。提示抓取任何网站数据时都应该遵守目标网站的 robots 协议仅访问公开可见的信息控制请求频率数据仅用于学习研究不再二次传播。这是网络爬虫的基本边界。3.3 数据清洗与预处理爬下来是脏数据这个预期一定要有。评分是字符串、评价人数里混着人评价三个字、年份字段可能是空的这些都需要清洗。用 pandas 处理这个场景非常顺手几行代码就能完成import pandas as pd df pd.DataFrame(raw_items) # 评分转浮点数去空格 df[rating] pd.to_numeric(df[rating], errorscoerce) # 评价人数去掉括号和人评价再转int df[rating_count] df[rating_count].str.replace([()人评价], , regexTrue) df[rating_count] pd.to_numeric(df[rating_count], errorscoerce).fillna(0).astype(int) # 发行年份从日期字符串中截取前4位 df[year] df[release_date].str[:4] df[year] pd.to_numeric(df[year], errorscoerce).fillna(0).astype(int) # 按评分降序 df df.sort_values(rating, ascendingFalse).drop_duplicates(subset[title])drop_duplicates(subset[title])这一步别忘了榜单偶尔会有重复条目不清理会导致后面的柱状图出现两条一模一样的专辑很尴尬。3.4 数据库表设计与入库数据库我推荐先用 SQLite零配置文件、单文件存储对课设来说体验最好。后期如果老师要求用 MySQL你把连接方式换掉SQL语句基本可以复用。建表语句如下CREATE TABLE IF NOT EXISTS music ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, author TEXT, genres TEXT, year INTEGER, rating REAL, rating_count INTEGER, country TEXT, detail_url TEXT UNIQUE );作者和风格字段存成 TEXT 逗号分隔的字符串比如周杰伦单人还好如果是Various Artists多作者的情况存成 A,B,C 这种形式。后面做歌手作品数量排行时先用 Python 在内存里做分裂聚合再给前端返回统计结果不要在 SQL 里强行处理逗号分隔的数据SQL 处理这种场景很别扭。入库时用INSERT OR IGNORE配合 detail_url 字段的唯一索引可以实现幂等更新——脚本反复执行不会重复插入import sqlite3 conn sqlite3.connect(data/music.db) df.to_sql(music, conn, if_existsreplace, indexFalse) conn.close()如果你希望保留历史数据而不是每次全量替换就把 if_exists 改成 append然后手动处理唯一约束的冲突。4. 后端Flask接口与前端Echarts联动4.1 接口设计前端页面的每个图表对应一个后端JSON接口职责清晰、调试方便。这是典型的API驱动设计比在Flask里直接拼HTML字符串要干净得多。我按功能列了以下几个接口接口路径返回内容对应图表/api/music/top_rated评分最高的Top20专辑柱状图/api/music/year_trend每年发行量与平均评分趋势双Y轴折线图/api/music/genre_distribution各流派的专辑数量占比饼图/api/music/author_count作品数最多的歌手/乐队排行横向柱状图/api/music/rating_histogram评分区间的人数分布直方图/api/music/search按关键词搜索专辑/作者表格 地图联动扩展实现其中一个示例from flask import Flask, jsonify import sqlite3 def query_db(sql): conn sqlite3.connect(data/music.db) cur conn.execute(sql) rows cur.fetchall() cols [d[0] for d in cur.description] conn.close() return [dict(zip(cols, row)) for row in rows] app.route(/api/music/top_rated) def top_rated(): rows query_db(SELECT title, author, rating, rating_count FROM music ORDER BY rating DESC, rating_count DESC LIMIT 20) return jsonify(rows)有一个细节很多人会忽略jsonify默认返回的JSON中中文字符会被转成\uXXXX的Unicode转义形式。这在功能上没问题前端解析出来依然是正确的中文但如果你在浏览器里直接看接口返回可读性很差。想直接看到中文需要改成app Flask(__name__) app.config[JSON_AS_ASCII] False不过说实话这个配置只是影响你调试时的直观性对功能没有任何影响前端该出中文还是会出中文。你可以按自己的习惯来。4.2 Echarts六种核心图表的配置详解Echarts的配图思路是数据 option配置你负责给数据和配置它负责渲染和交互。下面把最常用的几种图表的配置要点列一下。柱状图评分Top10var chart echarts.init(document.getElementById(chart_rating)); chart.setOption({ title: { text: 豆瓣音乐评分TOP10 }, tooltip: {}, grid: { left: 3%, right: 4%, bottom: 3%, containLabel: true }, xAxis: { type: category, data: titles, axisLabel: { rotate: 30, interval: 0 } // rotate防止标题文字重叠 }, yAxis: { type: value, name: 评分 }, series: [{ type: bar, data: ratings, itemStyle: { color: #FF6B81 } }] });注意axisLabel.interval这个配置默认情况下Echarts会跳着显示X轴刻度导致你只看到一部分专辑名。如果列数少把 interval 设为0强制全部显示如果列数多配合 rotate 旋转30度或者45度效果会好很多。折线图历年发行量与平均分这个稍微复杂需要用双Y轴option { title: { text: 历年专辑发行趋势 }, tooltip: { trigger: axis }, legend: { data: [发行量, 平均评分] }, xAxis: { type: category, data: years }, yAxis: [ { type: value, name: 发行量 }, { type: value, name: 平均评分, min: 0, max: 10 } ], series: [ { name: 发行量, type: bar, yAxisIndex: 0, data: counts }, { name: 平均评分, type: line, yAxisIndex: 1, data: avgRatings, smooth: true } ] };双Y轴的思路是两组数据的量纲差异太大发行量可能是几十上百评分只有5到9分硬放在一个坐标系里折线会被压成一条直线。所以给平均评分单独分配一个Y轴并设置 min 和 max才能看出发展趋势。饼图与环形图风格占比option { title: { text: 音乐风格分布 }, tooltip: { trigger: item, formatter: {b}: {c} ({d}%) }, series: [{ type: pie, radius: [40%, 70%], // 内径40%外径70%就是环形图 data: genreData, label: { formatter: {b} {d}% } }] };环形图radius设为一个数组而不是单个值在视觉上比普通的饼图更现代答辩时也更显设计感。formatter里的{b}代表名称{c}代表数值{d}代表百分比。词云图Echarts 5 核心库不含词云需要额外引入 echarts-wordcloud 插件。在 HTML 里加上script srchttps://cdn.jsdelivr.net/npm/echarts-wordcloud2/dist/echarts-wordcloud.min.js/script就可以用了。它的数据格式是 JSON 数组[{name: 关键词, value: 频次}]在你把专辑名、歌手名高频词统计好之后配上这个插件就能生成词云效果。雷达图与地图雷达图适合展示不同风格的专辑在评分、热度的对比配置相对绕一些需要定义 radar indicator中国地图则需要额外引入 china.js 地图数据文件同时注意Echarts 4和5的地图引入方式不一样5版本需要在官网下载 map 文件再注册。如果你想用地图展示不同地区的音乐热度记得数据里需要有省市字段这个扩展功能可以放到答辩加分项里。4.3 前后端联调流程联调阶段我推荐用 fetch 接口读取数据而不是把数据直接渲染进模板。这样前后端职责分明后期维护也简单fetch(/api/music/top_rated) .then(res res.json()) .then(data { var titles data.map(item item.title); var ratings data.map(item item.rating); // 更新图表 });这里有个常见报错接口返回的rating_count是字符串而不是数字Echarts 在渲染 Y 轴时可能不排序或者把数值当 category 处理。解决办法是在前端 map 一次Number(item.rating)或者在后端 jsonify 之前就统一转成数值类型。我建议在后端就处理好类型前端拿到什么就是什么别把脏数据传给前端再去补丁。4.4 页面布局与仪表盘设计最后组装页面时用 CSS Grid 做一个 2×2 或 3×2 的网格布局把柱状图、折线图、饼图、词云图分别放到不同卡片容器里。每个图表容器都设置固定宽高比如 800×450不然Echarts初始化时容器高度为0会导致图表渲染不出来。还有一个小技巧给所有图表容器加一个统一的chart-boxclass页面加载完后用 querySelectorAll 遍历初始化所有图表。这样你想加第7张图只需要在HTML里加一个 divJS 代码不用改document.querySelectorAll(.chart-box).forEach(el { var chart echarts.init(el); chartsMap[el.id] chart; // 后面按id更新数据 });5. 高频问题排查与答辩准备5.1 开发期最常见的五个报错Echarts 图不显示。大部分情况是容器高度为0div没有设置 width 和 height或者设置的是百分比但父容器高度是auto。解决办法直接给容器写死像素高度最省心。折线图X轴刻度挤在一起。数据量大的时候默认间隔肯定不够用。用axisLabel: { interval: 5, rotate: 45 }调整间隔和旋转角度或者加dataZoom让用户自己缩放拖拽。Tooltip文字不换行。默认tooltip是一整行撑开的很丑。需要在 formatter 函数里手动加\ntooltip: { formatter: function(params) { return params[0].name br/ params.map(p p.seriesName : p.value).join(br/); } }Flask接口返回的中文变\uXXXX。原因和处理方式前面说过配置JSON_AS_ASCII False就好。但这个配置在不同Flask版本位置可能有变化高版本直接支持。Flask 部署到服务器后静态资源404。最常见的原因是 nginx 静态文件目录配错了或者 Flask 的 static_url_path 设置不对。建议先用python app.py直接跑起来确认本地访问没问题再排查反向代理的路径映射。5.2 答辩演示的节奏建议答辩时不要一上来就展示代码先讲业务逻辑。我建议的演示顺序是一句话讲清楚项目是什么这是一个基于豆瓣音乐公开数据做的可视化分析平台目标是帮助用户快速了解当前热门音乐的整体分布特征。展示数据流水线从爬虫抓取 → 清洗 → 入库给老师看数据库里的数据量和字段。然后逐个展示图表每个图表配一句这个图反映了什么。比如评分TOP10柱状图让我们直观看到口碑最好的专辑、双轴折线图展示历年的发行趋势和评分变化。最后演示交互功能比如搜索联动、图表筛选。老师追问为什么选SQLite可以说项目数据量在千级水平SQLite零配置就能支撑且后续可以平滑迁移到MySQL。老师追问数据怎么更新的就说写了一个脚本可以定时重新抓取也可手动触发。5.3 我踩过的坑和给你的建议第一次做这种可视化项目最容易翻车的不是写代码而是前期过度设计。我见过有学生一上来就想做实时推荐系统、用户评论情感分析结果做了一周连数据都没爬利索。我的建议是先跑通最朴素的版本——一个爬虫、一个接口、一个图表——再去考虑加功能。基础闭环有了后面每加一个图表都是加分基础坏了做再多界面也是零分。另一个建议是数据量和图表丰富度宁可少而精。两张做得漂亮、有分析深度的图好过八张内容重复的图。你可以重点打磨三张评分分布柱状图、历年趋势双轴图、风格占比环形图。这三张覆盖了who、when、what三个分析维度已经能讲出一个完整的故事了。最后说一个关于代码质量的小细节把数据库查询操作封装成一个通用函数不要在每一个路由函数里重复写sqlite3.connect。这不仅是为了省代码更重要的是统一管理连接关闭。SQLite 如果连接不关闭在多线程请求下偶尔会出现 database is locked 的报错封装好之后这个概率会大大降低。这个题目做下来最大的收获其实是全链路认知——你不再是只写一个脚本或只做一个页面而是真正理解了数据从哪里来、存到哪里去、怎么变成用户看到的图表。答辩结束之后这个项目加上缓存、加个前端框架、加点自动化测试就是一套完全可以写进简历的作品。如果你想在展示效果上再加分可以留一个下拉筛选器切换不同年份看对应年份的风格分布这种交互细节很能打动评委。我当时就是这样做的效果比我预期好很多。
