一種實現C語言程序的在線編譯系統設計

關鍵詞：C語言編譯處理；系統設計；MVC；UI組件庫調用

中圖分類號：TP391.9 文獻標識碼：A

文章編號：1009-3044（2024）25-0051-04

1 概述

首先，在線編譯器提供了便捷的開發環境，開發者無須從本地下載軟件，而是可以通過簡單的瀏覽器訪問，這降低了初學者學習和參與編程的門檻。其次，在線編譯環境加速了編程學習和教育過程。對于編程學習者來說，在線編譯器提供了一個可視化、實時的編程學習環境，他們可以直接在瀏覽器中編寫代碼，并立即看到結果。這種實時反饋的特性有助于加速學習進程，幫助他們更好地理解和掌握編程概念和技能[1]。最后，在線編譯器實現了跨平臺和跨設備的開發。由于不受本地操作系統或硬件的限制，用戶可以在任何設備上通過瀏覽器訪問在線編譯器。這種跨平臺和跨設備的特性為開發者提供了更大的靈活性和便利性，使他們能夠在不同設備上進行開發和代碼編輯。

2 功能性需求分析

1） 在線代碼編譯界面：設計了代碼編輯框供用戶編輯代碼，并提供代碼高亮功能。此外，提供了切換代碼編輯主題的選項，以便用戶在不同的界面下編輯代碼。用戶可以在系統中登錄后查看和編輯代碼、運行代碼，并將編輯的代碼導出為 .c 文件保存在本地電腦。同時，用戶可以將本地的 .c 文件中的代碼導入輸入框中進行編輯。

2） 系統登錄：支持郵箱驗證碼登錄和賬號密碼登錄。用戶輸入郵箱后，會收到驗證碼；也可以使用賬號和密碼進行驗證登錄。

3） 注冊：用戶需要輸入符合系統要求的賬號和密碼。在輸入密碼時，系統會要求再次確認密碼。

4） 題目大廳：題目以列表形式顯示在界面上，用戶可以從題目列表中選擇并進行編輯。

5） 個人中心：展示用戶的基本信息，包括用戶名、年齡、用戶編號、性別、出生日期和郵箱。

6） 題目發布：用戶可以在此模塊進行題目的增加、刪除、修改和查詢。該模塊提供了富文本編輯框，允許用戶發布題目時使用多種樣式。

7） 日志記錄：記錄用戶的登錄和退出記錄，包括登錄地址、操作等信息。

8） 代碼保存：用戶可以在此模塊對代碼進行增加、刪除、修改和查詢的操作。

9） 意見反饋：用戶可以對系統進行評價和反饋，反饋信息包括內容和評分等。

該系統的用例圖主要介紹了系統的功能模塊，例如編譯、保存、下載、切換界面主題、注冊、登錄、題目集合的瀏覽和編輯、個人題目的發布、個人信息的完善、代碼保存的增刪改查操作以及個人的日志記錄等。用戶用例圖如圖1所示。

3 系統設計

C語言在線編譯器系統屬于前后端分離的，因此分為前端模塊和后端模塊。前端模塊包括注冊、登錄、題目集、代碼編譯、題目編寫、賬戶安全、意見反饋、日志記錄等功能；后端模塊則包含系統前端的處理邏輯（后端邏輯）、MySQL數據庫用于數據持久化、Redis 應用以及代碼編譯處理。系統結構圖如圖2所示。

3.1 代碼編輯模塊

該系統在前端模塊中設計了許多小功能供用戶體驗。例如：保存代碼（此代碼保存系統的后臺，用戶登錄之后可以查看和編輯）、切換編輯框主題（用戶根據自己喜好選中主題）、復制代碼、代碼編輯框、導入代碼、下載代碼。這些功能為了更好地輔助用戶在本系統擁有良好的編程體驗。用戶可在該模塊輸入C語言代碼進行運行和編輯。代碼編輯模塊的用例圖如圖3所示。

3.2 題目編寫模塊

