高校查分系统

高校查分系统

功能介绍

高校学生成绩查询与管理系统,采用前后端分离架构,支持管理员、教师、学生三种角色。

管理员:用户管理(学生/教师/管理员)、成绩管理、通告发布与管理、录入时间设置、成绩发布控制、教师延期申请审核。

教师:查看学生、录入与修改本科目成绩、成绩统计图表、Excel 导入与导出、延期录入申请、个人信息维护。

学生:查询个人成绩与图表展示、导出成绩单、查看通告、修改个人信息(密码、电话等)。

公共能力:统一登录、角色路由权限、ECharts 成绩可视化、Excel 导入导出。


运行环境

项目 要求
Node.js 16.0 及以上
MySQL 8.0 及以上
前端包管理 pnpm
后端包管理 yarn

技术栈:Vue 3 + Vite + Element Plus + Vue Router + Axios + ECharts + Express + MySQL


MySQL 配置说明

后端数据库连接配置文件:express/mysql.js

javascript 复制代码
const connection = mysql.createPool({
  host: 'localhost',      // 数据库地址,本地一般为 localhost
  user: 'root',           // MySQL 用户名
  password: '12345678',   // MySQL 密码(按本机实际修改)
  database: 'school',     // 数据库名,需与 school.sql 一致
  multipleStatements: true,
  timezone: 'SYSTEM',
});
配置项 说明
host MySQL 服务地址。本机安装填 localhost 或 127.0.0.1;远程服务器填对应 IP
user 登录用户名,开发环境常用 root
password 对应用户的登录密码,必须改为你本机 MySQL 的真实密码
database 项目使用的库名,默认为 school,一般无需修改

配置步骤:

  1. 确认 MySQL 8.0 已安装并启动(macOS 可在「系统设置」或 mysql.server start 检查)。
  2. 打开 express/mysql.js,将 user、password 改为本机账号密码。
  3. 导入 school.sql(脚本内已包含 CREATE DATABASE school,会自动建库):
bash 复制代码
mysql -u root -p < school.sql

若仅想重新导入数据、库已存在,也可:

bash 复制代码
cd express && yarn seed
  1. 修改配置后需重启后端 (yarn dev),否则仍使用旧连接。

常见问题:

  • ER_ACCESS_DENIED_ERROR:用户名或密码错误,检查 mysql.js 是否与本地 MySQL 一致。
  • ECONNREFUSED:MySQL 未启动,先启动 MySQL 服务。
  • Unknown database 'school':未导入 SQL,执行上述导入命令。

运行步骤

1. 数据库

按上文 [MySQL 配置说明](#MySQL 配置说明) 修改 express/mysql.js 并导入初始数据:

bash 复制代码
mysql -u root -p < school.sql

或:

bash 复制代码
cd express && yarn seed

2. 后端

bash 复制代码
cd express
yarn install
yarn dev

默认端口:6789

3. 前端

bash 复制代码
cd web-admin
pnpm install
pnpm dev

默认访问:http://localhost:5173

4. 登录

导入 school.sql 后可使用库中已有账号登录(默认密码见 SQL 数据)。首次使用请先完成数据库导入。


目录结构

复制代码
student-achievement-admin/
├── web-admin/              # 前端(Vue3 + Vite)
│   ├── public/             # 静态资源
│   ├── src/
│   │   ├── components/     # 公共组件(导航、图表等)
│   │   ├── modules/        # 接口与工具模块
│   │   ├── router/         # 路由与权限
│   │   ├── views/          # 页面
│   │   │   ├── admin/      # 管理员
│   │   │   ├── teacher/    # 教师
│   │   │   └── student/    # 学生
│   │   ├── App.vue
│   │   └── main.js
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── express/                # 后端(Express)
│   ├── route/              # 通用路由(登录、用户、成绩等)
│   ├── student/            # 学生接口
│   ├── teacher/            # 教师接口(导入、统计等)
│   ├── excel/              # Excel 临时目录
│   ├── index.js            # 服务入口
│   ├── mysql.js            # 数据库配置
│   ├── seed.js             # 数据导入脚本
│   └── package.json
├── school.sql              # 数据库脚本
└── 项目说明.md
相关推荐
北城笑笑2 天前
Vue 109 ,从零搭建 Vue3 + Electron 工程:生态、安全桥接与打包选型( Vue + Electron )
前端·javascript·vue.js·安全·electron·vue
上海懒图科技4 天前
工厂厂区电子地图定位导航:厂区人车精准定位,安全合规双保障
前端·arcgis·vue
卋罖7507 天前
Razor 视图 + JavaScript + Vue/iView 组件实现的表格自定义列
javascript·vue·iview·razor视图
无所谓^_^10 天前
个人健康管理系统 | Springboot3 | Vue3
java·vue·毕业设计·springboot·课程设计·毕设·前后端分离
在努力的前端小白11 天前
基于FastAPI+LangChain+LangGraph+Agent+多模态的AI Agent 有渔渔具网站
人工智能·langchain·vue·fastapi
sun_weitao11 天前
用 FastAPI + MQTT 做一个 ESP32最小化跑通示例
中间件·vue·fastapi
汤米粥15 天前
2026年主流前端技术框架
vue·react·elementplus·tailwind css·angular‌·svelte‌·bootstrap‌
codigger15 天前
Vue nextTick 到底在等什么?一篇讲透原理与那些年踩过的坑
程序员·vue·编程·异步更新·#人工智能
咚咚咚小柒16 天前
【前端】LangChain.js学习
前端·javascript·人工智能·typescript·langchain·vue·ai编程