三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

Flask+Vue毕业信息管理系统全栈开发实践

发布时间：2026/8/10 11:40:36 三亩地 编程学习日记
Flask+Vue毕业信息管理系统全栈开发实践

1. 项目概述与核心需求

这个基于Flask框架的毕业信息管理系统，是一个典型的Python全栈开发项目。系统设计了四个角色（通常包括学生、教师、管理员和院系负责人），采用前后端分离架构：后端使用Flask+Django的组合（虽然不太常见但技术上可行），前端使用Vue.js，开发工具选用PyCharm。

这种系统在高校信息化建设中非常普遍，主要解决传统纸质毕业流程中的痛点：

  • 学生：在线提交论文、查询审核状态、下载表格
  • 导师：远程指导、批改电子版论文、进度管理
  • 管理员：流程监控、数据统计、权限分配
  • 院系：材料归档、毕业资格审查、报表生成

技术选型说明：Flask的轻量级特性适合快速开发业务接口，而Django ORM可以弥补Flask在复杂数据操作上的不足。这种组合既保持了灵活性，又避免了重复造轮子。

2. 技术架构设计

2.1 后端技术栈

Flask核心配置：

from flask import Flask from flask_sqlalchemy import SQLAlchemy from flask_migrate import Migrate app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://user:pass@localhost/grad_sys' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False db = SQLAlchemy(app) migrate = Migrate(app, db)

Django ORM整合方案：

  1. 单独配置Django的settings.py文件
  2. 通过django.setup()初始化Django环境
  3. 在Flask中使用时导入Django模型：
from django_app.models import Student

2.2 前端架构

Vue项目结构建议：

src/ ├── api/ # 接口封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 │ ├── RoleBasedNav.vue # 角色导航组件 │ └── UploadDialog.vue # 文件上传组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 └── views/ # 页面视图 ├── admin/ # 管理员模块 ├── student/ # 学生模块 └── teacher/ # 教师模块

2.3 数据库设计

核心表结构示例（使用SQLAlchemy）：

class Student(db.Model): id = db.Column(db.String(20), primary_key=True) # 学号 name = db.Column(db.String(50)) advisor_id = db.Column(db.Integer, db.ForeignKey('teacher.id')) thesis_status = db.Column(db.Integer, default=0) # 0-未提交 1-审核中... class Teacher(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(50)) students = db.relationship('Student', backref='advisor') class Thesis(db.Model): id = db.Column(db.Integer, primary_key=True) student_id = db.Column(db.String(20), db.ForeignKey('student.id')) title = db.Column(db.String(200)) file_path = db.Column(db.String(500)) submit_time = db.Column(db.DateTime)

3. 核心功能实现

3.1 角色权限控制

基于Flask-Login和自定义装饰器实现：

from functools import wraps from flask_login import current_user def role_required(role_name): def decorator(f): @wraps(f) def decorated_function(*args, **kwargs): if not current_user.has_role(role_name): abort(403) return f(*args, **kwargs) return decorated_function return decorator # 使用示例 @app.route('/admin/dashboard') @role_required('admin') def admin_dashboard(): return render_template('admin/dashboard.html')

3.2 文件上传与验证

论文上传接口实现要点：

from werkzeug.utils import secure_filename import magic # 文件类型检测库 ALLOWED_EXTENSIONS = {'pdf', 'doc', 'docx'} MAX_FILE_SIZE = 10 * 1024 * 1024 # 10MB @app.route('/upload/thesis', methods=['POST']) @login_required def upload_thesis(): if 'file' not in request.files: return jsonify({'error': 'No file part'}), 400 file = request.files['file'] if file.filename == '': return jsonify({'error': 'No selected file'}), 400 # 文件类型验证 file_type = magic.from_buffer(file.stream.read(1024), mime=True) file.stream.seek(0) if file_type not in ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']: return jsonify({'error': 'Invalid file type'}), 400 # 文件大小验证 if request.content_length > MAX_FILE_SIZE: return jsonify({'error': 'File too large'}), 400 filename = secure_filename(f"{current_user.id}_{datetime.now().strftime('%Y%m%d')}{os.path.splitext(file.filename)[1]}") save_path = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(save_path) # 更新数据库记录 thesis = Thesis(student_id=current_user.id, title=request.form.get('title'), file_path=save_path, submit_time=datetime.now()) db.session.add(thesis) db.session.commit() return jsonify({'message': 'Upload successful'}), 200

3.3 工作流引擎设计

毕业流程状态机实现：

from transitions import Machine class ThesisWorkflow: states = ['draft', 'submitted', 'advisor_review', 'committee_review', 'approved', 'rejected'] def __init__(self): self.machine = Machine(model=self, states=ThesisWorkflow.states, initial='draft') # 定义状态转换 self.machine.add_transition('submit', 'draft', 'submitted') self.machine.add_transition('assign_advisor', 'submitted', 'advisor_review') self.machine.add_transition('advisor_approve', 'advisor_review', 'committee_review') self.machine.add_transition('committee_approve', 'committee_review', 'approved') self.machine.add_transition('reject', '*', 'rejected')

