項目背景與意義

在計算機科學與技術(shù)專業(yè)的人才培養(yǎng)體系中，程序設計基礎是奠定學生計算思維與編碼能力的核心課程。傳統(tǒng)的課堂教學模式受限于時間與空間，難以滿足學生個性化、探究式學習的需求。因此，開發(fā)一個集課程學習、實踐練習、互動交流于一體的在線教學平臺，具有重要的現(xiàn)實意義。本畢業(yè)設計旨在運用Java后端技術(shù)與Vue前端框架，構(gòu)建一個功能完備、交互友好的《程序設計基礎》教學網(wǎng)站，以輔助教學，提升學習效率與質(zhì)量。

系統(tǒng)總體設計

1. 技術(shù)架構(gòu)選型

本項目采用前后端分離的流行架構(gòu)模式，以實現(xiàn)高內(nèi)聚、低耦合的開發(fā)目標。

• 后端技術(shù)棧： 以 Java 語言為核心，采用 Spring Boot 框架快速構(gòu)建RESTful API，簡化配置與開發(fā)。數(shù)據(jù)持久層使用 MyBatis-Plus 框架，提高數(shù)據(jù)庫操作效率。數(shù)據(jù)庫選用穩(wěn)定可靠的 MySQL 8.0。
• 前端技術(shù)棧： 采用漸進式JavaScript框架 Vue.js（推薦使用Vue 3組合式API），配合 Vue Router 管理路由，使用 Pinia 或 Vuex進行狀態(tài)管理。UI組件庫選用 Element Plus，以實現(xiàn)快速、美觀的界面構(gòu)建。前端工程化工具為 Vite，保障開發(fā)與構(gòu)建的高效性。
• 其他技術(shù)： 集成 Markdown 編輯器（如Vditor）用于富文本內(nèi)容編輯；考慮使用 Docker 進行容器化部署，提升項目的可移植性與部署便捷性。

2. 系統(tǒng)功能模塊設計

網(wǎng)站主要面向三類用戶：學生、教師和管理員，核心功能模塊設計如下：

• 用戶管理模塊： 實現(xiàn)注冊、登錄（含密碼加密）、個人信息維護、角色權(quán)限區(qū)分。
• 課程內(nèi)容管理模塊：
• 教師端： 可發(fā)布、編輯、刪除教學章節(jié)，每個章節(jié)包含圖文教程（支持代碼高亮）、教學視頻鏈接、配套課件下載。

• 學生端： 按章節(jié)樹狀結(jié)構(gòu)瀏覽學習課程內(nèi)容，記錄學習進度。

• 在線編程與評測模塊（核心亮點）：
• 集成在線代碼編輯器（如 Monaco Editor），支持Java/C/Python等語言的語法高亮與自動補全。

• 學生可在線編寫、運行代碼，系統(tǒng)通過安全沙箱技術(shù)調(diào)用后臺判題機，對代碼進行編譯、執(zhí)行與測試用例比對，即時返回運行結(jié)果或判題反饋。

• 提供豐富的習題庫（按難度分類），支持程序設計與算法題目。

• 作業(yè)與測驗模塊：
• 教師可發(fā)布作業(yè)（含編程題與客觀題）并設置截止時間。

• 學生在線提交作業(yè)（代碼或答案），系統(tǒng)可自動評判編程題，教師手動批改主觀部分并給出評分與評語。

• 論壇交流模塊： 提供分板塊的討論區(qū)，學生與教師可發(fā)帖、回復、點贊，形成學習社區(qū)。
• 數(shù)據(jù)統(tǒng)計與可視化模塊： 為學生提供個人學習報告（如完成章節(jié)數(shù)、習題正確率）；為教師提供班級學情概覽（如作業(yè)提交情況、成績分布）。

數(shù)據(jù)庫設計要點

數(shù)據(jù)庫設計需圍繞核心實體展開，主要數(shù)據(jù)表包括：

• 用戶表（user）： 存儲用戶基本信息及角色。
• 課程章節(jié)表（chapter）： 存儲章節(jié)的樹形結(jié)構(gòu)、標題、內(nèi)容（可關聯(lián)單獨的內(nèi)容詳情表）。
• 題目表（problem）： 存儲編程題與客觀題的描述、輸入輸出樣例、測試用例（可加密存儲）、難度標簽等。
• 提交記錄表（submission）： 記錄用戶每次的代碼提交、所用語言、判題結(jié)果（如通過、錯誤、超時）、運行時間與內(nèi)存消耗。
• 作業(yè)表（assignment）與作業(yè)提交表（assignment_submit）： 管理作業(yè)元數(shù)據(jù)與學生提交記錄。
• 論壇帖子表（post）與回復表（reply）： 管理討論區(qū)內(nèi)容。

前端界面（電腦端）圖文設計思路

1. 整體風格與布局： 采用淺色系為主，配色清晰、專業(yè)。布局上使用頂部導航欄、左側(cè)課程/功能導航菜單、中部主內(nèi)容區(qū)的經(jīng)典結(jié)構(gòu)，確保信息架構(gòu)清晰。
2. 核心頁面設計示例：

• 課程學習頁： 左側(cè)為可折疊的章節(jié)樹，右側(cè)主區(qū)域上方為章節(jié)圖文內(nèi)容（圖文并茂，代碼塊高亮顯示），下方可嵌入視頻播放器或課件預覽區(qū)。

• 在線編程頁： 采用三欄布局。左側(cè)為題目描述區(qū)域（含輸入輸出說明）；中部為代碼編輯區(qū)（提供語言選擇、字體縮放、運行/提交按鈕）；右側(cè)為程序輸出/判題結(jié)果展示區(qū)。界面需突出代碼編輯器的專業(yè)性。

• 個人中心頁： 使用卡片和圖表（如ECharts）展示學習數(shù)據(jù)統(tǒng)計，如進度圓環(huán)圖、正確率趨勢圖，使學習成果一目了然。

1. 交互設計： 注重用戶體驗，提供即時的操作反饋（如按鈕加載狀態(tài)、成功/錯誤提示），頁面切換流暢，支持快捷鍵操作（如在編輯器內(nèi)）。

與展望

本項目《程序設計基礎教學網(wǎng)站》通過結(jié)合Java的穩(wěn)健后端與Vue的靈活前端，旨在打造一個功能實用、技術(shù)棧主流的教學平臺。它不僅能夠作為計算機專業(yè)學生鞏固編程基礎的實踐工具，也為教師提供了全新的數(shù)字化教學管理手段。在完成基礎功能后，未來可進一步拓展移動端適配、智能代碼錯誤提示、學習路徑推薦等智能化功能，使其成為一個更加完善的智慧教學生態(tài)系統(tǒng)。本設計充分體現(xiàn)了將理論知識轉(zhuǎn)化為實際應用的綜合能力，是計算機專業(yè)本科階段一次有價值的工程實踐。