(开源)高校素拓分管理系统小程序实战指南基于 Java + SpringBoot + uni-app + Vue + MySQL

基于 Java + SpringBoot + uni-app + Vue + MySQL 的高校素拓分管理系统实战指南

[基于 Java + SpringBoot + uni-app + Vue + MySQL 的高校素拓分管理系统实战指南](#基于 Java + SpringBoot + uni-app + Vue + MySQL 的高校素拓分管理系统实战指南)
- [🌟 项目简介](#🌟 项目简介)
- - 技术栈说明
  - [🧩 核心功能模块](#🧩 核心功能模块)
  - [🖼️ 系统界面预览](#🖼️ 系统界面预览)
- [⚙️ 运行环境与工具要求](#⚙️ 运行环境与工具要求)
- - [✅ 推荐配置](#✅ 推荐配置)
  - [🛠️ 开发工具推荐](#🛠️ 开发工具推荐)
- [📁 项目目录结构](#📁 项目目录结构)
- [🚀 快速部署指南](#🚀 快速部署指南)
- - [1️⃣ 导入数据库](#1️⃣ 导入数据库)
  - [2️⃣ 启动后端服务](#2️⃣ 启动后端服务)
  - [3️⃣ 启动前端页面](#3️⃣ 启动前端页面)
  - [4️⃣ 启动用户端前端 (UniappUser)](#4️⃣ 启动用户端前端 (UniappUser))
- [⚡ 加速技巧 & 常见问题解答](#⚡ 加速技巧 & 常见问题解答)
- - [🔄 国内镜像加速配置](#🔄 国内镜像加速配置)
  - - [NPM 镜像（永久生效）](#NPM 镜像（永久生效）)
    - [Maven 镜像（修改 `~/.m2/settings.xml`）](#Maven 镜像（修改 ~/.m2/settings.xml）)
  - [🚫 端口冲突解决方案](#🚫 端口冲突解决方案)
- [🔧 踩坑复盘：我部署时遇到的真实问题](#🔧 踩坑复盘：我部署时遇到的真实问题)
- - [坑1：启动后端时报 `Access denied for user 'root'@'localhost'`](#坑1：启动后端时报 Access denied for user 'root'@'localhost')
  - [坑2：npm install 报 `npm ERR! code ERESOLVE`](#坑2：npm install 报 npm ERR! code ERESOLVE)
  - 坑3：前端启动后页面白屏
  - [坑4：HBuilder X 编译 uni-app 报 `Module not found`](#坑4：HBuilder X 编译 uni-app 报 Module not found)
  - [坑5：小程序预览时提示 `Invalid AppID`](#坑5：小程序预览时提示 Invalid AppID)
- [🎯 实战案例：完整的业务流程演示](#🎯 实战案例：完整的业务流程演示)
- [📦 项目源码地址](#📦 项目源码地址)
- [⚖️ 法律声明](#⚖️ 法律声明)
- [📋 适用场景与边界说明](#📋 适用场景与边界说明)
- - [✅ 适用场景](#✅ 适用场景)
  - [⚠️ 边界说明](#⚠️ 边界说明)
  - [🔄 版本兼容性](#🔄 版本兼容性)

🌟 项目简介

为什么需要这个系统？ 高校素拓分管理涉及学生综合素质评价，传统手工统计存在以下痛点：

数据分散在 Excel 表格中，汇总统计耗时耗力

多人协作时数据版本混乱，容易重复录入

缺乏权限控制，任何人都能修改数据

本项目基于 Java + SpringBoot + uni-app + Vue + MySQL 构建，解决了这些问题，适合毕业设计、课程设计或企业级开发学习参考。

技术栈说明

技术	说明	版本要求
Java	后端核心语言	JDK 1.8+
SpringBoot	后端框架	2.x+
uni-app	跨平台前端框架	HBuilder X
Vue	前端框架	2.x/3.x
MySQL	数据库	8.0+

🧩 核心功能模块

用户登录 / 注册
个人中心
教师管理
学生管理
活动类型
校园资讯
留言板
轮播图管理
其它...

🖼️ 系统界面预览

⚙️ 运行环境与工具要求

为什么强调版本？ Java 生态中，不同大版本之间存在不兼容变更。例如 MySQL 8.0 默认身份验证插件与 5.7 不同，直接用 5.7 的连接方式会报错。使用经过验证的版本组合可以避免这类问题。

✅ 推荐配置

工具	版本	说明
Java	`JDK 1.8`	长期支持版本，兼容性最佳
MySQL	`8.0.41`	本文测试版本，建议使用 8.0 系列
Node.js	`16.20.2`	前端构建依赖
Maven	`3.6+`	后端依赖管理

⚠️ 版本兼容性说明

已验证：上述版本组合可稳定运行

未验证：更高版本（如 JDK 17、MySQL 8.4）可能存在兼容问题

建议：首次部署请严格按照推荐版本配置

🛠️ 开发工具推荐

后端: IntelliJ IDEA 2022+（推荐社区版，免费）
前端: VS Code、HBuilder X
数据库: Navicat / DBeaver / MySQL Workbench

📁 项目目录结构

解压后，核心目录结构如下：

复制代码

📁 System/
├── JavaSpringBoot/       ← 后端源码（建议使用 IDEA 打开）
├── VueAdmin/             ← 管理员前端（建议使用 VS Code 打开）
├── UniappUser/           ← 用户端前端（需要使用 HBuilder X 打开）
└── MysqlDatabase/
    └── *.sql             ← 数据库脚本（建议使用 Navicat 导入）

📌 路径规范提醒

✅ 正确示例 ：D:\projects\my_app

❌ 错误示例 ：D:\我的项目\app（中文路径会导致编码问题）

❌ 错误示例 ：D:\Program Files\my_app（空格可能导致路径解析错误）

🚀 快速部署指南

1️⃣ 导入数据库

为什么先导入数据库？ 后端启动时需要连接数据库，如果数据库不存在或表结构不完整，启动会直接报错。所以必须先完成数据库初始化。

操作步骤：

创建新数据库（例如 exam_db），字符集设置为 utf8mb4。

为什么用 utf8mb4 而不是 utf8？ MySQL 的 utf8 最大只支持 3 字节字符，无法存储 emoji 等 4 字节字符。utf8mb4 是真正的 UTF-8 编码，推荐统一使用。

执行 MysqlDatabase/*.sql 脚本完成数据初始化。

验证方法：

打开数据库客户端，确认数据库已创建
检查表结构是否完整（应包含用户表、学生表、教师表、活动表等）

常见问题：

问题	原因	解决方案
字符集错误	使用了 utf8 而非 utf8mb4	删除数据库，重新创建并指定 utf8mb4
表已存在	重复导入	先执行 `DROP DATABASE exam_db;` 再重新创建

2️⃣ 启动后端服务

为什么用 SpringBoot？ SpringBoot 内嵌了 Tomcat 服务器，不需要单独安装配置 Tomcat，直接运行 main 方法就能启动。同时它自动管理 Maven 依赖，简化了配置。

操作步骤：

使用 IntelliJ IDEA 打开 JavaSpringBoot 目录。
等待 Maven 自动下载依赖项（首次加载时间较长，约 5-15 分钟）。

为什么首次加载慢？ Maven 需要从中央仓库下载所有依赖包到本地。配置阿里云镜像可以加速，见下文。

修改 application.yml 文件中的数据库连接参数（账号、密码、库名）。
运行主启动类，控制台显示 "Tomcat started on port(s): 8080" 即表示成功。

验证方法：

浏览器访问 http://localhost:8080，应返回 JSON 格式的响应
查看控制台日志，确认无异常抛出

常见问题：

问题	原因	解决方案
端口被占用	其他程序占用了 8080 端口	修改 `application.yml` 中的 `server.port`
依赖下载失败	Maven 配置问题	配置阿里云镜像（见下文加速技巧）
数据库连接失败	配置错误或数据库未启动	检查 `application.yml` 中的数据库连接参数

3️⃣ 启动前端页面

为什么需要 Node.js？ Vue 项目基于 npm 生态管理依赖，npm 是 Node.js 的包管理器。同时开发服务器（webpack-dev-server）也依赖 Node.js 运行。

操作步骤：

进入 VueAdmin 依次执行以下命令：

bash 复制代码

npm install     # 安装依赖（仅首次运行需要）
npm run serve   # 启动本地服务器

验证方法：

启动完成后，访问输出地址（如 http://localhost:8081）即可查看效果
确认页面能正常加载，无控制台报错

常见问题：

问题	原因	解决方案
npm install 失败	网络问题或依赖版本冲突	使用国内镜像（见下文加速技巧）
页面白屏	接口地址配置错误	检查 `vue.config.js` 中的 `devServer.proxy`

4️⃣ 启动用户端前端 (UniappUser)

为什么用 uni-app？ uni-app 可以一套代码编译到多个平台（浏览器、微信小程序、App），减少重复开发。本项目的用户端同时支持小程序和 H5 访问。

操作步骤：

进入 UniappUser 目录，执行以下步骤：

bash 复制代码

npm install     # 安装依赖（仅首次运行需要）

使用 HBuilder X 打开 UniappUser 目录
在 HBuilder X 中点击左上角的 "运行" 按钮
选择 "运行到浏览器" 、"运行到小程序模拟器" 或 "运行到手机/模拟器" 任意平台

⚡ 提示：首次运行时，IDE 会自动下载并安装所需的编译器及插件，请耐心等待完成即可。

验证方法：

确认编译成功，无报错信息
在目标平台（浏览器/小程序模拟器）中能正常访问

常见问题：

问题	原因	解决方案
编译失败	Node.js 版本不兼容	使用 Node.js 16.x 版本
小程序无法预览	未配置 AppID	在 HBuilder X 中配置小程序 AppID

⚡ 加速技巧 & 常见问题解答

🔄 国内镜像加速配置

为什么要配置镜像？ npm 和 Maven 默认从国外服务器下载依赖，国内访问速度慢且不稳定。配置国内镜像可以显著提升下载速度。

NPM 镜像（永久生效）

bash 复制代码

npm config set registry https://registry.npmmirror.com

验证方法：

bash 复制代码

npm config get registry
# 应输出：https://registry.npmmirror.com

Maven 镜像（修改 `~/.m2/settings.xml`）

xml 复制代码

<mirror>
  <id>aliyun</id>
  <mirrorOf>*</mirrorOf>
  <name>阿里云仓库</name>
  <url>https://maven.aliyun.com/repository/public</url>
</mirror>

🚫 端口冲突解决方案

若遇到端口被占用的情况，请尝试：

方案一：修改后端端口

yaml 复制代码

# application.yml
server:
  port: 8081  # 改为其他未被占用的端口

方案二：修改前端端口

javascript 复制代码

// vue.config.js
module.exports = {
  devServer: {
    port: 8082  # 改为其他未被占用的端口
  }
}

验证方法：

重启服务后，访问新端口地址
确认页面能正常加载

🔧 踩坑复盘：我部署时遇到的真实问题

以下是我（或常见用户）在实际部署过程中遇到的问题，按现象→定位→原因→解决方案的结构整理。

坑1：启动后端时报 `Access denied for user 'root'@'localhost'`

现象：控制台报错，无法连接数据库。

定位：检查 application.yml 中的数据库配置。

原因：MySQL 8.0 默认使用 caching_sha2_password 身份验证插件，而旧版 Navicat 或 JDBC 驱动可能不支持。

解决方案：

sql 复制代码

-- 方法一：修改用户密码验证方式
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your_password';
FLUSH PRIVILEGES;

坑2：npm install 报 `npm ERR! code ERESOLVE`

现象：执行 npm install 时提示依赖版本冲突。

定位：查看报错信息中的依赖树。

原因：某些依赖包版本之间存在不兼容。

解决方案：

bash 复制代码

# 强制解析依赖冲突
npm install --legacy-peer-deps

坑3：前端启动后页面白屏

现象：浏览器访问 http://localhost:8081 显示空白页面，控制台有接口 404 错误。

定位：打开浏览器开发者工具 → Network 面板，查看请求地址。

原因：前端请求地址指向后端 8080 端口，但后端未启动或地址配置错误。

解决方案：

确认后端已启动并正常运行
检查 vue.config.js 中的 devServer.proxy 配置
确认后端接口地址正确

坑4：HBuilder X 编译 uni-app 报 `Module not found`

现象：编译时报找不到某个模块。

定位：查看报错信息中的模块路径。

原因：node_modules 目录不完整或损坏。

解决方案：

bash 复制代码

# 删除 node_modules 重新安装
rm -rf node_modules
npm install

坑5：小程序预览时提示 `Invalid AppID`

现象：微信小程序开发者工具提示 AppID 无效。

定位：检查项目配置文件。

原因：未配置小程序 AppID 或 AppID 错误。

解决方案 ：在 HBuilder X 中打开 manifest.json，填入正确的微信小程序 AppID。

🎯 实战案例：完整的业务流程演示

以下是系统的一个完整业务流程，展示从学生提交活动到素拓分更新的全过程。

案例场景

学生参加"校园志愿者活动"，提交活动证明，教师审核通过后，素拓分自动增加。

步骤1：学生提交活动申请

操作：学生登录系统 → 进入"活动申请"页面 → 填写活动信息 → 提交

输入数据：

json 复制代码

{
  "studentId": "2024001",
  "activityName": "校园志愿者活动",
  "activityDate": "2026-06-15",
  "description": "参加校园环保志愿活动，服务时长4小时",
  "proofImage": "上传的证明图片"
}

预期结果：提交成功，状态显示"待审核"。

步骤2：教师审核通过

操作：教师登录系统 → 进入"审核管理" → 查看待审核列表 → 点击"通过"

审核操作：

json 复制代码

{
  "applicationId": 1001,
  "reviewerId": "T001",
  "status": "approved",
  "score": 5,
  "comment": "活动真实有效，审核通过"
}

预期结果：状态变更为"已通过"，学生素拓分 +5。

步骤3：验证素拓分更新

操作：学生登录系统 → 进入"个人中心" → 查看素拓分记录

预期结果：

复制代码

姓名：张三
学号：2024001
当前素拓分：85分（原80分 + 5分）

步骤4：数据库验证

sql 复制代码

-- 查看学生素拓分
SELECT student_name, total_score FROM students WHERE student_id = '2024001';

-- 查看素拓分变动记录
SELECT * FROM score_logs WHERE student_id = '2024001' ORDER BY create_time DESC LIMIT 5;

预期输出：

复制代码

+--------------+-------------+
| student_name | total_score |
+--------------+-------------+
| 张三         |          85 |
+--------------+-------------+

+----+------------+--------+--------+---------------------+
| id | student_id | type   | score  | create_time         |
+----+------------+--------+--------+---------------------+
|  1 | 2024001    | 增加   |      5 | 2026-06-15 14:30:00 |
+----+------------+--------+--------+---------------------+

这个案例体现了系统的完整闭环：申请 → 审核 → 更新 → 记录，每一步都有数据流转和状态变更。

📦 项目源码地址

平台	链接	说明
GitHub	https://github.com/Snapegit/MobileStudentQualityScoreManagementSystem	完整源码，建议 Fork
网盘	https://pan.xunlei.com/s/VOuuEYmUwQSdo__bGqGt0xEiA1?pwd=pvgv#	备用下载地址

💡 使用建议

推荐：优先从 GitHub 下载，可获取最新版本

注意：网盘版本可能不是最新，建议仅作为备用

欢迎：Star ⭐ 支持项目，如有问题请提交 Issue 或 Pull Request

⚖️ 法律声明

本项目基于开源项目进行二次开发，仅供 个人学习与技术交流 使用。

版权说明
- 原项目版权归其作者所有
- 本项目仅对原项目进行了功能扩展和界面优化
- 未改变原项目的授权协议
使用限制
- ❌ 禁止用于商业用途
- ❌ 禁止转售或冒充原创作品
- ❌ 禁止用于任何违反法律法规的用途
- ✅ 可用于个人学习、课程设计、毕业设计
- ✅ 可用于技术交流和经验分享
商业使用
- 如需商业使用，请联系原作者获得授权
- 本项目作者不承担任何商业使用产生的法律责任

📋 适用场景与边界说明

✅ 适用场景

高校素拓分管理系统开发学习
Java + SpringBoot + uni-app + Vue + MySQL 技术栈学习
毕业设计、课程设计参考
企业级开发学习参考

⚠️ 边界说明

技术栈限制：本文示例基于上述技术栈，不适用于其他技术组合
功能限制：仅展示核心功能模块，扩展功能需自行开发
环境限制：已在推荐环境下测试，其他环境可能存在兼容问题

🔄 版本兼容性

Java：适用于 JDK 1.8+，更高版本未验证
SpringBoot：适用于 2.x 版本，3.x 版本未验证
MySQL：适用于 8.0+ 版本，5.x 版本未验证
Node.js：适用于 16.x 版本，更高版本可能需要调整

💡 温馨提示：如果在部署过程中遇到问题，欢迎在评论区留言讨论，我会尽快回复！喜欢本项目请点赞 👍 收藏 ⭐ 支持一下！

(开源)高校素拓分管理系统小程序实战指南 基于 Java + SpringBoot + uni-app + Vue + MySQL

基于 Java + SpringBoot + uni-app + Vue + MySQL 的高校素拓分管理系统实战指南

目录

🌟 项目简介

技术栈说明

🧩 核心功能模块

🖼️ 系统界面预览

⚙️ 运行环境与工具要求

✅ 推荐配置

🛠️ 开发工具推荐

📁 项目目录结构

🚀 快速部署指南

1️⃣ 导入数据库

2️⃣ 启动后端服务

3️⃣ 启动前端页面

4️⃣ 启动用户端前端 (UniappUser)

⚡ 加速技巧 & 常见问题解答

🔄 国内镜像加速配置

NPM 镜像（永久生效）

Maven 镜像（修改 ~/.m2/settings.xml）

🚫 端口冲突解决方案

🔧 踩坑复盘：我部署时遇到的真实问题

坑1：启动后端时报 Access denied for user 'root'@'localhost'

坑2：npm install 报 npm ERR! code ERESOLVE

坑3：前端启动后页面白屏

坑4：HBuilder X 编译 uni-app 报 Module not found

坑5：小程序预览时提示 Invalid AppID

🎯 实战案例：完整的业务流程演示

案例场景

步骤1：学生提交活动申请

步骤2：教师审核通过

步骤3：验证素拓分更新

步骤4：数据库验证

📦 项目源码地址

⚖️ 法律声明

📋 适用场景与边界说明

✅ 适用场景

⚠️ 边界说明

🔄 版本兼容性

(开源)高校素拓分管理系统小程序实战指南基于 Java + SpringBoot + uni-app + Vue + MySQL

Maven 镜像（修改 `~/.m2/settings.xml`）

坑1：启动后端时报 `Access denied for user 'root'@'localhost'`

坑2：npm install 报 `npm ERR! code ERESOLVE`

坑4：HBuilder X 编译 uni-app 报 `Module not found`

坑5：小程序预览时提示 `Invalid AppID`