一、项目前言

对于计算机专业大二、大三同学来说，课程设计、毕业设计首选学生成绩管理系统，该项目功能贴合教学场景、技术栈主流、代码逻辑清晰，非常适合作为期末课设、本科毕设核心项目。

很多同学在开发过程中，常会遇到前后端跨域报错、数据库表设计混乱、权限功能缺失、页面数据渲染异常、新增修改数据不生效等各类问题，花费大量时间排查仍无法解决。

本篇文章基于SpringBoot2.x + Vue2 + ElementUI + MyBatis-Plus + MySQL主流技术栈，搭建完整前后端分离学生成绩管理系统，包含完整源码、数据库脚本、详细部署教程与报错解决方案，零基础也可顺利跑通项目，完美适配课程设计与毕业设计需求。

二、项目核心介绍

2.1 技术栈明细

• 后端技术：SpringBoot 2.7.x、MyBatis-Plus 3.5.x、MySQL 8.0、Maven、JWT 令牌认证
• 前端技术：Vue2、ElementUI、Axios 网络请求、VueRouter 路由、Vuex 状态管理
• 开发工具：IDEA、VSCode、Navicat、Postman

2.2 核心功能模块

系统采用RBAC 权限管理设计，区分管理员、教师、学生三种角色，权限隔离清晰：

• 管理员端：用户管理、角色权限配置、班级管理、课程管理、成绩总览、数据统计、用户新增 / 删除 / 修改
• 教师端：学生成绩录入、成绩修改、成绩批量导入、本班成绩查询、成绩统计分析
• 学生端：个人成绩查询、课程信息查看、成绩明细浏览、个人信息修改

三、数据库设计

本系统数据库采用 MySQL8.0，共设计 6 张核心数据表，结构规范、符合毕设数据库设计标准，可直接用于论文撰写。

3.1 核心数据表说明

• user 用户表：存储管理员、教师、学生账号密码、角色 ID、状态信息
• role 角色表：定义管理员、教师、学生三种角色权限
• class 班级表：存储班级名称、班级编号、所属专业
• course 课程表：存储课程名称、课程编号、授课教师
• student 学生表：存储学生学号、姓名、班级、联系方式等基础信息
• score 成绩表：核心业务表，关联学生、课程，存储各科成绩、考试时间

3.2 数据库创建 SQL

sql

-- 创建数据库
CREATE DATABASE IF NOT EXISTS student_score_system DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE student_score_system;

-- 用户表
CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `username` varchar(50) NOT NULL COMMENT '账号',
  `password` varchar(100) NOT NULL COMMENT '密码',
  `name` varchar(50) DEFAULT NULL COMMENT '姓名',
  `role_id` int NOT NULL COMMENT '角色ID',
  `status` tinyint DEFAULT 1 COMMENT '状态 1正常 0禁用',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

-- 角色表
CREATE TABLE `role` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '角色ID',
  `role_name` varchar(20) NOT NULL COMMENT '角色名称',
  `role_code` varchar(20) NOT NULL COMMENT '角色标识',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='角色表';

-- 班级表
CREATE TABLE `class` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '班级ID',
  `class_name` varchar(50) NOT NULL COMMENT '班级名称',
  `class_no` varchar(30) NOT NULL COMMENT '班级编号',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='班级表';

-- 课程表
CREATE TABLE `course` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '课程ID',
  `course_name` varchar(50) NOT NULL COMMENT '课程名称',
  `course_no` varchar(30) NOT NULL COMMENT '课程编号',
  `teacher_id` int DEFAULT NULL COMMENT '授课教师ID',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='课程表';

-- 学生表
CREATE TABLE `student` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '学生ID',
  `stu_no` varchar(30) NOT NULL COMMENT '学号',
  `stu_name` varchar(50) NOT NULL COMMENT '学生姓名',
  `class_id` int NOT NULL COMMENT '班级ID',
  `phone` varchar(20) DEFAULT NULL COMMENT '联系方式',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='学生表';

-- 成绩表
CREATE TABLE `score` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '成绩ID',
  `stu_id` int NOT NULL COMMENT '学生ID',
  `course_id` int NOT NULL COMMENT '课程ID',
  `score` decimal(5,1) DEFAULT NULL COMMENT '成绩分数',
  `exam_time` date DEFAULT NULL COMMENT '考试时间',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='成绩表';

