基于微信小程序课外创新实践学分认定系统

项目简介

本项目是一个面向高校课外创新实践学分认定场景的综合管理系统，采用"微信小程序前台 + Vue 后台管理端 + Spring Boot 后端服务 + MySQL 数据库"的整体架构开发。

系统主要解决学生课外创新实践成果申报、证明材料上传、教师或管理员审核、学分认定、公告通知、后台数据统计等业务需求，适合作为计算机相关专业毕业设计项目使用。

项目分为三个端：

• 微信小程序端：面向学生使用，支持注册登录、查看公告、提交学分申请、上传证明材料、查看审核进度。

• 后台管理员端：面向管理员和审核人员使用，支持基础数据管理、申请审核、公告发布、数据可视化统计。

• 后端服务端：提供统一接口服务，负责用户认证、业务处理、数据持久化和文件上传。

核心功能介绍

1. 登录注册

• 管理员后台登录。

• 学生小程序登录。

• 学生小程序注册。

• 登录成功后保存简单 Token，用于后续接口访问。

2. 微信小程序端功能

• 首页展示公告资讯、申请统计、可申报类别和快捷入口。

• 学生可选择实践类别并提交学分申请。

• 申请内容包含项目名称、实践时间、成果等级、申请学分、成果说明。

• 支持选择并上传证明材料。

• 我的申请支持按状态查看申请记录。

• 申请详情展示审核状态、认定学分、审核意见和证明材料。

• 个人中心展示学生账号信息，支持退出登录。

3. 后台管理员端功能

后台管理端共包含 8 个主要模块：

1. 数据概览：统计学生数量、教师数量、申请总量、待审核数量、已认定学分，并展示月度申报趋势、类别分布、审核状态、学院分布等图表。

2. 学生管理：学生信息新增、编辑、删除、查询，支持按姓名、学院、专业筛选。

3. 教师管理：审核教师信息维护，包含工号、姓名、学院、职称、负责类别、联系电话。

4. 类别管理：维护课外创新实践类别和学分规则，例如竞赛获奖、科研项目、论文专利、社会实践、志愿服务、创新创业。

5. 学分申请：查看学生申请列表、筛选申请状态、查看申请详情、编辑申请信息、删除异常记录。

6. 审核认定：对申请进行通过、驳回、退回修改处理，填写审核意见和认定学分。

7. 公告资讯：发布申报通知、政策说明和工作安排。

8. 系统用户：维护管理员、审核员、学生账号，并查看操作日志。

4. 后端服务功能

• 统一接口响应封装。

• 跨域访问配置。

• 本地上传资源映射。

• 登录注册接口。

• 学生、教师、类别、公告、用户等基础 CRUD 接口。

• 学分申请提交、查询、修改、删除接口。

• 审核认定与审核记录接口。

• 数据概览统计接口。

• 文件上传接口。

技术栈介绍

后端技术

• Java 1.8

• Spring Boot 2.7.18

• Maven 3.6.3

• MyBatis-Plus

• MySQL 8.x

• Lombok

• Jackson

后台管理端技术

• Vue 2

• Vue Router

• Vuex

• Element UI

• Axios

• ECharts

• Sass

• Node.js 16

微信小程序端技术

• 原生微信小程序

• WXML

• WXSS

• JavaScript

• wx.request

• wx.uploadFile

数据库

• MySQL

• 字符集：utf8mb4

• 排序规则：utf8mb4_general_ci

项目结构

