我做了好几个学期的选课、成绩管理类项目这次这个基于 Flask Vue 的“学生选课学习成绩分析及可视化分析”系统算是我个人觉得性价比最高的一套组合。它不复杂但把后端接口、前端交互、数据可视化、统计分析该有的东西全串起来了特别适合拿来当毕业设计、课程设计或者想入门全栈开发的人练手。先说清楚这个东西到底是干什么的。学生的选课信息、考试成绩通常散落在 Excel 表格、教务系统导出文件里想看某个班的平均分、某门课的及格率、成绩分布区间每次都靠人工统计费时而且容易错。这个项目的核心就是把这些数据收进数据库通过 Flask 提供接口Vue 做页面展示和交互再用 ECharts 把成绩分布、趋势对比、课程分析这些结果变成图表直观呈现在网页上。整体难度中等偏上一点点前端 Vue 部分需要熟悉组件化开发后端 Flask 部分主要就是 CRUD 加几个统计接口推荐顺序是先跑通后端再做前端最后联调。1. 项目整体设计与思路拆解动手之前最忌讳上来就写代码。这个项目我踩过一次坑——第一版直接按“学生管理、课程管理、成绩管理”三个模块平铺去写结果代码写了一堆最后做统计可视化的时候发现数据表设计不合理很多统计逻辑写不出来又回头改表结构。所以这次我把整个设计思路重新理了一遍。1.1 功能模块划分与需求解析一个完整的学生选课成绩系统表面看就是增删改查但实际上可以抽象成下面几块模块核心功能难点用户认证学生/教师/管理员登录权限区分密码加密学生管理学生信息维护和其他模块的关联约束课程管理课程信息、教师信息维护课程与选课记录的联动选课管理学生选课、退课防止重复选课、冲突处理成绩管理成绩录入、修改成绩有效性校验与统计的耦合统计分析平均分、及格率、成绩分布、趋势聚合查询的效率和正确性可视化展示图表化呈现分析结果ECharts 配置和交互但这里有一层很多人没想透的需求——这个系统最重要的不是那几个增删改查页面而是“分析”和“可视化”。所以设计的时候成绩表不能只存“学生、课程、分数”三个字段一定要考虑冗余存储选课学期、课程类别、任课教师这些维度。比如你后面想查“2024-2025 第一学期《数据结构》不同分数段的男女比例”如果数据表里没有性别冗余字段光靠关联查询页面会卡到怀疑人生。1.2 为什么选 Flask 而不是 Django——标题怎么就混了项目标题里同时出现了 Flask 和 Django我第一次看到也愣了一下。实际开发中确实会遇到这种命名干扰很多同学在一开始选型时反复横跳。我的经验是这个项目的体量Flask 更合适但 Django 也不差关键是搞清楚区别。Flask 是微框架轻、自由、逻辑清晰路由写起来非常直接。Django 是重框架自带 ORM、Admin 后台、认证体系开发效率高但学习曲线陡而且框架约束多。像这个项目里统计分析占了很大比重你往往需要写自定义 SQL 做聚合查询用 Flask 加 SQLAlchemy 反而更灵活不会被 Django ORM 的查询表达式绕晕。所以回到标题这个事如果命名时把 Django 去掉直接叫“python-flask学生选课学习成绩分析及可视化分析”会更准确。但如果你手头已经有 Django 基础用 Django 重写这个项目也完全可行后端的 REST 接口用 DRFDjango REST Framework会更省事。不过配 Vue 时我还是推荐 Flask前后端完全分离Flask 只出 JSON 接口特别干净。1.3 前后端分离架构Flask 只做 API这次项目我直接采用前后端完全分离的架构。PyCharm 里开两个工程一个是backendFlask项目一个是frontendVue项目前端通过 axios 请求后端的/api接口拿 JSON 数据。为什么不用服务端渲染的模板方式两个原因。一是这个项目里有大量的图表交互比如点击班级筛选、切换学期、图表联动这些用 Vue 的响应式数据管理特别顺手如果用 Jinja2 模板每点一次都得刷新页面二是前后端分离以后你后续想加小程序、App 端后端接口可以直接复用不用重新写。架构图描述一下就是浏览器(Vue页面) ↓ axios JSON Flask后端(REST API) ↓ SQLAlchemy MySQL数据库开发的时候 Flask 跑在 5000 端口Vue 的 dev server 跑在 8080 端口通过代理解决跨域。生产部署时可以 Nginx 托管前端静态文件并反向代理到 Flask不过课程设计阶段不用搞那么复杂能跑起来就行。2. 环境准备与开发工具链配置这个项目的环境配置是个分水岭。配得顺后面一路平坦配不顺光装环境都能卡一天。热词里出现大量 pycharm 安装、python 环境配置、vue 安装及环境配置的搜索内容说明这块确实是新手重灾区。我把整个流程从零走一遍尽量写细一点。2.1 Python 环境与 PyCharm 配置Python 版本我建议用 3.9 或 3.10太新的版本比如 3.13有可能遇到某些第三方库还没跟上导致编译报错的情况。安装的时候记得勾选“Add Python to PATH”这个不勾后面在命令行跑python命令就会提示找不到很多同学在这里卡住。PyCharm 我建议直接下载社区版Community Edition就够用了免费而且这个项目完全用不到专业版的 Django 支持、数据库工具这些功能。之前热词里频繁出现“pycharm激活”相关的搜索这里多说一句社区版不需要任何激活功能对这个项目完全够用不要去搞那些乱七八糟的东西省心也安全。新建 Flask 项目的时候PyCharm 有自带模板但我不建议用它生成的结构太死板。直接新建一个纯 Python 项目然后打开终端手动创建虚拟环境python -m venv venvWindows 下激活虚拟环境venv\Scripts\activateMac/Linux 下是source venv/bin/activate看到命令行前面出现(venv)就算成功。然后安装依赖pip install flask flask-cors flask-sqlalchemy pymysql pandas这里说明一下每个库的用途flask 是核心 Web 框架flask-cors 解决跨域问题flask-sqlalchemy 是 ORM帮我们把 Python 类和数据库表对应起来pymysql 是 MySQL 的驱动如果你是本地开发不想装 MySQL可以用 SQLite后面细说pandas 主要是用来做成绩数据的统计分析比如快速算平均分、分组统计比自己写循环快很多。2.2 Vue 环境安装与项目初始化前端这块Node.js 是必须的。去官网下载 LTS 版本长期支持版一路下一步就行。安装完以后打开命令行验证node -v npm -v能输出版本号就说明 Node 环境没问题。然后设置一下 npm 镜像源否则下载依赖的时候可能会非常慢甚至超时npm config set registry https://registry.npmmirror.com创建 Vue 项目我用的是 Vue 3 Vite 的组合比 Webpack 那套启动快很多npm create vuelatest frontend这个命令会交互式问你一些配置项比如 TypeScript 要不要、Router 要不要、Pinia 要不要。我的建议是都选 No先求简单后面觉得需要再手动加。只保留最基础的 Vue 3 就行因为成绩分析和可视化系统本身页面逻辑不复杂主要是表格加图表用不上状态管理库。进入项目目录安装依赖cd frontend npm install再安装会用到的库npm install axios echartsaxios 是发 HTTP 请求用的echarts 是数据可视化图表库。这两个是本项目前端最核心的依赖。启动开发服务器npm run dev正常情况下终端会显示一个本地访问地址比如http://localhost:5173浏览器打开能看到 Vue 的欢迎页面就说明 Vue 环境配好了。2.3 数据库准备数据库我推荐 MySQL关系型数据库对这类有明确关联关系的数据管理起来最顺手。本地装好 MySQL 后用命令行或者 Navicat 建一个库CREATE DATABASE student_course DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;注意字符集一定要指定utf8mb4否则你存中文成绩分析报告或者学生姓名的时候很容易出现乱码。如果你的机器上没装好 MySQL或者不想折腾SQLite 也能应付这个项目。SQLAlchemy 连接 SQLite 只需要改一行配置不用装任何额外驱动。但课程设计答辩的时候评委一般会看你知道不知道 MySQL 的用法所以建议还是硬着头皮把 MySQL 配好。3. 核心代码实现从数据表设计到可视化图表环境都准备好以后就到了真正写代码的阶段。这一章节我把从后端到前端的关键代码全部拆开讲包括为什么这么写、数据表为什么这么建、统计接口怎么设计尽量让你能照着敲。3.1 数据表结构设计——分析功能的基石前面说过数据表设计是整个项目的灵魂尤其是要做统计分析表字段的冗余和关联设计非常重要。我这次设计了三张核心表加一张用户表。先看学生表class Student(db.Model): __tablename__ students id db.Column(db.Integer, primary_keyTrue) student_no db.Column(db.String(20), uniqueTrue, nullableFalse, indexTrue) name db.Column(db.String(50), nullableFalse) gender db.Column(db.String(10)) class_name db.Column(db.String(50)) major db.Column(db.String(50)) enroll_year db.Column(db.String(10))这里有个点要强调student_no加了uniqueTrue和indexTrue。unique 保证学号不重复index 给学号建了索引配合后续的查询性能会好很多。如果你是在几百条数据的小项目里体会不到区别但数据量上万以后没有索引的查询真的会慢。课程表class Course(db.Model): __tablename__ courses id db.Column(db.Integer, primary_keyTrue) course_no db.Column(db.String(20), uniqueTrue, nullableFalse) course_name db.Column(db.String(100), nullableFalse) credit db.Column(db.Float) course_type db.Column(db.String(30)) # 公共课/专业课/选修课 teacher_name db.Column(db.String(50)) term db.Column(db.String(30)) # 2024-2025-1成绩表这张表是重点class Score(db.Model): __tablename__ scores id db.Column(db.Integer, primary_keyTrue) student_id db.Column(db.Integer, db.ForeignKey(students.id)) course_id db.Column(db.Integer, db.ForeignKey(courses.id)) score db.Column(db.Float) semester db.Column(db.String(30)) student db.relationship(Student, backrefdb.backref(scores, lazydynamic)) course db.relationship(Course, backrefdb.backref(scores, lazydynamic))很多初学者会问为什么成绩表不直接存学号、课程号而是存student_id和course_id两个外键这是关系数据库的范式要求——通过外键关联保证数据一致性。比如学生改了姓名所有成绩记录里的显示会自动联动更新不需要逐条改如果直接冗余姓名在成绩表里一旦学生改名成绩表里就出现不统一的数据。我这里用的是db.relationship建立了 ORM 层面的关系这样在 Python 代码里可以直接用score.student.name取值不用手动写 join 查询。用户表class User(db.Model): __tablename__ users id db.Column(db.Integer, primary_keyTrue) username db.Column(db.String(50), uniqueTrue, nullableFalse) password db.Column(db.String(256), nullableFalse) role db.Column(db.String(20)) # admin / teacher / student注意密码字段长度我设成了 256因为用了werkzeug.security的generate_password_hash生成的哈希字符串比较长。密码绝对不能明文存储这是基本的安全底线。3.2 Flask 后端接口设计与统计分析逻辑Flask 的接口写法比较直观。我在这里只列几个关键路由完整的代码你可以按这个思路扩展。首先是 Flask 应用初始化和数据库绑定from flask import Flask, request, jsonify from flask_cors import CORS from flask_sqlalchemy import SQLAlchemy from sqlalchemy import text app Flask(__name__) CORS(app) app.config[SQLALCHEMY_DATABASE_URI] mysqlpymysql://root:123456localhost:3306/student_course?charsetutf8mb4 app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False db SQLAlchemy(app)CORS(app)这行很重要前端 Vue 跑在 8080 端口后端跑在 5000 端口浏览器默认会拦截跨域请求加了 flask-cors 以后后端接口就允许前端跨域调用了。然后是学生选课接口app.route(/api/select_course, methods[POST]) def select_course(): data request.get_json() student_id data.get(student_id) course_id data.get(course_id) # 检查是否已选过该课程 existing Score.query.filter_by(student_idstudent_id, course_idcourse_id).first() if existing: return jsonify({message: 你已经选过这门课程了}), 400 # 检查学分是否超限等逻辑 score Score(student_idstudent_id, course_idcourse_id, scoreNone, semester2024-2025-1) db.session.add(score) db.session.commit() return jsonify({message: 选课成功}), 200选课的关键在于“防重复”和“防冲突”。上面代码检查了同一学生同一课程是否已经存在记录。更完善的项目还会检查上课时间冲突不过那个需要额外维护一张排课时间表超出这个项目范围暂时不展开。接下来是成绩分析接口这个是整个项目的重头戏app.route(/api/analysis/course_stats, methods[GET]) def course_stats(): course_id request.args.get(course_id, typeint) course Course.query.get(course_id) # 用 SQL 聚合查询统计分数 stats db.session.execute( text( SELECT COUNT(*) as total, AVG(score) as avg_score, MAX(score) as max_score, MIN(score) as min_score, SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) / COUNT(*) * 100 as pass_rate, SUM(CASE WHEN score 90 THEN 1 ELSE 0 END) / COUNT(*) * 100 as excellent_rate FROM scores WHERE course_id :cid AND score IS NOT NULL ), {cid: course_id} ).first() return jsonify({ course_name: course.course_name, total_students: stats.total, avg_score: round(stats.avg_score, 2), max_score: stats.max_score, min_score: stats.min_score, pass_rate: round(stats.pass_rate, 2), excellent_rate: round(stats.excellent_rate, 2) })这里为什么直接用原生 SQL 而不是 SQLAlchemy 的 ORM 链式查询因为聚合计算、条件统计这类操作原生 SQL 表达更简洁、逻辑更清晰。SQLAlchemy 的func也可以实现但 SQL 一眼看过去就知道统计口径是什么。考试分数及格率就是score 60的数量除以总数量优秀率是score 90的比例这个统计口径要在代码里写清楚省得后面答辩被评委问倒。注score IS NOT NULL这个条件是因为学生选课以后还没有录入成绩如果把这些空值记录算进去平均分是错的。成绩分布接口用于直方图展示app.route(/api/analysis/score_distribution, methods[GET]) def score_distribution(): course_id request.args.get(course_id, typeint) result db.session.execute( text( SELECT SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) as s_lt_60, SUM(CASE WHEN score 60 AND score 70 THEN 1 ELSE 0 END) as s_60_70, SUM(CASE WHEN score 70 AND score 80 THEN 1 ELSE 0 END) as s_70_80, SUM(CASE WHEN score 80 AND score 90 THEN 1 ELSE 0 END) as s_80_90, SUM(CASE WHEN score 90 THEN 1 ELSE 0 END) as s_90_100 FROM scores WHERE course_id :cid AND score IS NOT NULL ), {cid: course_id} ).first() return jsonify({ labels: [60, 60-70, 70-80, 80-90, 90-100], data: [result.s_lt_60, result.s_60_70, result.s_70_80, result.s_80_90, result.s_90_100] })成绩分布的意义在于快速判断一门课的难度是否合理。如果 90 分以上的特别多说明考试可能太简单如果不及格的一大堆说明教学或者命题可能有问题。这个接口返回稳定的 5 段分箱数据前端拿到以后基本不用加工直接就能画图。除了这两个核心接口还有几个基础的数据接口app.route(/api/courses, methods[GET]) def get_courses(): courses Course.query.all() return jsonify([{ id: c.id, course_no: c.course_no, course_name: c.course_name, credit: c.credit, course_type: c.course_type, teacher_name: c.teacher_name, term: c.term } for c in courses]) app.route(/api/students, methods[GET]) def get_students(): students Student.query.all() return jsonify([{ id: s.id, student_no: s.student_no, name: s.name, gender: s.gender, class_name: s.class_name, major: s.major, enroll_year: s.enroll_year } for s in students])3.3 Vue 前端页面与 ECharts 可视化实现前端页面我分成几个单文件组件StudentManage.vue、CourseManage.vue、ScoreManage.vue、Dashboard.vue。这里重点讲 Dashboard也就是数据可视化看板。先配置 axios为了方便统一处理请求路径我在项目根目录创建src/utils/request.jsimport axios from axios const request axios.create({ baseURL: http://127.0.0.1:5000/api, timeout: 10000 }) export default request然后在组件里就可以快捷调用了。比如成绩分布图template div classcontainer div classfilter-bar select v-modelselectedCourse changeloadData option v-forc in courses :keyc.id :valuec.id{{ c.course_name }}/option /select /div div refchartDiv stylewidth: 100%; height: 400px;/div /div /template script setup import { ref, onMounted, nextTick } from vue import * as echarts from echarts import request from ../utils/request const courses ref([]) const selectedCourse ref(null) const chartDiv ref(null) let chart null const loadCourses async () { const res await request.get(/courses) courses.value res.data selectedCourse.value res.data[0]?.id || null loadData() } const loadData async () { if (!selectedCourse.value) return const res await request.get(/analysis/score_distribution, { params: { course_id: selectedCourse.value } }) renderChart(res.data) } const renderChart (data) { if (!chart) { chart echarts.init(chartDiv.value) } chart.setOption({ title: { text: 成绩分布, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: data.labels }, yAxis: { type: value, minInterval: 1 }, series: [{ name: 人数, type: bar, data: data.data, itemStyle: { color: function(params) { const colorMap [#c23531, #e6a23c, #f7d16b, #5cb87a, #409eff] return colorMap[params.dataIndex] } } }] }) } onMounted(() { loadCourses() }) /script有几个细节想提醒你注意。ECharts 的init必须在 DOM 渲染完成后调用所以用了onMounted因为 Vue 3 的 Composition API 里这个钩子就是 DOM 挂载后执行。如果发现图表加载不出来页面上是一个空白 div多半是容器高度为 0检查一下height样式。图表加载不出来最常见的原因是容器隐藏或者高度没设置这个问题我在第 4 节会再展开。每个分数段用不同的颜色区分这样在答辩演示的时候讲讲“红色是不及格段绿色是良好段”会很直观。而且考官如果要看某一门课的教学质量这个分布图是最好的佐证材料。平均分对比图可以按学期为横轴、平均分为纵轴做一个折线图用来观察成绩变化趋势// 放在同一个 Dashboard 组件里 const loadTrend async () { const res await request.get(/analysis/course_trend, { params: { course_id: selectedCourse.value } }) trendChart.setOption({ title: { text: 历年平均分趋势, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: res.data.terms }, yAxis: { type: value, min: 0, max: 100 }, series: [{ name: 平均分, type: line, data: res.data.avg_scores, smooth: true, areaStyle: { opacity: 0.15 } }] }) }对应后端需要再写一个按学期聚合平均分的接口app.route(/api/analysis/course_trend, methods[GET]) def course_trend(): course_id request.args.get(course_id, typeint) result db.session.execute( text( SELECT semester, AVG(score) as avg_score FROM scores WHERE course_id :cid AND score IS NOT NULL GROUP BY semester ORDER BY semester ), {cid: course_id} ).fetchall() return jsonify({ terms: [r.semester for r in result], avg_scores: [round(r.avg_score, 2) for r in result] })这个接口涉及一个易错点按学期分组以后如果某学期没有人选这门课那这个学期就不会出现在结果里。前端折线图拿到的横轴就会缺一段。处理方式有两种一种是前端自己补全所有学期另一种是后端用LEFT JOIN把学期表关联进去。这个项目规模里前端补全就够用。3.4 数据分析方法——不只是画画图那么简单很多同学把图表画出来就结束了但答辩的时候老师更关注你“分析”了什么、“得出什么结论”。所以我在可视化的基础上加了一些简单的数据解读逻辑。比如成绩预警功能自动统计不及格学生名单app.route(/api/analysis/failing_students, methods[GET]) def failing_students(): course_id request.args.get(course_id, typeint) result db.session.execute( text( SELECT s.student_no, s.name, s.class_name, sc.score FROM scores sc JOIN students s ON sc.student_id s.id WHERE sc.course_id :cid AND sc.score IS NOT NULL AND sc.score 60 ORDER BY sc.score ), {cid: course_id} ).fetchall() return jsonify([{ student_no: r.student_no, name: r.name, class_name: r.class_name, score: r.score } for r in result]) }再比如性别对比的分析这个可以拿来做更有深度的报告SELECT s.gender, COUNT(*) as cnt, AVG(sc.score) as avg_score, SUM(CASE WHEN sc.score 60 THEN 1 ELSE 0 END) / COUNT(*) * 100 as pass_rate FROM scores sc JOIN students s ON sc.student_id s.id WHERE sc.course_id :cid GROUP BY s.gender统计出来的数据前端用饼图展示性别占比用横向柱状图对比男女平均分这样一个简单的页面就能支撑一篇有数据有结论的分析报告。4. 常见问题与排查技巧实录这个项目我看着身边不少人做过自己也在上面翻过车。整理一下高频出现的问题按出现频率排个序。4.1 跨域请求被拦截前端 Console 报错大概是Access to XMLHttpRequest ... has been blocked by CORS policy。原因就是前端 5173 端口访问后端 5000 端口浏览器出于安全策略默认拦截。解决方案就是后端加上flask-cors在初始化代码里CORS(app)即可。但有个容易被忽略的问题如果后端接口报错比如 500 或者 400跨域头可能被吞掉浏览器还是会报 CORS 错误导致你以为是跨域问题实际上是后端代码 bug。排查的时候先看后端的终端输出确认接口是否真的正常返回了。4.2 中文乱码数据库里存的中文全部变成问号???或者乱码这个基本是字符集配置问题。MySQL 建库时指定 utf8mb4Flask 的连接串里也要带charsetutf8mb4而且要注意 IDE 里 Python 文件的编码格式PyCharm 默认是 UTF-8一般没问题但如果你改过设置可能在文件头加一行注释最保险# -*- coding: utf-8 -*-前端页面如果乱码检查一下 HTML 文件的meta charsetUTF-8Vue 的 index.html 一般默认有不用太担心。4.3 ECharts 图表宽度为 0/图表不显示这个坑我印象太深了。echarts.init如果执行的时机不对容器还没渲染完成图表就会初始化失败或者设置了容器宽度为 100% 但父容器宽度为 0图表自始至终不出现。解决办法一在onMounted里用nextTick再初始化onMounted(async () { await nextTick() chart echarts.init(chartDiv.value) })解决办法二如果图表在 Tab 切换里比如首页、成绩分析、学生管理三个 Tab切换到成绩分析那个 Tab 时容器才显示这时候用 setTimeout 延迟一瞬再 init 也能解决setTimeout(() { chart echarts.init(chartDiv.value) }, 100)这个办法看起来有点土但在很多场景下确实有效。4.4 SQLAlchemy 报错NoReferencedTableError定义模型类的时候外键引用了另一个表但那个表类还没定义或者类名写错就会报这个错。解决办法是调整模型定义的顺序被引用的表定义在前或者在定义relationship的时候用字符串形式比如db.relationship(Course)而不是db.relationship(Course)这样 SQLAlchemy 会在所有模型类加载完毕以后再解析关系。4.5 pip 安装库太慢或者超时换国内镜像源是最直接的前面设置过 npm 镜像那套逻辑pip 也一样pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask flask-cors flask-sqlalchemy pymysql pandas或者永久设置pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple4.6 Windows 下 MySQL 驱动报错如果用 Python 3.8 以上版本直接装mysqlclient经常编译失败报Microsoft Visual C 14.0 is required——这个错误掉进去过的人非常多。解决办法是先装pymysql然后在 Flask 的初始化代码里加一行import pymysql pymysql.install_as_MySQLdb()这样 SQLAlchemy 就能通过 MySQLdb 接口连接 MySQL 了绕开编译 C 扩展的环节非常省事。4.7 常见问题速查表问题现象可能原因快速解决前端请求接口报 404后端路由没匹配上或者请求地址拼错检查 Flask 的 app.route 路径确认带不带/api前缀前端请求接口报 500后端 Python 代码报错看 Flask 终端的堆栈信息定位到具体行数据库操作报table doesnt exist没执行建表语句在 Flask shell 里执行db.create_all()或用 SQL 文件建表axios 请求正常但页面数据不更新响应式问题确认用ref或reactive包裹数据别直接改普通变量ECharts 提示Cant get DOM width or height容器未渲染或高度为 0设置容器高度在 nextTick 后 init5. 功能扩展从课设项目到完整系统的进阶路线如果做完基础版本还有余力或者想在答辩时多展示一些亮点我从实际项目经验出发列几个性价比高的扩展方向按实现难度排序。5.1 按班级/专业维度的多级下钻现在的基础版本只能看到某个课程的全部学生成绩。可以加一层“班级筛选”先选课程再选班级图表跟着联动更新。这个改动的难点在于聚合 SQL 要加一个班级条件前端要维护多级联动状态。实现以后老师在期末分析成绩时就不用再人工筛选班级了实用性一下子上来了。5.2 导出分析报告Excel/PDF统计分析结果可以导出成 Excel 报告这个很多学校的管理人员都会用到。后端用pandas把查询结果转成 DataFrame再to_excel导出或者用reportlab生成 PDF。热词里有关于streaminghttpresponse 参数 content_type 和 content-disposition的搜索这说明很多人在做 Flask 导出文件时遇到过响应头设置的问题。这里补充说明一下Flask 返回文件下载一般用send_file或make_response关键是把Content-Disposition设置成附件形式下载Content-Type按文件类型设置。from flask import send_file import pandas as pd, io app.route(/api/export/course_score, methods[GET]) def export_course_score(): course_id request.args.get(course_id, typeint) # 查询成绩数据 rows db.session.execute( text( SELECT s.student_no, s.name, s.class_name, sc.score FROM scores sc JOIN students s ON sc.student_id s.id WHERE sc.course_id :cid ), {cid: course_id} ).fetchall() df pd.DataFrame([dict(r._mapping) for r in rows]) output io.BytesIO() with pd.ExcelWriter(output, engineopenpyxl) as writer: df.to_excel(writer, indexFalse, sheet_name成绩) output.seek(0) return send_file( output, as_attachmentTrue, download_name成绩单.xlsx, mimetypeapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet )5.3 登录认证与权限控制基础版本可以不做登录但加上登录认证以后系统完整度会高一个档次。用 Flask 的session存登录状态如果是前后端分离需要处理 CORS 里的credentials配置不同角色登录以后只能看到自己权限范围内的内容——学生只能看自己成绩老师可以录成绩管理员可以管全部。这块虽然不是核心功能但往往决定项目能不能往更高分数冲一冲。5.4 WebSocket 实时推送如果系统里加了“教师录入成绩后前端页面自动刷新”的需求传统做法是前端轮询隔几秒请求一次效果不够实时。用 Flask-SocketIO 做 WebSocket 实时推送数据更新后广播给所有连接的客户端图表自动刷新。这个扩展看起来高端而且实现不复杂面试或答辩时讲出来很加分。5.5 前端界面升级目前我用的原生 ECharts 加基础组件界面偏朴素。可以考虑引入Element Plus组件库这会让表格、表单、弹窗的交互细节专业很多而且组件库自带响应式栅格布局适配不同屏幕尺寸也不会费太多劲。热词里很多“vue安装依赖”“vue入门”的搜索估计也都是冲这块来的。安装命令npm install element-plus在main.js里引入import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)6. 部署与收尾如何让外网也能访问开发调试结束以后如果想让别人通过浏览器访问不能一直开着npm run dev和flask run。这里给出一套最简单的 Windows 部署方案。后端代码打包成生产模式运行先安装 waitress一个 Windows 上常用的纯 Python WSGI 服务器pip install waitress启动命令waitress-serve --host0.0.0.0 --port5000 app:app前端打包成静态文件npm run build打包结果在frontend/dist目录下是一堆静态文件。部署的时候可以用 Nginx 托管这些静态文件同时反代后端的 5000 端口server { listen 80; server_name your_domain_or_ip; root /path/to/frontend/dist; index index.html; location /api { proxy_pass http://127.0.0.1:5000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }这里有个细节try_files $uri $uri/ /index.html这行很重要。Vue 是单页应用路由是前端的 history 模式如果你直接访问/score这样的路径Nginx 会去找dist/score这个文件找不到返回 404。加了try_files以后所有路径都会回退到index.html由前端路由接管刷新页面就不会 404 了。按我个人的实际体会Flask 加 Vue 这套组合的优势是它的边界特别清楚Flask 管数据和业务逻辑Vue 管界面和交互ECharts 管图表展示每一层都能独立测试、独立替换。你后面想换数据库、换前端框架、加移动端接口都不会大动干戈。最后再分享一个小技巧开发过程中千万不要把前端后端所有操作都堆在main.py和App.vue里到了后期你会寸步难行。把接口按模块拆成student_api.py、course_api.py、analysis_api.py前端把组件按页面拆分这样断点调试、出问题定位、答辩讲解这三个场景都会轻松很多。 Flask+Vue学生选课成绩分析及可视化系统全栈开发实战
我做了好几个学期的选课、成绩管理类项目这次这个基于 Flask Vue 的“学生选课学习成绩分析及可视化分析”系统算是我个人觉得性价比最高的一套组合。它不复杂但把后端接口、前端交互、数据可视化、统计分析该有的东西全串起来了特别适合拿来当毕业设计、课程设计或者想入门全栈开发的人练手。先说清楚这个东西到底是干什么的。学生的选课信息、考试成绩通常散落在 Excel 表格、教务系统导出文件里想看某个班的平均分、某门课的及格率、成绩分布区间每次都靠人工统计费时而且容易错。这个项目的核心就是把这些数据收进数据库通过 Flask 提供接口Vue 做页面展示和交互再用 ECharts 把成绩分布、趋势对比、课程分析这些结果变成图表直观呈现在网页上。整体难度中等偏上一点点前端 Vue 部分需要熟悉组件化开发后端 Flask 部分主要就是 CRUD 加几个统计接口推荐顺序是先跑通后端再做前端最后联调。1. 项目整体设计与思路拆解动手之前最忌讳上来就写代码。这个项目我踩过一次坑——第一版直接按“学生管理、课程管理、成绩管理”三个模块平铺去写结果代码写了一堆最后做统计可视化的时候发现数据表设计不合理很多统计逻辑写不出来又回头改表结构。所以这次我把整个设计思路重新理了一遍。1.1 功能模块划分与需求解析一个完整的学生选课成绩系统表面看就是增删改查但实际上可以抽象成下面几块模块核心功能难点用户认证学生/教师/管理员登录权限区分密码加密学生管理学生信息维护和其他模块的关联约束课程管理课程信息、教师信息维护课程与选课记录的联动选课管理学生选课、退课防止重复选课、冲突处理成绩管理成绩录入、修改成绩有效性校验与统计的耦合统计分析平均分、及格率、成绩分布、趋势聚合查询的效率和正确性可视化展示图表化呈现分析结果ECharts 配置和交互但这里有一层很多人没想透的需求——这个系统最重要的不是那几个增删改查页面而是“分析”和“可视化”。所以设计的时候成绩表不能只存“学生、课程、分数”三个字段一定要考虑冗余存储选课学期、课程类别、任课教师这些维度。比如你后面想查“2024-2025 第一学期《数据结构》不同分数段的男女比例”如果数据表里没有性别冗余字段光靠关联查询页面会卡到怀疑人生。1.2 为什么选 Flask 而不是 Django——标题怎么就混了项目标题里同时出现了 Flask 和 Django我第一次看到也愣了一下。实际开发中确实会遇到这种命名干扰很多同学在一开始选型时反复横跳。我的经验是这个项目的体量Flask 更合适但 Django 也不差关键是搞清楚区别。Flask 是微框架轻、自由、逻辑清晰路由写起来非常直接。Django 是重框架自带 ORM、Admin 后台、认证体系开发效率高但学习曲线陡而且框架约束多。像这个项目里统计分析占了很大比重你往往需要写自定义 SQL 做聚合查询用 Flask 加 SQLAlchemy 反而更灵活不会被 Django ORM 的查询表达式绕晕。所以回到标题这个事如果命名时把 Django 去掉直接叫“python-flask学生选课学习成绩分析及可视化分析”会更准确。但如果你手头已经有 Django 基础用 Django 重写这个项目也完全可行后端的 REST 接口用 DRFDjango REST Framework会更省事。不过配 Vue 时我还是推荐 Flask前后端完全分离Flask 只出 JSON 接口特别干净。1.3 前后端分离架构Flask 只做 API这次项目我直接采用前后端完全分离的架构。PyCharm 里开两个工程一个是backendFlask项目一个是frontendVue项目前端通过 axios 请求后端的/api接口拿 JSON 数据。为什么不用服务端渲染的模板方式两个原因。一是这个项目里有大量的图表交互比如点击班级筛选、切换学期、图表联动这些用 Vue 的响应式数据管理特别顺手如果用 Jinja2 模板每点一次都得刷新页面二是前后端分离以后你后续想加小程序、App 端后端接口可以直接复用不用重新写。架构图描述一下就是浏览器(Vue页面) ↓ axios JSON Flask后端(REST API) ↓ SQLAlchemy MySQL数据库开发的时候 Flask 跑在 5000 端口Vue 的 dev server 跑在 8080 端口通过代理解决跨域。生产部署时可以 Nginx 托管前端静态文件并反向代理到 Flask不过课程设计阶段不用搞那么复杂能跑起来就行。2. 环境准备与开发工具链配置这个项目的环境配置是个分水岭。配得顺后面一路平坦配不顺光装环境都能卡一天。热词里出现大量 pycharm 安装、python 环境配置、vue 安装及环境配置的搜索内容说明这块确实是新手重灾区。我把整个流程从零走一遍尽量写细一点。2.1 Python 环境与 PyCharm 配置Python 版本我建议用 3.9 或 3.10太新的版本比如 3.13有可能遇到某些第三方库还没跟上导致编译报错的情况。安装的时候记得勾选“Add Python to PATH”这个不勾后面在命令行跑python命令就会提示找不到很多同学在这里卡住。PyCharm 我建议直接下载社区版Community Edition就够用了免费而且这个项目完全用不到专业版的 Django 支持、数据库工具这些功能。之前热词里频繁出现“pycharm激活”相关的搜索这里多说一句社区版不需要任何激活功能对这个项目完全够用不要去搞那些乱七八糟的东西省心也安全。新建 Flask 项目的时候PyCharm 有自带模板但我不建议用它生成的结构太死板。直接新建一个纯 Python 项目然后打开终端手动创建虚拟环境python -m venv venvWindows 下激活虚拟环境venv\Scripts\activateMac/Linux 下是source venv/bin/activate看到命令行前面出现(venv)就算成功。然后安装依赖pip install flask flask-cors flask-sqlalchemy pymysql pandas这里说明一下每个库的用途flask 是核心 Web 框架flask-cors 解决跨域问题flask-sqlalchemy 是 ORM帮我们把 Python 类和数据库表对应起来pymysql 是 MySQL 的驱动如果你是本地开发不想装 MySQL可以用 SQLite后面细说pandas 主要是用来做成绩数据的统计分析比如快速算平均分、分组统计比自己写循环快很多。2.2 Vue 环境安装与项目初始化前端这块Node.js 是必须的。去官网下载 LTS 版本长期支持版一路下一步就行。安装完以后打开命令行验证node -v npm -v能输出版本号就说明 Node 环境没问题。然后设置一下 npm 镜像源否则下载依赖的时候可能会非常慢甚至超时npm config set registry https://registry.npmmirror.com创建 Vue 项目我用的是 Vue 3 Vite 的组合比 Webpack 那套启动快很多npm create vuelatest frontend这个命令会交互式问你一些配置项比如 TypeScript 要不要、Router 要不要、Pinia 要不要。我的建议是都选 No先求简单后面觉得需要再手动加。只保留最基础的 Vue 3 就行因为成绩分析和可视化系统本身页面逻辑不复杂主要是表格加图表用不上状态管理库。进入项目目录安装依赖cd frontend npm install再安装会用到的库npm install axios echartsaxios 是发 HTTP 请求用的echarts 是数据可视化图表库。这两个是本项目前端最核心的依赖。启动开发服务器npm run dev正常情况下终端会显示一个本地访问地址比如http://localhost:5173浏览器打开能看到 Vue 的欢迎页面就说明 Vue 环境配好了。2.3 数据库准备数据库我推荐 MySQL关系型数据库对这类有明确关联关系的数据管理起来最顺手。本地装好 MySQL 后用命令行或者 Navicat 建一个库CREATE DATABASE student_course DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;注意字符集一定要指定utf8mb4否则你存中文成绩分析报告或者学生姓名的时候很容易出现乱码。如果你的机器上没装好 MySQL或者不想折腾SQLite 也能应付这个项目。SQLAlchemy 连接 SQLite 只需要改一行配置不用装任何额外驱动。但课程设计答辩的时候评委一般会看你知道不知道 MySQL 的用法所以建议还是硬着头皮把 MySQL 配好。3. 核心代码实现从数据表设计到可视化图表环境都准备好以后就到了真正写代码的阶段。这一章节我把从后端到前端的关键代码全部拆开讲包括为什么这么写、数据表为什么这么建、统计接口怎么设计尽量让你能照着敲。3.1 数据表结构设计——分析功能的基石前面说过数据表设计是整个项目的灵魂尤其是要做统计分析表字段的冗余和关联设计非常重要。我这次设计了三张核心表加一张用户表。先看学生表class Student(db.Model): __tablename__ students id db.Column(db.Integer, primary_keyTrue) student_no db.Column(db.String(20), uniqueTrue, nullableFalse, indexTrue) name db.Column(db.String(50), nullableFalse) gender db.Column(db.String(10)) class_name db.Column(db.String(50)) major db.Column(db.String(50)) enroll_year db.Column(db.String(10))这里有个点要强调student_no加了uniqueTrue和indexTrue。unique 保证学号不重复index 给学号建了索引配合后续的查询性能会好很多。如果你是在几百条数据的小项目里体会不到区别但数据量上万以后没有索引的查询真的会慢。课程表class Course(db.Model): __tablename__ courses id db.Column(db.Integer, primary_keyTrue) course_no db.Column(db.String(20), uniqueTrue, nullableFalse) course_name db.Column(db.String(100), nullableFalse) credit db.Column(db.Float) course_type db.Column(db.String(30)) # 公共课/专业课/选修课 teacher_name db.Column(db.String(50)) term db.Column(db.String(30)) # 2024-2025-1成绩表这张表是重点class Score(db.Model): __tablename__ scores id db.Column(db.Integer, primary_keyTrue) student_id db.Column(db.Integer, db.ForeignKey(students.id)) course_id db.Column(db.Integer, db.ForeignKey(courses.id)) score db.Column(db.Float) semester db.Column(db.String(30)) student db.relationship(Student, backrefdb.backref(scores, lazydynamic)) course db.relationship(Course, backrefdb.backref(scores, lazydynamic))很多初学者会问为什么成绩表不直接存学号、课程号而是存student_id和course_id两个外键这是关系数据库的范式要求——通过外键关联保证数据一致性。比如学生改了姓名所有成绩记录里的显示会自动联动更新不需要逐条改如果直接冗余姓名在成绩表里一旦学生改名成绩表里就出现不统一的数据。我这里用的是db.relationship建立了 ORM 层面的关系这样在 Python 代码里可以直接用score.student.name取值不用手动写 join 查询。用户表class User(db.Model): __tablename__ users id db.Column(db.Integer, primary_keyTrue) username db.Column(db.String(50), uniqueTrue, nullableFalse) password db.Column(db.String(256), nullableFalse) role db.Column(db.String(20)) # admin / teacher / student注意密码字段长度我设成了 256因为用了werkzeug.security的generate_password_hash生成的哈希字符串比较长。密码绝对不能明文存储这是基本的安全底线。3.2 Flask 后端接口设计与统计分析逻辑Flask 的接口写法比较直观。我在这里只列几个关键路由完整的代码你可以按这个思路扩展。首先是 Flask 应用初始化和数据库绑定from flask import Flask, request, jsonify from flask_cors import CORS from flask_sqlalchemy import SQLAlchemy from sqlalchemy import text app Flask(__name__) CORS(app) app.config[SQLALCHEMY_DATABASE_URI] mysqlpymysql://root:123456localhost:3306/student_course?charsetutf8mb4 app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False db SQLAlchemy(app)CORS(app)这行很重要前端 Vue 跑在 8080 端口后端跑在 5000 端口浏览器默认会拦截跨域请求加了 flask-cors 以后后端接口就允许前端跨域调用了。然后是学生选课接口app.route(/api/select_course, methods[POST]) def select_course(): data request.get_json() student_id data.get(student_id) course_id data.get(course_id) # 检查是否已选过该课程 existing Score.query.filter_by(student_idstudent_id, course_idcourse_id).first() if existing: return jsonify({message: 你已经选过这门课程了}), 400 # 检查学分是否超限等逻辑 score Score(student_idstudent_id, course_idcourse_id, scoreNone, semester2024-2025-1) db.session.add(score) db.session.commit() return jsonify({message: 选课成功}), 200选课的关键在于“防重复”和“防冲突”。上面代码检查了同一学生同一课程是否已经存在记录。更完善的项目还会检查上课时间冲突不过那个需要额外维护一张排课时间表超出这个项目范围暂时不展开。接下来是成绩分析接口这个是整个项目的重头戏app.route(/api/analysis/course_stats, methods[GET]) def course_stats(): course_id request.args.get(course_id, typeint) course Course.query.get(course_id) # 用 SQL 聚合查询统计分数 stats db.session.execute( text( SELECT COUNT(*) as total, AVG(score) as avg_score, MAX(score) as max_score, MIN(score) as min_score, SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) / COUNT(*) * 100 as pass_rate, SUM(CASE WHEN score 90 THEN 1 ELSE 0 END) / COUNT(*) * 100 as excellent_rate FROM scores WHERE course_id :cid AND score IS NOT NULL ), {cid: course_id} ).first() return jsonify({ course_name: course.course_name, total_students: stats.total, avg_score: round(stats.avg_score, 2), max_score: stats.max_score, min_score: stats.min_score, pass_rate: round(stats.pass_rate, 2), excellent_rate: round(stats.excellent_rate, 2) })这里为什么直接用原生 SQL 而不是 SQLAlchemy 的 ORM 链式查询因为聚合计算、条件统计这类操作原生 SQL 表达更简洁、逻辑更清晰。SQLAlchemy 的func也可以实现但 SQL 一眼看过去就知道统计口径是什么。考试分数及格率就是score 60的数量除以总数量优秀率是score 90的比例这个统计口径要在代码里写清楚省得后面答辩被评委问倒。注score IS NOT NULL这个条件是因为学生选课以后还没有录入成绩如果把这些空值记录算进去平均分是错的。成绩分布接口用于直方图展示app.route(/api/analysis/score_distribution, methods[GET]) def score_distribution(): course_id request.args.get(course_id, typeint) result db.session.execute( text( SELECT SUM(CASE WHEN score 60 THEN 1 ELSE 0 END) as s_lt_60, SUM(CASE WHEN score 60 AND score 70 THEN 1 ELSE 0 END) as s_60_70, SUM(CASE WHEN score 70 AND score 80 THEN 1 ELSE 0 END) as s_70_80, SUM(CASE WHEN score 80 AND score 90 THEN 1 ELSE 0 END) as s_80_90, SUM(CASE WHEN score 90 THEN 1 ELSE 0 END) as s_90_100 FROM scores WHERE course_id :cid AND score IS NOT NULL ), {cid: course_id} ).first() return jsonify({ labels: [60, 60-70, 70-80, 80-90, 90-100], data: [result.s_lt_60, result.s_60_70, result.s_70_80, result.s_80_90, result.s_90_100] })成绩分布的意义在于快速判断一门课的难度是否合理。如果 90 分以上的特别多说明考试可能太简单如果不及格的一大堆说明教学或者命题可能有问题。这个接口返回稳定的 5 段分箱数据前端拿到以后基本不用加工直接就能画图。除了这两个核心接口还有几个基础的数据接口app.route(/api/courses, methods[GET]) def get_courses(): courses Course.query.all() return jsonify([{ id: c.id, course_no: c.course_no, course_name: c.course_name, credit: c.credit, course_type: c.course_type, teacher_name: c.teacher_name, term: c.term } for c in courses]) app.route(/api/students, methods[GET]) def get_students(): students Student.query.all() return jsonify([{ id: s.id, student_no: s.student_no, name: s.name, gender: s.gender, class_name: s.class_name, major: s.major, enroll_year: s.enroll_year } for s in students])3.3 Vue 前端页面与 ECharts 可视化实现前端页面我分成几个单文件组件StudentManage.vue、CourseManage.vue、ScoreManage.vue、Dashboard.vue。这里重点讲 Dashboard也就是数据可视化看板。先配置 axios为了方便统一处理请求路径我在项目根目录创建src/utils/request.jsimport axios from axios const request axios.create({ baseURL: http://127.0.0.1:5000/api, timeout: 10000 }) export default request然后在组件里就可以快捷调用了。比如成绩分布图template div classcontainer div classfilter-bar select v-modelselectedCourse changeloadData option v-forc in courses :keyc.id :valuec.id{{ c.course_name }}/option /select /div div refchartDiv stylewidth: 100%; height: 400px;/div /div /template script setup import { ref, onMounted, nextTick } from vue import * as echarts from echarts import request from ../utils/request const courses ref([]) const selectedCourse ref(null) const chartDiv ref(null) let chart null const loadCourses async () { const res await request.get(/courses) courses.value res.data selectedCourse.value res.data[0]?.id || null loadData() } const loadData async () { if (!selectedCourse.value) return const res await request.get(/analysis/score_distribution, { params: { course_id: selectedCourse.value } }) renderChart(res.data) } const renderChart (data) { if (!chart) { chart echarts.init(chartDiv.value) } chart.setOption({ title: { text: 成绩分布, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: data.labels }, yAxis: { type: value, minInterval: 1 }, series: [{ name: 人数, type: bar, data: data.data, itemStyle: { color: function(params) { const colorMap [#c23531, #e6a23c, #f7d16b, #5cb87a, #409eff] return colorMap[params.dataIndex] } } }] }) } onMounted(() { loadCourses() }) /script有几个细节想提醒你注意。ECharts 的init必须在 DOM 渲染完成后调用所以用了onMounted因为 Vue 3 的 Composition API 里这个钩子就是 DOM 挂载后执行。如果发现图表加载不出来页面上是一个空白 div多半是容器高度为 0检查一下height样式。图表加载不出来最常见的原因是容器隐藏或者高度没设置这个问题我在第 4 节会再展开。每个分数段用不同的颜色区分这样在答辩演示的时候讲讲“红色是不及格段绿色是良好段”会很直观。而且考官如果要看某一门课的教学质量这个分布图是最好的佐证材料。平均分对比图可以按学期为横轴、平均分为纵轴做一个折线图用来观察成绩变化趋势// 放在同一个 Dashboard 组件里 const loadTrend async () { const res await request.get(/analysis/course_trend, { params: { course_id: selectedCourse.value } }) trendChart.setOption({ title: { text: 历年平均分趋势, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: res.data.terms }, yAxis: { type: value, min: 0, max: 100 }, series: [{ name: 平均分, type: line, data: res.data.avg_scores, smooth: true, areaStyle: { opacity: 0.15 } }] }) }对应后端需要再写一个按学期聚合平均分的接口app.route(/api/analysis/course_trend, methods[GET]) def course_trend(): course_id request.args.get(course_id, typeint) result db.session.execute( text( SELECT semester, AVG(score) as avg_score FROM scores WHERE course_id :cid AND score IS NOT NULL GROUP BY semester ORDER BY semester ), {cid: course_id} ).fetchall() return jsonify({ terms: [r.semester for r in result], avg_scores: [round(r.avg_score, 2) for r in result] })这个接口涉及一个易错点按学期分组以后如果某学期没有人选这门课那这个学期就不会出现在结果里。前端折线图拿到的横轴就会缺一段。处理方式有两种一种是前端自己补全所有学期另一种是后端用LEFT JOIN把学期表关联进去。这个项目规模里前端补全就够用。3.4 数据分析方法——不只是画画图那么简单很多同学把图表画出来就结束了但答辩的时候老师更关注你“分析”了什么、“得出什么结论”。所以我在可视化的基础上加了一些简单的数据解读逻辑。比如成绩预警功能自动统计不及格学生名单app.route(/api/analysis/failing_students, methods[GET]) def failing_students(): course_id request.args.get(course_id, typeint) result db.session.execute( text( SELECT s.student_no, s.name, s.class_name, sc.score FROM scores sc JOIN students s ON sc.student_id s.id WHERE sc.course_id :cid AND sc.score IS NOT NULL AND sc.score 60 ORDER BY sc.score ), {cid: course_id} ).fetchall() return jsonify([{ student_no: r.student_no, name: r.name, class_name: r.class_name, score: r.score } for r in result]) }再比如性别对比的分析这个可以拿来做更有深度的报告SELECT s.gender, COUNT(*) as cnt, AVG(sc.score) as avg_score, SUM(CASE WHEN sc.score 60 THEN 1 ELSE 0 END) / COUNT(*) * 100 as pass_rate FROM scores sc JOIN students s ON sc.student_id s.id WHERE sc.course_id :cid GROUP BY s.gender统计出来的数据前端用饼图展示性别占比用横向柱状图对比男女平均分这样一个简单的页面就能支撑一篇有数据有结论的分析报告。4. 常见问题与排查技巧实录这个项目我看着身边不少人做过自己也在上面翻过车。整理一下高频出现的问题按出现频率排个序。4.1 跨域请求被拦截前端 Console 报错大概是Access to XMLHttpRequest ... has been blocked by CORS policy。原因就是前端 5173 端口访问后端 5000 端口浏览器出于安全策略默认拦截。解决方案就是后端加上flask-cors在初始化代码里CORS(app)即可。但有个容易被忽略的问题如果后端接口报错比如 500 或者 400跨域头可能被吞掉浏览器还是会报 CORS 错误导致你以为是跨域问题实际上是后端代码 bug。排查的时候先看后端的终端输出确认接口是否真的正常返回了。4.2 中文乱码数据库里存的中文全部变成问号???或者乱码这个基本是字符集配置问题。MySQL 建库时指定 utf8mb4Flask 的连接串里也要带charsetutf8mb4而且要注意 IDE 里 Python 文件的编码格式PyCharm 默认是 UTF-8一般没问题但如果你改过设置可能在文件头加一行注释最保险# -*- coding: utf-8 -*-前端页面如果乱码检查一下 HTML 文件的meta charsetUTF-8Vue 的 index.html 一般默认有不用太担心。4.3 ECharts 图表宽度为 0/图表不显示这个坑我印象太深了。echarts.init如果执行的时机不对容器还没渲染完成图表就会初始化失败或者设置了容器宽度为 100% 但父容器宽度为 0图表自始至终不出现。解决办法一在onMounted里用nextTick再初始化onMounted(async () { await nextTick() chart echarts.init(chartDiv.value) })解决办法二如果图表在 Tab 切换里比如首页、成绩分析、学生管理三个 Tab切换到成绩分析那个 Tab 时容器才显示这时候用 setTimeout 延迟一瞬再 init 也能解决setTimeout(() { chart echarts.init(chartDiv.value) }, 100)这个办法看起来有点土但在很多场景下确实有效。4.4 SQLAlchemy 报错NoReferencedTableError定义模型类的时候外键引用了另一个表但那个表类还没定义或者类名写错就会报这个错。解决办法是调整模型定义的顺序被引用的表定义在前或者在定义relationship的时候用字符串形式比如db.relationship(Course)而不是db.relationship(Course)这样 SQLAlchemy 会在所有模型类加载完毕以后再解析关系。4.5 pip 安装库太慢或者超时换国内镜像源是最直接的前面设置过 npm 镜像那套逻辑pip 也一样pip install -i https://pypi.tuna.tsinghua.edu.cn/simple flask flask-cors flask-sqlalchemy pymysql pandas或者永久设置pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple4.6 Windows 下 MySQL 驱动报错如果用 Python 3.8 以上版本直接装mysqlclient经常编译失败报Microsoft Visual C 14.0 is required——这个错误掉进去过的人非常多。解决办法是先装pymysql然后在 Flask 的初始化代码里加一行import pymysql pymysql.install_as_MySQLdb()这样 SQLAlchemy 就能通过 MySQLdb 接口连接 MySQL 了绕开编译 C 扩展的环节非常省事。4.7 常见问题速查表问题现象可能原因快速解决前端请求接口报 404后端路由没匹配上或者请求地址拼错检查 Flask 的 app.route 路径确认带不带/api前缀前端请求接口报 500后端 Python 代码报错看 Flask 终端的堆栈信息定位到具体行数据库操作报table doesnt exist没执行建表语句在 Flask shell 里执行db.create_all()或用 SQL 文件建表axios 请求正常但页面数据不更新响应式问题确认用ref或reactive包裹数据别直接改普通变量ECharts 提示Cant get DOM width or height容器未渲染或高度为 0设置容器高度在 nextTick 后 init5. 功能扩展从课设项目到完整系统的进阶路线如果做完基础版本还有余力或者想在答辩时多展示一些亮点我从实际项目经验出发列几个性价比高的扩展方向按实现难度排序。5.1 按班级/专业维度的多级下钻现在的基础版本只能看到某个课程的全部学生成绩。可以加一层“班级筛选”先选课程再选班级图表跟着联动更新。这个改动的难点在于聚合 SQL 要加一个班级条件前端要维护多级联动状态。实现以后老师在期末分析成绩时就不用再人工筛选班级了实用性一下子上来了。5.2 导出分析报告Excel/PDF统计分析结果可以导出成 Excel 报告这个很多学校的管理人员都会用到。后端用pandas把查询结果转成 DataFrame再to_excel导出或者用reportlab生成 PDF。热词里有关于streaminghttpresponse 参数 content_type 和 content-disposition的搜索这说明很多人在做 Flask 导出文件时遇到过响应头设置的问题。这里补充说明一下Flask 返回文件下载一般用send_file或make_response关键是把Content-Disposition设置成附件形式下载Content-Type按文件类型设置。from flask import send_file import pandas as pd, io app.route(/api/export/course_score, methods[GET]) def export_course_score(): course_id request.args.get(course_id, typeint) # 查询成绩数据 rows db.session.execute( text( SELECT s.student_no, s.name, s.class_name, sc.score FROM scores sc JOIN students s ON sc.student_id s.id WHERE sc.course_id :cid ), {cid: course_id} ).fetchall() df pd.DataFrame([dict(r._mapping) for r in rows]) output io.BytesIO() with pd.ExcelWriter(output, engineopenpyxl) as writer: df.to_excel(writer, indexFalse, sheet_name成绩) output.seek(0) return send_file( output, as_attachmentTrue, download_name成绩单.xlsx, mimetypeapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet )5.3 登录认证与权限控制基础版本可以不做登录但加上登录认证以后系统完整度会高一个档次。用 Flask 的session存登录状态如果是前后端分离需要处理 CORS 里的credentials配置不同角色登录以后只能看到自己权限范围内的内容——学生只能看自己成绩老师可以录成绩管理员可以管全部。这块虽然不是核心功能但往往决定项目能不能往更高分数冲一冲。5.4 WebSocket 实时推送如果系统里加了“教师录入成绩后前端页面自动刷新”的需求传统做法是前端轮询隔几秒请求一次效果不够实时。用 Flask-SocketIO 做 WebSocket 实时推送数据更新后广播给所有连接的客户端图表自动刷新。这个扩展看起来高端而且实现不复杂面试或答辩时讲出来很加分。5.5 前端界面升级目前我用的原生 ECharts 加基础组件界面偏朴素。可以考虑引入Element Plus组件库这会让表格、表单、弹窗的交互细节专业很多而且组件库自带响应式栅格布局适配不同屏幕尺寸也不会费太多劲。热词里很多“vue安装依赖”“vue入门”的搜索估计也都是冲这块来的。安装命令npm install element-plus在main.js里引入import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)6. 部署与收尾如何让外网也能访问开发调试结束以后如果想让别人通过浏览器访问不能一直开着npm run dev和flask run。这里给出一套最简单的 Windows 部署方案。后端代码打包成生产模式运行先安装 waitress一个 Windows 上常用的纯 Python WSGI 服务器pip install waitress启动命令waitress-serve --host0.0.0.0 --port5000 app:app前端打包成静态文件npm run build打包结果在frontend/dist目录下是一堆静态文件。部署的时候可以用 Nginx 托管这些静态文件同时反代后端的 5000 端口server { listen 80; server_name your_domain_or_ip; root /path/to/frontend/dist; index index.html; location /api { proxy_pass http://127.0.0.1:5000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { try_files $uri $uri/ /index.html; } }这里有个细节try_files $uri $uri/ /index.html这行很重要。Vue 是单页应用路由是前端的 history 模式如果你直接访问/score这样的路径Nginx 会去找dist/score这个文件找不到返回 404。加了try_files以后所有路径都会回退到index.html由前端路由接管刷新页面就不会 404 了。按我个人的实际体会Flask 加 Vue 这套组合的优势是它的边界特别清楚Flask 管数据和业务逻辑Vue 管界面和交互ECharts 管图表展示每一层都能独立测试、独立替换。你后面想换数据库、换前端框架、加移动端接口都不会大动干戈。最后再分享一个小技巧开发过程中千万不要把前端后端所有操作都堆在main.py和App.vue里到了后期你会寸步难行。把接口按模块拆成student_api.py、course_api.py、analysis_api.py前端把组件按页面拆分这样断点调试、出问题定位、答辩讲解这三个场景都会轻松很多。