一种实现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，能满足一般高等院校的学生人数需求。为了提高系统安全性，登录过程采用了加密技术。页面展示采用较为柔和的色调，可以在长时间使用过程中，在一定程度上保护用户视力。