系统架构设计
采用前后端分离架构,前端使用 Vue.js 框架构建用户界面,后端基于 Python 的 Flask/Django 框架提供 API 接口,数据库选用 MySQL 或 SQLite 存储学生信息、考研计划等数据。
前端技术实现(Vue.js)
1. 核心功能模块
- 登录注册模块:基于 JWT 实现用户认证,使用 Vue Router 管理路由权限。
- 学生信息管理:通过 Element UI 表格组件展示数据,支持增删改查操作。
- 考研计划跟踪:结合 ECharts 可视化学习进度,设置任务提醒功能。
2. 关键技术点
- 状态管理:Vuex 集中管理用户状态、考研计划数据。
- 组件化开发:复用表单、图表组件,通过 Props 传递数据。
- API 交互:Axios 封装 HTTP 请求,拦截器处理 Token 刷新。
// 示例:Axios 请求封装
import axios from 'axios';
const service = axios.create({
baseURL: 'http://your-api-domain.com',
timeout: 5000
});
service.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token');
return config;
});
后端技术实现(Python)
1. 框架选择
- Flask 轻量级方案:适合快速开发,搭配 Flask-RESTful 构建 REST API。
- Django 全功能方案:内置 ORM 和 Admin,适合复杂业务逻辑。
2. 核心 API 设计
- 用户认证:
/api/login(POST)接收账号密码,返回 JWT。 - 数据操作:
/api/students(GET/POST/PUT/DELETE)管理学生信息。 - 文件处理:支持考研资料上传(Flask-Uploads 扩展)。
# Flask 示例:JWT 认证
from flask_jwt_extended import create_access_token
@app.route('/api/login', methods=[])
():
username = request.json.get()
password = request.json.get()
validate_user(username, password):
access_token = create_access_token(identity=username)
{: access_token},