用戶進入題目編寫模塊頁面時，該頁面將會顯示作者發布的題目和內容等，用戶先瀏覽題目，其次用戶根據題目的要求進行編寫代碼，最后點擊運行，最后顯示運行的結果將以彈窗的形式顯示。系統題目編寫模塊的活動圖如圖4所示。

3.3 題目發布模塊

當用戶點擊“題目發布”時，用戶輸入發布題目的標題、內容、題目難度，題目內容在該系統的富文本編輯器里面，富文本編輯器提供許多樣式供用戶挑選，用戶挑選樣式后，系統會彈出發布題目的彈窗，用戶輸入信息后，點擊“發布”按鈕，用戶發布題目的信息就會顯示在該頁面列表上，同時在發布題目內容時，該系統提供了富文本編輯框。用戶可以在該編輯框選擇喜歡的樣式進行題目的編輯，該富文本編輯框融合Word的一些功能例如字體大小、字體顏色、下劃線等功能。用戶還可以在該頁面輸入關鍵詞進行題目搜索。用戶在刪除題目時，系統會提示該題目是否刪除，用戶點擊確認刪除，該題目將會從系統的列表中被移除，當用戶點擊取消按鈕時，此題目還會保留在該系統中。用戶點擊題目編輯時，用戶在更改題目的所有內容會顯示在修改彈窗上，用戶根據想要的需求信息選擇修改的題目信息，最后點擊“修改”按鈕，即題目完成更新，列表將會進行再次更新。系統題目發布模塊的活動圖如圖5所示。

3.4 系統后端（SpringBoot） 模塊

本系統后端分為 controller、service、dao、entity 模塊，分別負責數據封裝和邏輯處理。首先，前端發送指令至后端的 controller 層，此時接口層與業務邏輯層產生交互。業務邏輯層（service） 處理接口層（con?troller） 的請求，將業務邏輯處理后與數據庫層（dao） 進行數據交互。service 層將處理后的數據傳遞給 dao 層，dao層根據請求從數據庫獲取數據，并將結果返回給 dao 層、service 層和 controller 層。最后，接口層返回響應的狀態碼和請求的數據至前端[2]。系統后端（SpringBoot） 模塊的時序圖如圖6所示。

在SpringBoot 框架中嵌套了SpringMVC，實現了業務的層級處理。它運用于圖片上傳到服務器的配置、JWT的配置，路徑的攔截和放權、Redis的配置，以及防止數據被序列化。Controller層（接口控制層），搭建了本系統前端與后端的連接橋梁，包含登錄接口、注冊接口等；Entity層（實體層），其是與數據庫一一對應的關鍵實體字段；Enums層（枚舉層），列舉了該系統的全局異常狀況；Exception層（異常處理層），解決該系統的異常，避免出現500的頁面狀況；Interceptor 層（攔截層）攔截請求，避免每個接口都設置token的判斷，減少了代碼的冗余；Repository層（數據庫層）直接連接數據庫，實現數據的增刪改查操作；Service層（Service接口和Service實現）處理本系統的業務邏輯（數據加工）；Utils層（工具層）包含雪花算法工具類、Redis工具類、token邏輯類、驗證碼生成工具類、密碼加密類，為該系統提供了必要的工具支持；Vo層（額外實體類）對應前端的數據字段，將數據庫對應的Entity 類的數據字段提取出來，提高了數據字段的使用效率[3]。該框架內嵌了Tomcat服務器，減少了對后端訪問服務器的配置。

3.5 概念模型設計

系統所有實體和聯系，實體包括外部代碼、用戶、日志、習題代碼、意見、意見圖片、題目。實體之間有一對一、一對多的關系。例如：意見與意見圖片是一對多的關系、用戶與意見也是一對多的關系、內部代碼與題目之間是一對一的關系。系統E-R如圖7所示。

4 系統實現

4.1 后端模型實現

系統后端運用了SpringBoot框架，并采用了分層模式（MVC模式）以實現數據的解耦，分為接口控制層、業務層、數據訪問層、實體層、工具層、異常處理層、配置層等。本系統通過部分代碼實現了這種分層結構。代碼編輯方面，系統使用Node.js調用GCC庫來編譯代碼。

