Flask+Vue贫困生资助系统：业务闭环与权限控制实战-北京尧图网络

简介本资源是一套完整可用的毕业设计级贫困生资助管理系统面向计算机及相关专业本科生、毕业设计学生及Python全栈初学者解决高校学生资助管理流程数字化、前后端分离开发实践等实际需求。项目采用Python后端Django/Flask类框架与Vue前端技术栈含可运行源码、配套SQL数据库及完整部署脚本如安装.bat、运行.bat所有模块均经本地编译调试评审得分98分内容通过助教审定难度适中且具备教学示范性。压缩包共755个文件12.96MB涵盖40个核心Python业务逻辑文件、38个Vue组件页面、162个JS交互脚本、51个CSS样式文件、2个SQL建库脚本以及SVG图标、JPG/PNG素材、HTML模板等结构清晰便于按模块学习与二次开发。目前已有107人下载学习适合用于毕设参考、课程设计实战或前后端分离项目入门训练。1. 这不是又一个学生管理系统——它用 Flask Vue 实现了真实资助业务流闭环很多同学拿到“贫困生资助系统”毕业设计第一反应是不就是增删改查加个登录但实际评审时被问倒的往往是那些藏在表单背后的业务逻辑如何校验家庭经济困难认定等级与助学金档位的映射关系怎样防止同一学生在多个院系重复申报资助发放记录如何与财务系统凭证号做可追溯关联这个 Python 贫困生资助管理系统评审分98分恰恰把这些问题落到了代码里——后端用 Flask 构建 RESTful API前端用 Vue 2.6 Element UI 实现动态权限路由数据库采用 MySQL 8.0 设计了student_info、family_economic_status、grant_application、fund_distribution_log四张核心表并通过外键约束和存储过程保障数据一致性。它适合计算机专业大三下至大四上正在做毕设的学生代码量适中后端约 4200 行前端约 3800 行无硬编码配置所有接口路径、数据库连接参数、JWT 密钥均通过.env文件注入也适合想练手前后端分离项目的初学者——你不需要从零搭环境运行.bat一键启动开发服务器安装.bat自动执行pip install -r requirements.txt并初始化数据库表结构。提示项目中所有.vue.bak文件是原始开发备份如IndexMain.vue.bak对应主布局组件非临时文件3-build.bat用于生成生产环境静态资源2-run.bat启动 Flask 开发服务器并监听http://127.0.0.1:5000/api/前端默认访问http://localhost:8080跨域已在 Flask 的flask-cors中预配置。2. Flask 后端服务搭建从数据库建模到 JWT 权限控制链路2.1 数据库设计遵循资助业务实体关系而非简单用户-角色模型贫困生资助管理的核心矛盾在于身份认定、申请审核、资金发放、效果反馈四个阶段的数据耦合度高但操作主体不同辅导员初审、学院复审、资助中心终审、财务处打款。因此本系统未采用通用 RBAC 模型而是按业务域拆分权限表-- 学生基本信息含身份证号哈希值符合等保要求 CREATE TABLE student_info ( id INT PRIMARY KEY AUTO_INCREMENT, stu_id VARCHAR(12) NOT NULL UNIQUE, -- 学号 name VARCHAR(20) NOT NULL, id_card_hash CHAR(64) NOT NULL, -- SHA256(id_card) college VARCHAR(30), major VARCHAR(30), grade YEAR, status ENUM(在校, 休学, 毕业) DEFAULT 在校 ); -- 家庭经济困难认定结果由学校统一组织评议每年更新 CREATE TABLE family_economic_status ( id INT PRIMARY KEY AUTO_INCREMENT, stu_id VARCHAR(12) NOT NULL, assessment_year YEAR NOT NULL, level ENUM(特别困难, 困难, 一般困难) NOT NULL, assessment_unit VARCHAR(50), -- 认定单位如XX学院学生工作办公室 FOREIGN KEY (stu_id) REFERENCES student_info(stu_id) ON DELETE CASCADE ); -- 助学金申请单每次申请生成独立记录支持撤回 CREATE TABLE grant_application ( id INT PRIMARY KEY AUTO_INCREMENT, app_no VARCHAR(20) NOT NULL UNIQUE, -- 申请编号GRANT-2024-0001 stu_id VARCHAR(12) NOT NULL, apply_date DATE NOT NULL, grant_type ENUM(国家助学金, 地方助学金, 社会捐助) NOT NULL, amount DECIMAL(10,2) NOT NULL, -- 申请金额元 status ENUM(待初审, 初审通过, 初审驳回, 复审中, 已终审, 已发放, 已终止) DEFAULT 待初审, reason TEXT, -- 申请理由富文本 FOREIGN KEY (stu_id) REFERENCES student_info(stu_id) ); -- 资金发放日志与财务系统对接的关键凭证 CREATE TABLE fund_distribution_log ( id INT PRIMARY KEY AUTO_INCREMENT, app_id INT NOT NULL, distribution_date DATETIME NOT NULL, bank_account VARCHAR(20), -- 收款银行卡号后四位脱敏 voucher_no VARCHAR(30), -- 财务凭证号如CW202405001 actual_amount DECIMAL(10,2) NOT NULL, operator VARCHAR(20), -- 操作人工号 FOREIGN KEY (app_id) REFERENCES grant_application(id) );注意family_economic_status表中assessment_year字段强制要求每年只能有一条有效记录避免历史认定结果干扰当期资助grant_application.status状态机严格限制流转路径例如“已发放”不可退回至“待初审”该约束在 Flask 的update_application_status()视图函数中通过if-elif链校验而非仅依赖数据库 CHECK。2.2 Flask API 层实现三层校验身份认证 → 业务权限 → 数据完整性后端使用 Flask 1.1.4 Flask-SQLAlchemy 2.4.4 Flask-JWT-Extended 3.25.1所有敏感接口如/api/application/submit必须携带Authorization: Bearer token。JWT payload 结构如下{ identity: 2021001, // 工号或学号 role: counselor, // 角色student / counselor / dean / admin dept: computer, // 所属院系代码 exp: 1735689600 // 过期时间戳 }关键校验逻辑体现在jwt_required装饰器后的视图函数中。以提交助学金申请为例# app/routes/application.py from flask import request, jsonify from flask_jwt_extended import jwt_required, get_jwt_identity, get_jwt from app.models import GrantApplication, StudentInfo from app import db application_bp.route(/submit, methods[POST]) jwt_required def submit_application(): current_user get_jwt_identity() claims get_jwt() # 第一层身份认证JWT 解析成功即通过 # 第二层业务权限校验 —— 仅在校学生可提交 student StudentInfo.query.filter_by(stu_idcurrent_user).first() if not student or student.status ! 在校: return jsonify({code: 403, msg: 非在校生无法提交申请}), 403 # 第三层数据完整性校验 —— 防止绕过前端校验 data request.get_json() required_fields [grant_type, amount, reason] for field in required_fields: if not data.get(field): return jsonify({code: 400, msg: f缺少必填字段{field}}), 400 if not isinstance(data[amount], (int, float)) or data[amount] 0: return jsonify({code: 400, msg: 申请金额必须为正数}), 400 # 关键业务规则同一学年同一类型申请不可重复 existing GrantApplication.query.filter( GrantApplication.stu_id current_user, GrantApplication.grant_type data[grant_type], db.extract(year, GrantApplication.apply_date) datetime.now().year ).first() if existing: return jsonify({code: 409, msg: 本学年该类型助学金已提交请勿重复申请}), 409 # 创建新申请记录 app GrantApplication( app_nofGRANT-{datetime.now().year}-{str(db.session.query(GrantApplication).count()1).zfill(4)}, stu_idcurrent_user, apply_datedatetime.now().date(), grant_typedata[grant_type], amountfloat(data[amount]), reasondata[reason], status待初审 ) db.session.add(app) db.session.commit() return jsonify({code: 200, msg: 申请提交成功, app_no: app.app_no}), 2002.2.1 JWT Token 刷新机制规避会话中断系统未采用长时效 token避免泄露风险而是实现双 token 模式access_token2小时refresh_token7天。刷新接口/api/auth/refresh仅验证refresh_token签名及有效期成功后签发新access_token# app/routes/auth.py auth_bp.route(/refresh, methods[POST]) jwt_required(refreshTrue) # 仅接受 refresh token def refresh_token(): current_user get_jwt_identity() new_token create_access_token(identitycurrent_user) return jsonify({access_token: new_token})提示create_access_token()默认使用app.config[JWT_SECRET_KEY]签名该密钥在config.py中读取自环境变量JWT_SECRET_KEY安装.bat会自动生成 32 位随机密钥写入.env杜绝硬编码密钥。2.3 数据库初始化与迁移SQLAlchemy-Migrate 替代方案项目未使用 Flask-Migrate因毕业设计场景下表结构稳定而是提供init_db.py脚本完成一次性初始化# scripts/init_db.py import os from app import create_app, db from app.models import StudentInfo, FamilyEconomicStatus, GrantApplication app create_app() with app.app_context(): # 删除所有表仅开发环境 db.drop_all() # 创建新表 db.create_all() print(✅ 数据库表创建完成) # 插入测试数据管理员账号admin/123456 from werkzeug.security import generate_password_hash admin_pwd generate_password_hash(123456) # ... 插入初始用户、测试学生等 print(✅ 测试数据插入完成)执行命令python scripts/init_db.py。该脚本在安装.bat中被调用确保每次重装环境都能获得干净数据库。3. Vue 前端工程化实践从路由守卫到 Axios 请求拦截的完整链路3.1 基于角色的动态路由生成解决“菜单权限”与“接口权限”双重校验前端使用 Vue 2.6.14 Vue-Router 3.5.3 Vuex 3.6.2摒弃静态路由配置改为在登录成功后拉取用户权限菜单并动态添加// src/router/index.js import Vue from vue import VueRouter from vue-router import store from /store Vue.use(VueRouter) // 异步加载路由组件减少首屏体积 const Login () import(/views/Login.vue) const IndexMain () import(/views/IndexMain.vue) const ApplicationList () import(/views/ApplicationList.vue) const ApplicationForm () import(/views/ApplicationForm.vue) // 全局路由守卫检查 token 有效性 router.beforeEach(async (to, from, next) { const token localStorage.getItem(access_token) if (!token to.path ! /login) { next(/login) } else if (token to.path /login) { next(/) } else { // 校验 token 是否过期前端粗略判断 try { const payload JSON.parse(atob(token.split(.)[1])) if (Date.now() payload.exp * 1000) { await store.dispatch(user/logout) next(/login) } else { next() } } catch (e) { next(/login) } } }) // 登录后动态添加路由 export function addDynamicRoutes(menus) { menus.forEach(menu { const route { path: menu.path, name: menu.name, component: () import(/views/${menu.component}.vue), meta: { title: menu.title, role: menu.role } } router.addRoute(layout, route) // 添加到名为 layout 的父路由下 }) } export default routermenus数据由/api/auth/menu接口返回结构示例[ { path: /application/list, name: ApplicationList, component: ApplicationList, title: 申请列表, role: [student, counselor, dean] }, { path: /application/audit, name: AuditList, component: AuditList, title: 审核任务, role: [counselor, dean, admin] } ]3.1.1 路由元信息驱动侧边栏渲染IndexAsideStatic.vue组件根据this.$route.meta.role数组与当前用户角色比对决定是否显示某菜单项!-- src/components/IndexAsideStatic.vue -- template el-aside width200px el-menu :default-active$route.path classel-menu-vertical-demo template v-formenu in filteredMenus el-menu-item :keymenu.path :indexmenu.path clickhandleMenuClick(menu) i :classmenu.icon/i span slottitle{{ menu.title }}/span /el-menu-item /template /el-menu /el-aside /template script export default { computed: { filteredMenus() { const userRole this.$store.state.user.role return this.$store.state.menu.list.filter(menu menu.role.includes(userRole) // 精确匹配角色字符串 ) } } } /script3.2 Axios 请求拦截器统一处理 Token 与错误响应所有 API 请求通过封装的request.js发起内置请求/响应拦截器// src/utils/request.js import axios from axios import { Message } from element-ui import store from /store // 请求拦截器自动添加 Authorization 头 axios.interceptors.request.use( config { const token localStorage.getItem(access_token) if (token) { config.headers.Authorization Bearer ${token} } return config }, error Promise.reject(error) ) // 响应拦截器统一处理业务错误码 axios.interceptors.response.use( response { const { code, msg, data } response.data if (code 200) { return data } else if (code 401) { // token 过期触发刷新或登出 store.dispatch(user/logout) Message.error(登录已过期请重新登录) window.location.href /login } else if (code 403) { Message.warning(msg || 权限不足) } else { Message.error(msg || 请求失败) } return Promise.reject(new Error(msg)) }, error { if (error.response?.status 500) { Message.error(服务器内部错误请联系管理员) } else if (error.code ECONNABORTED) { Message.error(请求超时请检查网络) } return Promise.reject(error) } ) export default axios注意401错误处理中未直接跳转/login而是调用store.dispatch(user/logout)该 action 会清除本地 token 并重置 Vuex 状态确保后续路由守卫能正确拦截。3.3 表单级数据校验与状态管理基于 Element UI 的深度集成助学金申请表单ApplicationForm.vue使用 Element UI 的el-form组件校验规则定义在data()中template el-form :modelform :rulesrules refformRef label-width100px el-form-item label资助类型 propgrant_type el-select v-modelform.grant_type placeholder请选择 el-option label国家助学金 value国家助学金/el-option el-option label地方助学金 value地方助学金/el-option /el-select /el-form-item el-form-item label申请金额元 propamount el-input v-model.numberform.amount typenumber min0/el-input /el-form-item el-form-item label申请理由 propreason el-input typetextarea v-modelform.reason :rows4/el-input /el-form-item el-form-item el-button typeprimary clicksubmitForm提交申请/el-button /el-form-item /el-form /template script export default { data() { return { form: { grant_type: , amount: null, reason: }, rules: { grant_type: [ { required: true, message: 请选择资助类型, trigger: change } ], amount: [ { required: true, message: 请输入申请金额, trigger: blur }, { type: number, message: 金额必须为数字, trigger: blur }, { min: 100, max: 5000, message: 金额应在100-5000元之间, trigger: blur } ], reason: [ { required: true, message: 请填写申请理由, trigger: blur }, { min: 20, message: 理由不少于20字, trigger: blur } ] } } } } /script3.3.1 提交前二次校验与防重复提交submitForm方法在调用 API 前执行额外校验并禁用按钮防止重复点击methods: { submitForm() { this.$refs.formRef.validate(valid { if (valid) { // 禁用提交按钮防止重复提交 this.submitLoading true this.$refs.formRef.clearValidate() // 清除上次校验状态 // 调用 API submitApplication(this.form) .then(res { this.$message.success(申请提交成功) this.$router.push(/application/list) }) .catch(err { this.$message.error(err.response?.data?.msg || 提交失败) }) .finally(() { this.submitLoading false }) } }) } }4. 本地开发与部署全流程从 Windows 双击运行到 Linux 生产环境上线4.1 Windows 环境下双击批处理文件完成全栈启动项目根目录提供四个关键.bat文件其执行逻辑如下文件名功能关键命令安装.bat初始化 Python 环境、安装依赖、创建数据库python -m venv venvvenv\Scripts\activate.batpip install -r requirements.txtpython scripts/init_db.py运行.bat启动 Flask 后端端口5000和 Vue 前端端口8080start cmd /k venv\Scripts\activate.bat python app.pystart cmd /k cd frontend npm run serve2-run.bat仅启动 Flask 后端供前端单独调试venv\Scripts\activate.bat python app.py3-build.bat构建前端生产包输出到frontend/distcd frontend npm run build提示运行.bat使用start cmd /k分别开启两个命令行窗口避免前后端进程互相阻塞app.py中app.run(debugTrue, host0.0.0.0, port5000)允许局域网内其他设备访问便于手机调试。4.2 Linux 生产环境部署Nginx 反向代理 Gunicorn Supervisor将项目部署到阿里云 ECSCentOS 7.9的标准流程如下4.2.1 后端部署Gunicorn 替代 Flask 内置服务器# 1. 安装依赖 sudo yum install python38 python38-pip nginx gcc sudo pip3 install gunicorn supervisor # 2. 创建部署目录并上传代码 sudo mkdir -p /opt/grant-system sudo chown -R $USER:$USER /opt/grant-system # 将源码解压到 /opt/grant-system/ # 3. 创建虚拟环境并安装依赖 cd /opt/grant-system python3.8 -m venv venv source venv/bin/activate pip install -r requirements.txt # 4. 配置 Gunicorngunicorn.conf.py bind 127.0.0.1:8000 workers 3 worker_class sync timeout 30 keepalive 2 accesslog /var/log/grant-access.log errorlog /var/log/grant-error.log loglevel info启动命令gunicorn -c gunicorn.conf.py app:app4.2.2 Nginx 配置实现前后端分离的静态资源托管与 API 代理# /etc/nginx/conf.d/grant.conf upstream grant_backend { server 127.0.0.1:8000; } server { listen 80; server_name grant.yourdomain.com; # 前端静态资源由 3-build.bat 生成 location / { root /opt/grant-system/frontend/dist; try_files $uri $uri/ /index.html; } # API 请求代理到 Gunicorn location /api/ { proxy_pass http://grant_backend/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 静态文件如上传的证明材料 location /uploads/ { alias /opt/grant-system/uploads/; } }重启 Nginxsudo systemctl restart nginx4.2.3 Supervisor 进程守护确保服务自启# /etc/supervisord.d/grant.ini [program:grant-backend] command/opt/grant-system/venv/bin/gunicorn -c /opt/grant-system/gunicorn.conf.py app:app directory/opt/grant-system userroot autostarttrue autorestarttrue redirect_stderrtrue stdout_logfile/var/log/grant-supervisor.log启用sudo supervisorctl reread sudo supervisorctl update sudo supervisorctl start grant-backend4.3 常见部署问题排查清单现象可能原因快速验证命令访问首页白屏控制台报Failed to load resource: the server responded with a status of 404 ()Nginx 未正确指向dist目录ls -l /opt/grant-system/frontend/dist检查是否存在index.html登录后跳转/显示 404Vue Router history 模式需 Nginx 配置try_files检查/etc/nginx/conf.d/grant.conf中location /块是否包含try_files $uri $uri/ /index.html;API 请求返回 502 Bad GatewayGunicorn 未启动或端口不匹配sudo supervisorctl status查看进程状态curl http://127.0.0.1:8000/api/auth/ping测试后端连通性上传文件失败提示Permission denieduploads目录权限不足sudo chown -R nginx:nginx /opt/grant-system/uploadsCentOS或www-data:www-dataUbuntu5. 业务级调试技巧利用数据库快照与前端 Mock 数据快速定位问题5.1 使用 MySQL 快照还原特定业务场景数据当需要复现“辅导员初审通过后学院复审页面不显示该申请”这类问题时手动构造数据效率低。项目提供data_snapshots/目录存放按业务阶段命名的 SQL 快照snapshot_counselor_approved.sql包含 5 条status初审通过的申请记录snapshot_dean_pending.sql包含 3 条status初审通过且collegecomputer的记录供计算机学院复审还原步骤# 停止应用 sudo supervisorctl stop grant-backend # 导入快照覆盖原表 mysql -u root -p grant_db data_snapshots/snapshot_dean_pending.sql # 启动应用 sudo supervisorctl start grant-backend提示快照文件使用mysqldump --no-create-info --skip-triggers grant_db grant_application生成仅导出数据不导出表结构避免与当前表结构冲突。5.2 前端 Mock 服务绕过后端联调专注 UI 逻辑验证frontend/mock目录内置 Mock.js 规则启动命令npm run mock需先npm install mockjs// frontend/mock/application.js import Mock from mockjs Mock.mock(/api/application/list, get, () { return { code: 200, data: Mock.mock({ list|5: [{ app_no: guid(), stu_id: string(number, 10), name: cname(), grant_type: pick([国家助学金, 地方助学金]), amount|1000-5000: 1, status: pick([待初审, 初审通过, 复审中]), apply_date: date(yyyy-MM-dd) }] }) } })此时访问http://localhost:8080前端将直接消费 Mock 数据无需启动 Flask 后端。该方式特别适合助教验收 UI 交互、动画效果等前端专项。5.3 关键业务断点调试在 Flask 中注入实时日志当线上环境出现“资金发放成功但财务凭证号未写入”这类偶发问题时在fund_distribution_log插入逻辑处添加结构化日志# app/routes/distribution.py import logging logger logging.getLogger(__name__) app.route(/distribute, methods[POST]) jwt_required def distribute_fund(): data request.get_json() # ... 参数校验 log_data { app_id: data[app_id], operator: get_jwt_identity(), bank_last4: data.get(bank_account, )[-4:], voucher_no: data.get(voucher_no, ), actual_amount: data[actual_amount] } logger.info(f资金发放请求: {log_data}) # 输出到 /var/log/grant-error.log # 执行数据库插入 log FundDistributionLog(**data) db.session.add(log) db.session.commit() logger.info(f资金发放成功: app_id{data[app_id]}, voucher_no{data[voucher_no]}) return jsonify({code: 200, msg: 发放成功})配合journalctl -u supervisord -f | grep grant实时追踪可快速定位是前端传参缺失还是数据库事务未提交。本文还有配套的精品资源点击获取

Flask+Vue贫困生资助系统：业务闭环与权限控制实战

相关推荐

libcurl CURLOPT_DNS_LOCAL_IP4 详解：为 DNS 解析绑定指定 IPv4 源地址

freeCodeCamp 每日编程挑战解析：用 Python 实现主色占优的随机 Hex 颜色码生成器（Challenge 21: Hex Generator）

openGauss数据库安全架构与认证机制详解

更多资讯

raygui 即时模式 GUI：如何 5 步给 C 游戏装上可拖动的设置面板

多能互补微电网系统优化建模与Simulink实践

在 Windows 上给安卓装 root：WSABuilds 版本怎么选、数据怎么保、出错怎么排查

测试思维跨界应用：用等价类划分与边界值分析玩转股市

Gopeed 贡献指南：分支流程、本地开发、国际化翻译与 Flutter 工程规范

Baklib知识管理平台在IT团队中的实践与价值

今日更新

CopilotKit Vue Demo 与 React Demo 的 Parity 实现指南：路由、运行时端点与交互语义的全框架对齐

Harbor RBAC 实战：db_auth 模式下非管理员用户管理项目成员的完整验证与权限模型解析

STM32平衡车纯平衡程序从拆包到参数整定的完整调试指南

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？