c271
├─ admin                         后台管理员端 Vue 项目
│  ├─ public                     页面入口
│  ├─ src
│  │  ├─ api                     后台接口封装
│  │  ├─ components              通用组件
│  │  ├─ router                  路由配置
│  │  ├─ store                   登录状态管理
│  │  ├─ utils                   请求工具
│  │  └─ views                   后台页面
│  ├─ package.json               前端依赖配置
│  └─ vue.config.js              Vue 项目配置
│
├─ backend                       Spring Boot 后端项目
│  ├─ pom.xml                    Maven 依赖配置
│  └─ src
│     └─ main
│        ├─ java/com/jay/credit
│        │  ├─ common            通用响应和 Token 工具
│        │  ├─ config            跨域、资源映射、异常处理配置
│        │  ├─ controller        接口控制器
│        │  ├─ dto               请求参数对象
│        │  ├─ entity            数据库实体
│        │  ├─ mapper            MyBatis-Plus 数据访问接口
│        │  ├─ service           业务接口
│        │  ├─ service/impl      业务实现
│        │  └─ vo                返回视图对象
│        └─ resources
│           └─ application.yml   后端配置文件
│
├─ db                            数据库脚本
│  ├─ schema.sql                 建库建表脚本
│  └─ data.sql                   初始化数据脚本
│
├─ miniprogram                   微信小程序端
│  ├─ pages                      小程序页面
│  │  ├─ login                   登录注册
│  │  ├─ home                    首页
│  │  ├─ apply                   学分申报
│  │  ├─ applications            我的申请
│  │  ├─ detail                  申请详情
│  │  └─ profile                 个人中心
│  ├─ utils                      请求工具
│  ├─ app.js                     小程序入口逻辑
│  ├─ app.json                   小程序页面配置
│  └─ app.wxss                   全局样式
│
├─ README.md                     项目说明
└─ requirements.txt              相关库列表

数据库设计

数据库名称：practice_credit

数据库脚本位置：

• db/schema.sql：数据库和表结构初始化脚本。

• db/data.sql：系统初始化数据脚本。

两份 SQL 文件开头均已添加：

SET NAMES utf8mb4;

1. sys_user：系统统一用户表

用于保存管理员、审核员、学生的登录账号信息。

主要字段：

• id：主键。

• username：登录账号。

• password：登录密码。

• role：角色，包含 ADMIN、TEACHER、STUDENT。

• real_name：真实姓名。

• phone：联系电话。

• status：账号状态。

• create_time、update_time：创建和更新时间。

2. student_info：学生扩展信息表

用于保存学生学籍和学分统计信息。

主要字段：

• user_id：关联用户 ID。

• student_no：学号。

• real_name：学生姓名。

• gender：性别。

• college：学院。

• major：专业。

• class_name：班级。

• grade：年级。

• total_credit：已认定总学分。

3. teacher_info：教师审核员扩展信息表

用于保存教师和审核员资料。

主要字段：

• user_id：关联用户 ID。

• teacher_no：工号。

• real_name：教师姓名。

• college：所属学院。

• title_name：职称。

• responsible_category：负责审核类别。

• phone：联系电话。

4. credit_category：创新实践学分类别表

用于维护可申报的课外创新实践类别和学分规则。

主要字段：

• name：类别名称。

• code：类别编码。

• max_credit：最高认定学分。

• rule_desc：认定规则说明。

• status：启用状态。

• sort_order：排序值。

5. credit_application：学分申请表

用于保存学生提交的学分申请主信息。

主要字段：

• student_id：学生用户 ID。

• student_name：学生姓名。

• category_id：类别 ID。

• category_name：类别名称。

• project_name：项目名称。

• project_time：实践时间。

• level_name：级别或等级。

• description：成果说明。

• apply_credit：申请学分。

• approved_credit：最终认定学分。

• status：申请状态，包含 PENDING、APPROVED、REJECTED、RETURNED。

• submit_time：提交时间。

• audit_time：审核时间。

6. application_material：申请证明材料表

用于保存每条申请对应的证明材料信息。

主要字段：

• application_id：申请 ID。

• file_name：原始文件名。

• file_path：文件访问路径。

• file_type：文件类型。

• upload_time：上传时间。

7. audit_record：审核记录表

用于保存申请审核过程中的操作记录。

主要字段：

• application_id：申请 ID。

• auditor_id：审核人 ID。

• auditor_name：审核人姓名。

• action：审核动作，包含 APPROVE、REJECT、RETURN。

• opinion：审核意见。

• credit：认定学分。

• audit_time：审核时间。

8. notice：公告资讯表

用于保存后台发布的通知公告。

主要字段：

• title：公告标题。