系統的接口控制層作為前端與后端的橋梁，通過@RestController注解使接口控制層能夠映射到瀏覽器上。以下是日志接口控制層的實現代碼。

@RestController //控制層的注解

@CrossOrigin //跨域

@RequestMapping（"/editor/log"） //接口地址

@ResponseBody //json格式的數據

public class LogController {

@Resource

private LoginlogService loginlogService;

@GetMapping（"/logAddress"）

public Result Logaddress（@RequestHeader（"to?ken"） String token） {

List<Loginlogs> loginlogsList=loginlogService. find?Log（token）;

if（！loginlogsList.isEmpty（））{

return Result.success（loginlogsList，"查詢成功"，"

200"）;//結果映射到瀏覽器中。

}

return Result.error（"400"，"系統異常"）;

}

}

4.2 代碼編譯

該系統C語言編譯是Node.js連接GCC庫進行編譯處理的。Node.js的底層是C++，因此可以連接上GCC。接收前端的代碼生成.c臨時文件放到GCC鏡像環境去編譯[4]。以下是C 語言代碼編譯的核心代碼。

const express = require（′express′）;

const { exec } = require（′child_process′）;

const app = express（）;

const port = 3000;

app.use（express.json（））;

app.post（′/run-c-program′， （req， res） => {

const { code } = req.body;

const fs = require（′fs′）; // 將用戶輸入的代碼保存到一個臨時文件

const fileName = ′temp.c′;

fs.writeFileSync（fileName， code）;

try {

exec（`gcc ${fileName} -o temp && ./temp`， （error，stdout， stderr） => {

if （error） {

res.status（500）.json（{ error： stderr }）;

return;

}

res.json（{ result： stdout }）;

}）;

} catch （error） {

res.json（{ result： error }）;

}

}）;

app.listen（port， （） => {

console.log（`Server is running on port ${port}`）;

}）;

4.3 系統界面與功能

系統主界面提供了用戶在線編輯代碼和顯示編譯結果的功能。此界面包含了一些輔助功能，例如：保存（將用戶編輯的代碼保存到數據庫）、復制（復制編輯框中的代碼）、下載（將編輯框中的代碼以.c文件格式下載到本地電腦）、清空（清空編輯框中的代碼和運行結果）、代碼導入（從本地電腦導入.c代碼文件到編輯框中）、登錄（進入個人信息頁面）。主界面如圖8所示。

4.4 代碼編輯框

代碼編輯器提供了代碼高亮、代碼查找等功能，為用戶編輯代碼提供了良好的體驗。用戶編輯的代碼可以點擊運行，并顯示相應的運行結果。界面效果圖如圖9所示。

4.5 題目編輯

用戶可以在彈窗界面發布題目。該界面包含標題、內容和評分等元素。在填寫內容時，系統提供了富文本編輯器，方便用戶選擇樣式裝飾題目內容。發布題目的界面如圖10所示。

編輯題目模塊中富文本編輯框的前端部分核心代碼。

<QuillEditor ref="quill-editor" ：options="options"

：modules="modules" ：toolbar="toolbarOptions"

@Ready= "handleEditorReady" v-model： content=

"content" contentType="html" />

編輯題目的后端部分核心代碼如下。

@PostMapping（"/addContent"）

public Result addContent（@RequestBody Practices practices，@RequestHeader（"token"） String token）{

int flag=editorContentService.save（practices，token）;

if（flag==1）{

return Result.success（"200"，"入庫成功！"）;

}

return new Result（ResultCode.FAILURE）;

}

5 結束語

本系統采用了SpringBoot、Spring Data JPA、JWT 和 Redis 等框架，整體架構較為穩定。系統采用 Web 形式，用戶可以在同一局域網內通過 IP 訪問，在不同PC 端完成操作，具有良好的實用性。數據庫使用MySQL，能滿足一般高等院校的學生人數需求。為了提高系統安全性，登錄過程采用了加密技術。頁面展示采用較為柔和的色調，可以在長時間使用過程中，在一定程度上保護用戶視力。