關(guān)鍵詞：C語(yǔ)言編譯處理；系統(tǒng)設(shè)計(jì)；MVC；UI組件庫(kù)調(diào)用

中圖分類號(hào)：TP391.9 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2024）25-0051-04

1 概述

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

2 功能性需求分析

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

2） 系統(tǒng)登錄：支持郵箱驗(yàn)證碼登錄和賬號(hào)密碼登錄。用戶輸入郵箱后，會(huì)收到驗(yàn)證碼；也可以使用賬號(hào)和密碼進(jìn)行驗(yàn)證登錄。

3） 注冊(cè)：用戶需要輸入符合系統(tǒng)要求的賬號(hào)和密碼。在輸入密碼時(shí)，系統(tǒng)會(huì)要求再次確認(rèn)密碼。

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

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

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

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

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

9） 意見(jiàn)反饋：用戶可以對(duì)系統(tǒng)進(jìn)行評(píng)價(jià)和反饋，反饋信息包括內(nèi)容和評(píng)分等。

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

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

C語(yǔ)言在線編譯器系統(tǒng)屬于前后端分離的，因此分為前端模塊和后端模塊。前端模塊包括注冊(cè)、登錄、題目集、代碼編譯、題目編寫、賬戶安全、意見(jiàn)反饋、日志記錄等功能；后端模塊則包含系統(tǒng)前端的處理邏輯（后端邏輯）、MySQL數(shù)據(jù)庫(kù)用于數(shù)據(jù)持久化、Redis 應(yīng)用以及代碼編譯處理。系統(tǒng)結(jié)構(gòu)圖如圖2所示。

3.1 代碼編輯模塊

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

3.2 題目編寫模塊

用戶進(jìn)入題目編寫模塊頁(yè)面時(shí)，該頁(yè)面將會(huì)顯示作者發(fā)布的題目和內(nèi)容等，用戶先瀏覽題目，其次用戶根據(jù)題目的要求進(jìn)行編寫代碼，最后點(diǎn)擊運(yùn)行，最后顯示運(yùn)行的結(jié)果將以彈窗的形式顯示。系統(tǒng)題目編寫模塊的活動(dòng)圖如圖4所示。

3.3 題目發(fā)布模塊

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

3.4 系統(tǒng)后端（SpringBoot） 模塊

本系統(tǒng)后端分為 controller、service、dao、entity 模塊，分別負(fù)責(zé)數(shù)據(jù)封裝和邏輯處理。首先，前端發(fā)送指令至后端的 controller 層，此時(shí)接口層與業(yè)務(wù)邏輯層產(chǎn)生交互。業(yè)務(wù)邏輯層（service） 處理接口層（con?troller） 的請(qǐng)求，將業(yè)務(wù)邏輯處理后與數(shù)據(jù)庫(kù)層（dao） 進(jìn)行數(shù)據(jù)交互。service 層將處理后的數(shù)據(jù)傳遞給 dao 層，dao層根據(jù)請(qǐng)求從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)，并將結(jié)果返回給 dao 層、service 層和 controller 層。最后，接口層返回響應(yīng)的狀態(tài)碼和請(qǐng)求的數(shù)據(jù)至前端[2]。系統(tǒng)后端（SpringBoot） 模塊的時(shí)序圖如圖6所示。

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

3.5 概念模型設(shè)計(jì)

系統(tǒng)所有實(shí)體和聯(lián)系，實(shí)體包括外部代碼、用戶、日志、習(xí)題代碼、意見(jiàn)、意見(jiàn)圖片、題目。實(shí)體之間有一對(duì)一、一對(duì)多的關(guān)系。例如：意見(jiàn)與意見(jiàn)圖片是一對(duì)多的關(guān)系、用戶與意見(jiàn)也是一對(duì)多的關(guān)系、內(nèi)部代碼與題目之間是一對(duì)一的關(guān)系。系統(tǒng)E-R如圖7所示。

4 系統(tǒng)實(shí)現(xiàn)

4.1 后端模型實(shí)現(xiàn)

系統(tǒng)后端運(yùn)用了SpringBoot框架，并采用了分層模式（MVC模式）以實(shí)現(xiàn)數(shù)據(jù)的解耦，分為接口控制層、業(yè)務(wù)層、數(shù)據(jù)訪問(wèn)層、實(shí)體層、工具層、異常處理層、配置層等。本系統(tǒng)通過(guò)部分代碼實(shí)現(xiàn)了這種分層結(jié)構(gòu)。代碼編輯方面，系統(tǒng)使用Node.js調(diào)用GCC庫(kù)來(lái)編譯代碼。

系統(tǒng)的接口控制層作為前端與后端的橋梁，通過(guò)@RestController注解使接口控制層能夠映射到瀏覽器上。以下是日志接口控制層的實(shí)現(xiàn)代碼。

@RestController //控制層的注解

@CrossOrigin //跨域

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

@ResponseBody //json格式的數(shù)據(jù)

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"）;//結(jié)果映射到瀏覽器中。

}

return Result.error（"400"，"系統(tǒng)異常"）;

}

}

4.2 代碼編譯

該系統(tǒng)C語(yǔ)言編譯是Node.js連接GCC庫(kù)進(jìn)行編譯處理的。Node.js的底層是C++，因此可以連接上GCC。接收前端的代碼生成.c臨時(shí)文件放到GCC鏡像環(huán)境去編譯[4]。以下是C 語(yǔ)言代碼編譯的核心代碼。

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′）; // 將用戶輸入的代碼保存到一個(gè)臨時(shí)文件

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 系統(tǒng)界面與功能

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

4.4 代碼編輯框

代碼編輯器提供了代碼高亮、代碼查找等功能，為用戶編輯代碼提供了良好的體驗(yàn)。用戶編輯的代碼可以點(diǎn)擊運(yùn)行，并顯示相應(yīng)的運(yùn)行結(jié)果。界面效果圖如圖9所示。

4.5 題目編輯

用戶可以在彈窗界面發(fā)布題目。該界面包含標(biāo)題、內(nèi)容和評(píng)分等元素。在填寫內(nèi)容時(shí)，系統(tǒng)提供了富文本編輯器，方便用戶選擇樣式裝飾題目?jī)?nèi)容。發(fā)布題目的界面如圖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"，"入庫(kù)成功！"）;

}

return new Result（ResultCode.FAILURE）;

}

5 結(jié)束語(yǔ)

本系統(tǒng)采用了SpringBoot、Spring Data JPA、JWT 和 Redis 等框架，整體架構(gòu)較為穩(wěn)定。系統(tǒng)采用 Web 形式，用戶可以在同一局域網(wǎng)內(nèi)通過(guò) IP 訪問(wèn)，在不同PC 端完成操作，具有良好的實(shí)用性。數(shù)據(jù)庫(kù)使用MySQL，能滿足一般高等院校的學(xué)生人數(shù)需求。為了提高系統(tǒng)安全性，登錄過(guò)程采用了加密技術(shù)。頁(yè)面展示采用較為柔和的色調(diào)，可以在長(zhǎng)時(shí)間使用過(guò)程中，在一定程度上保護(hù)用戶視力。