• content：公告内容。

• type_name：公告类型。

• status：发布状态。

• publish_time：发布时间。

9. operation_log：后台操作日志表

用于保存后台关键操作记录。

主要字段：

• user_id：操作人 ID。

• username：操作账号。

• module_name：模块名称。

• action_name：操作名称。

• detail：操作详情。

• ip：IP 地址。

• create_time：操作时间。

启动教程

1. 准备环境

需要提前准备以下环境：

• JDK 1.8

• Maven 3.6.3

• MySQL 8.x

• Node.js 16

• 微信开发者工具

2. 初始化数据库

进入 MySQL 后依次执行：

source db/schema.sql;
source db/data.sql;

也可以在命令行中按顺序导入：

mysql -uroot -p < db/schema.sql
mysql -uroot -p practice_credit < db/data.sql

3. 修改后端数据库配置

打开：

backend/src/main/resources/application.yml

根据本机 MySQL 情况修改：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/practice_credit?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true
    username: root
    password: root

4. 启动后端服务

进入后端目录：

cd backend

启动服务：

mvn spring-boot:run

默认后端接口地址：

http://localhost:8088

上传文件默认保存目录：

backend/uploads

5. 启动后台管理端

进入后台管理端目录：

cd admin

安装依赖：

npm install

启动后台：

npm run serve

默认访问地址：

http://localhost:8081

后台默认账号：

账号：admin
密码：123456

6. 启动微信小程序端

使用微信开发者工具打开：

miniprogram

小程序后端地址配置文件：

miniprogram/app.js

默认接口地址：

baseUrl: 'http://localhost:8088'

小程序学生测试账号：

账号：2022010101
密码：123456

也可以在小程序登录页注册新的学生账号。

主要接口说明

登录注册接口

• POST /api/auth/admin/login：管理员登录。

• POST /api/auth/mini/login：小程序学生登录。

• POST /api/auth/mini/register：小程序学生注册。

• POST /api/auth/logout：退出登录。

后台统计接口

• GET /api/admin/dashboard/overview：后台数据概览。

基础数据接口

• GET /api/admin/students：学生列表。

• POST /api/admin/students：新增学生。

• PUT /api/admin/students：修改学生。

• DELETE /api/admin/students/{id}：删除学生。

• GET /api/admin/teachers：教师列表。

• POST /api/admin/teachers：新增教师。

• PUT /api/admin/teachers：修改教师。

• DELETE /api/admin/teachers/{id}：删除教师。

• GET /api/categories：类别列表。

• POST /api/categories：新增类别。

• PUT /api/categories：修改类别。

• DELETE /api/categories/{id}：删除类别。

申请与审核接口

• GET /api/applications：申请列表。

• GET /api/applications/{id}：申请详情。

• POST /api/applications：提交申请。

• PUT /api/applications：修改申请。

• DELETE /api/applications/{id}：删除申请。

• GET /api/admin/audits：审核记录列表。

• POST /api/admin/audits：提交审核结果。

公告与系统接口

• GET /api/notices：公告列表。

• POST /api/notices：新增公告。

• PUT /api/notices：修改公告。

• DELETE /api/notices/{id}：删除公告。

• GET /api/admin/users：用户列表。

• POST /api/admin/users：新增用户。

• PUT /api/admin/users：修改用户。

• DELETE /api/admin/users/{id}：删除用户。

• GET /api/admin/logs：操作日志列表。

• POST /api/upload：上传证明材料。

开发注意事项

• 项目路径可以包含中文，后端文件上传使用 Java 原生路径处理方式。

• 后端配置中上传目录使用相对路径，便于项目移动到其他电脑。

• 数据库脚本已使用 utf8mb4，可正常保存中文内容。

• 后台管理端通过 vue.config.js 代理后端接口。

• 小程序端如需真机调试，需要将 miniprogram/app.js 中的 baseUrl 改为可访问的局域网地址或服务器地址。

• 当前系统不涉及深度学习模型部署。

开发作者

• 作者：Jay

• 定制联系 vx：Jay8059

• 开发日期：2026年