項(xiàng)目背景與意義

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

系統(tǒng)總體設(shè)計(jì)

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

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

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

2. 系統(tǒng)功能模塊設(shè)計(jì)

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

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

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

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

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

• 提供豐富的習(xí)題庫（按難度分類），支持程序設(shè)計(jì)與算法題目。

• 作業(yè)與測驗(yàn)?zāi)K：
• 教師可發(fā)布作業(yè)（含編程題與客觀題）并設(shè)置截止時(shí)間。

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

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

數(shù)據(jù)庫設(shè)計(jì)要點(diǎn)

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

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

前端界面（電腦端）圖文設(shè)計(jì)思路

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

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

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

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

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

與展望

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