项目背景与意义

在计算机科学与技术专业的人才培养体系中，程序设计基础是奠定学生计算思维与编码能力的核心课程。传统的课堂教学模式受限于时间与空间，难以满足学生个性化、探究式学习的需求。因此，开发一个集课程学习、实践练习、互动交流于一体的在线教学平台，具有重要的现实意义。本毕业设计旨在运用Java后端技术与Vue前端框架，构建一个功能完备、交互友好的《程序设计基础》教学网站，以辅助教学，提升学习效率与质量。

系统总体设计

1. 技术架构选型

本项目采用前后端分离的流行架构模式，以实现高内聚、低耦合的开发目标。

• 后端技术栈： 以 Java 语言为核心，采用 Spring Boot 框架快速构建RESTful API，简化配置与开发。数据持久层使用 MyBatis-Plus 框架，提高数据库操作效率。数据库选用稳定可靠的 MySQL 8.0。
• 前端技术栈： 采用渐进式JavaScript框架 Vue.js（推荐使用Vue 3组合式API），配合 Vue Router 管理路由，使用 Pinia 或 Vuex进行状态管理。UI组件库选用 Element Plus，以实现快速、美观的界面构建。前端工程化工具为 Vite，保障开发与构建的高效性。
• 其他技术： 集成 Markdown 编辑器（如Vditor）用于富文本内容编辑；考虑使用 Docker 进行容器化部署，提升项目的可移植性与部署便捷性。

2. 系统功能模块设计

网站主要面向三类用户：学生、教师和管理员，核心功能模块设计如下：

• 用户管理模块： 实现注册、登录（含密码加密）、个人信息维护、角色权限区分。
• 课程内容管理模块：
• 教师端： 可发布、编辑、删除教学章节，每个章节包含图文教程（支持代码高亮）、教学视频链接、配套课件下载。

• 学生端： 按章节树状结构浏览学习课程内容，记录学习进度。

• 在线编程与评测模块（核心亮点）：
• 集成在线代码编辑器（如 Monaco Editor），支持Java/C/Python等语言的语法高亮与自动补全。

• 学生可在线编写、运行代码，系统通过安全沙箱技术调用后台判题机，对代码进行编译、执行与测试用例比对，即时返回运行结果或判题反馈。

• 提供丰富的习题库（按难度分类），支持程序设计与算法题目。

• 作业与测验模块：
• 教师可发布作业（含编程题与客观题）并设置截止时间。

• 学生在线提交作业（代码或答案），系统可自动评判编程题，教师手动批改主观部分并给出评分与评语。

• 论坛交流模块： 提供分板块的讨论区，学生与教师可发帖、回复、点赞，形成学习社区。
• 数据统计与可视化模块： 为学生提供个人学习报告（如完成章节数、习题正确率）；为教师提供班级学情概览（如作业提交情况、成绩分布）。

数据库设计要点

数据库设计需围绕核心实体展开，主要数据表包括：

• 用户表（user）： 存储用户基本信息及角色。
• 课程章节表（chapter）： 存储章节的树形结构、标题、内容（可关联单独的内容详情表）。
• 题目表（problem）： 存储编程题与客观题的描述、输入输出样例、测试用例（可加密存储）、难度标签等。
• 提交记录表（submission）： 记录用户每次的代码提交、所用语言、判题结果（如通过、错误、超时）、运行时间与内存消耗。
• 作业表（assignment）与作业提交表（assignment_submit）： 管理作业元数据与学生提交记录。
• 论坛帖子表（post）与回复表（reply）： 管理讨论区内容。

前端界面（电脑端）图文设计思路

1. 整体风格与布局： 采用浅色系为主，配色清晰、专业。布局上使用顶部导航栏、左侧课程/功能导航菜单、中部主内容区的经典结构，确保信息架构清晰。
2. 核心页面设计示例：

• 课程学习页： 左侧为可折叠的章节树，右侧主区域上方为章节图文内容（图文并茂，代码块高亮显示），下方可嵌入视频播放器或课件预览区。

• 在线编程页： 采用三栏布局。左侧为题目描述区域（含输入输出说明）；中部为代码编辑区（提供语言选择、字体缩放、运行/提交按钮）；右侧为程序输出/判题结果展示区。界面需突出代码编辑器的专业性。

• 个人中心页： 使用卡片和图表（如ECharts）展示学习数据统计，如进度圆环图、正确率趋势图，使学习成果一目了然。

1. 交互设计： 注重用户体验，提供即时的操作反馈（如按钮加载状态、成功/错误提示），页面切换流畅，支持快捷键操作（如在编辑器内）。

与展望

本项目《程序设计基础教学网站》通过结合Java的稳健后端与Vue的灵活前端，旨在打造一个功能实用、技术栈主流的教学平台。它不仅能够作为计算机专业学生巩固编程基础的实践工具，也为教师提供了全新的数字化教学管理手段。在完成基础功能后，未来可进一步拓展移动端适配、智能代码错误提示、学习路径推荐等智能化功能，使其成为一个更加完善的智慧教学生态系统。本设计充分体现了将理论知识转化为实际应用的综合能力，是计算机专业本科阶段一次有价值的工程实践。