-- 初始化角色数据
INSERT INTO role(role_name,role_code) VALUES ('管理员','admin'),('教师','teacher'),('学生','student');

-- 初始化管理员账号 账号:admin 密码:123456
INSERT INTO user(username,password,name,role_id) VALUES ('admin','123456','系统管理员',1);

四、后端核心代码实现

4.1 项目启动类

java

运行

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.score.system.mapper")
public class ScoreSystemApplication {
    public static void main(String[] args) {
        SpringApplication.run(ScoreSystemApplication.class, args);
    }
}

4.2 跨域配置（解决前端跨域报错）

java

运行

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("GET","POST","PUT","DELETE")
                .maxAge(3600);
    }
}

4.3 成绩查询核心接口

java

运行

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;

@RestController
@RequestMapping("/score")
public class ScoreController {

    @Resource
    private ScoreMapper scoreMapper;

    // 分页查询学生成绩
    @GetMapping("/list")
    public Page<Score> getScoreList(@RequestParam(defaultValue = "1") Integer pageNum,
                                     @RequestParam(defaultValue = "10") Integer pageSize,
                                     @RequestParam(required = false) String stuName) {
        Page<Score> page = new Page<>(pageNum, pageSize);
        LambdaQueryWrapper<Score> wrapper = new LambdaQueryWrapper<>();
        // 可根据学生姓名模糊查询
        if(stuName != null && !"".equals(stuName)){
            wrapper.like(Score::getStuName,stuName);
        }
        wrapper.orderByDesc(Score::getCreateTime);
        return scoreMapper.selectPage(page,wrapper);
    }
}

五、前端核心页面实现

5.1 成绩列表页面核心代码

html

预览

<template>
  <div class="score-container">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="searchForm.stuName" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getScoreList">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 成绩表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="stuName" label="学生姓名" align="center"></el-table-column>
      <el-table-column prop="stuNo" label="学号" align="center"></el-table-column>
      <el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
      <el-table-column prop="score" label="考试成绩" align="center"></el-table-column>
      <el-table-column prop="examTime" label="考试时间" align="center"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ScoreList",
  data() {
    return {
      searchForm: {
        stuName: ""
      },
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.getScoreList()
  },
  methods: {
    // 获取成绩列表
    async getScoreList() {
      let res = await this.$axios.get("/score/list", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          stuName: this.searchForm.stuName
        }
      })
      this.tableData = res.data.records
      this.total = res.data.total
    },
    // 分页操作
    handleSizeChange(val) {
      this.pageSize = val
      this.getScoreList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getScoreList()
    }
  }
}
</script>

六、常见报错解决方案（实战踩坑总结）

6.1 前后端跨域问题

报错：Access to fetch at 'xxx' from origin 'xxx' has been blocked by CORS policy 解决方案：使用上文CorsConfig全局跨域配置类，重启后端项目即可彻底解决。

6.2 MyBatis-Plus 查询返回 null

原因：实体类字段名与数据库字段名映射不一致、未开启驼峰命名转换 解决方案：在 application.yml 中配置驼峰转换：

yaml

mybatis-plus:
  configuration:
    map-underscore-to-camel-case: true

6.3 前端页面数据渲染不显示

原因：axios 请求未封装、接口地址错误、跨域未配置 解决方案：统一封装 axios 请求，配置全局 baseURL，匹配后端接口地址。

七、项目部署教程

1. 数据库部署：打开 Navicat，新建 student_score_system 数据库，执行上文 SQL 脚本，初始化数据表与测试数据；
2. 后端部署：导入后端项目至 IDEA，修改 application.yml 中的数据库账号、密码，启动 ScoreSystemApplication 启动类；
3. 前端部署：打开 VSCode，执行 npm install 安装依赖，npm run serve 启动前端项目；
4. 项目访问：浏览器打开本地访问地址，输入管理员账号 admin、密码 123456 即可登录系统。

八、文末资源与技术辅导

本文涉及的完整项目源码、全套数据库脚本、前端页面文件、部署文档、报错解决方案汇总，均可站内私信免费领取。

针对计算机专业同学的课程设计、毕业设计需求，本人提供全流程技术辅导服务：涵盖 Java、Python、前端、大数据各类项目的代码开发、功能调试、BUG 修复、数据库设计、论文提纲梳理、答辩指导。

所有项目均为原创可直接运行，适配高校课设、毕设评分标准，有项目开发、技术答疑需求的同学，可直接站内私信沟通具体需求。