4. 开发环境配置

4.1 PyCharm专业版配置

  1. 项目结构设置：

    • 将前端Vue项目和后端Flask项目放在同一工作空间
    • 配置Python解释器为虚拟环境（推荐使用pipenv）
    • 启用JavaScript支持并配置Node.js环境

  2. 实用插件推荐：

    • Vue.js：提供Vue语法高亮和代码补全
    • Database Navigator：数据库管理
    • REST Client：API接口测试
    • GitToolBox：增强的Git集成

  3. 运行配置：

    { "name": "Flask Backend", "type": "python", "request": "launch", "module": "flask", "env": { "FLASK_APP": "app.py", "FLASK_ENV": "development" }, "args": ["run", "--port=5000"] }

4.2 前后端联调技巧

  1. 跨域解决方案：

    from flask_cors import CORS CORS(app, resources={r"/api/*": {"origins": "http://localhost:8080"}})

  2. API文档生成： 使用Swagger UI + Flasgger：

    from flasgger import Swagger swagger = Swagger(app) @app.route('/api/thesis/<id>', methods=['GET']) def get_thesis(id): """ Get thesis by ID --- tags: - thesis parameters: - name: id in: path type: string required: true responses: 200: description: Thesis data """ thesis = Thesis.query.get_or_404(id) return jsonify(thesis.to_dict())

5. 部署与优化

5.1 生产环境部署

推荐架构：

Nginx (前端静态文件 + 反向代理) ↑ Gunicorn (Flask应用服务器) ↑ Supervisor (进程管理) ↑ MySQL/PostgreSQL (数据库)

Gunicorn启动配置：

gunicorn -w 4 -b 127.0.0.1:8000 app:app --access-logfile -

5.2 性能优化方案

  1. 数据库查询优化：

    # 不好的写法 students = Student.query.all() for s in students: print(s.advisor.name) # N+1查询问题 # 优化写法 students = Student.query.options(db.joinedload(Student.advisor)).all()

  2. 缓存策略：

    from flask_caching import Cache cache = Cache(config={'CACHE_TYPE': 'RedisCache'}) cache.init_app(app) @app.route('/api/statistics') @cache.cached(timeout=3600) def get_statistics(): # 复杂统计计算 return jsonify(result)

  3. 异步任务处理：

    from celery import Celery celery = Celery('tasks', broker='redis://localhost:6379/0') @celery.task def generate_report(report_id): # 耗时报表生成逻辑 pass # 在视图函数中调用 generate_report.delay(report_id)

6. 常见问题与解决方案

6.1 跨域会话保持

问题现象：Vue前端登录后，后续请求无法保持会话

解决方案：

// axios配置 axios.defaults.withCredentials = true
# Flask配置 app.config['SESSION_COOKIE_SAMESITE'] = 'None' app.config['SESSION_COOKIE_SECURE'] = True

6.2 文件下载中文名乱码

解决方案：

from flask import make_response import urllib.parse @app.route('/download/<filename>') def download_file(filename): safe_name = urllib.parse.quote(filename.encode('utf-8')) response = make_response(send_from_directory(directory, filename)) response.headers['Content-Disposition'] = f"attachment; filename*=UTF-8''{safe_name}" return response

6.3 Vue路由与Flask路由冲突

解决方案：

  1. 配置Nginx将/api前缀的请求转发到Flask
  2. 其他请求返回Vue的index.html
location /api { proxy_pass http://127.0.0.1:5000; } location / { try_files $uri $uri/ /index.html; }

7. 项目扩展方向

  1. 智能审核功能：

    • 使用Python的NLTK库进行论文相似度检测
    • 集成OpenCV实现表格自动识别

  2. 移动端适配：

    • 开发基于Vue的PWA应用
    • 使用Cordova打包成原生APP

  3. 数据分析模块：

    import pandas as pd from sklearn.cluster import KMeans def analyze_graduate_trends(): data = pd.read_sql('SELECT * FROM students', db.engine) # 使用机器学习分析毕业去向 kmeans = KMeans(n_clusters=3).fit(data[['gpa', 'salary']]) return kmeans.labels_

  4. 区块链存证：

    • 使用Python的web3.py库
    • 将论文哈希值上链存证

这个毕业信息管理系统从技术选型到功能实现都体现了现代Web开发的典型模式。我在实际开发中发现，Flask+Vue的组合虽然需要更多配置，但灵活性极高，特别适合需要快速迭代的校园项目。最大的挑战在于角色权限的精细控制和文件管理模块的实现，需要特别注意安全性和并发处理。

编程学习 学习日记 实战经验
← 返回列表