【开源、完结、陆续更新】使用Springboot+ Vue从0-1写个Oj当毕设——判题机

项目预览

在线预览不可以用啦,服务器到期啦

在线预览(基本功能已经完成,博主正在逐步完善) :CodeSky 代码在线评测系统

项目图片:

图1、题库

图2、比赛题目选择

图3、作弊检测

图4、竞赛排名

图5、竞赛列表

前情提要

废话少说直接开始,判题机使用docker容器当作沙箱,系统打开流程图是这样的

运行代码原理就是使用Processbuilder运行docker容器然后运行代码,具体执行命令如下

#创建容器
create  =   docker,run,-id,-v,%h:%d,%name
#编译
compile =   docker,exec,%id,/bin/sh,-c,cd %code && %c,
#shell执行语句
shell =   timeout 2s time -ao time/time%i.txt -f %U:%M %name < in/in%i.txt > out/out%i.txt
#执行shell
execute = docker,exec,-i,%id,/bin/sh,-c,cd %code && chmod 777 do.sh && ./do.sh
#删除停止容器
stop = docker,stop,%id
delete= docker,rm,%id

时间计算直接简单粗暴用linux的 time -v命令

目前已经完成判题计算时空功能

源码追踪(前端 + 后端)

项目开源,详细代码请追踪.

博主以github更新为主,gitee同步可能会有延迟

后端:

github:https://github.com/ckw0812/Springboot_OnlineJudge_Systeam.git

gitee:基于Springboot + Vue3的Onlinejudge在线判题系统: 基于Springboot + Vue的Onlinejudge在线判题系统

前端:

vue3 + ts + vite前端:GitHub - 1stMarine/onlineJudgeVue3 (github)

vue3 + ts + vite 前端 :onlineJudgeVue3: onlineJudge前端 (gitee)

  • 6
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue-simple-uploader是一个轻量级的vue文件上传组件,可以支持多文件上传以及上传进度和错误信息提示。 要使用vue-simple-uploader实现文件夹上传,需要先将文件夹打包为zip文件,然后使用vue-simple-uploader上传zip文件即可。 以下是实现步骤: 1.安装vue-simple-uploader ``` npm install vue-simple-uploader --save ``` 2.在Vue组件中引入Vue-simple-uploader ``` import Uploader from 'vue-simple-uploader' export default { components: { Uploader } } ``` 3.在Vue组件中使用Vue-simple-uploader ``` <template> <div> <uploader ref="uploader" :upload-url="uploadUrl" :headers="headers" :data="formData" :multiple="false" :extensions="extensions" :auto-upload="false" @file-added="onFileAdded" @file-removed="onFileRemoved" @uploading="onUploading" @upload-success="onUploadSuccess" @upload-error="onUploadError" @upload-complete="onUploadComplete" /> <button @click="uploadFolder">上传文件夹</button> </div> </template> ``` 4.在Vue组件中实现上传文件夹的方法 ``` methods: { uploadFolder() { // 将文件夹打包为zip文件 let zip = new JSZip() let folder = zip.folder('folder') // 添加文件夹中的文件 folder.file('file1.txt', 'content1') folder.file('file2.txt', 'content2') // 生成zip文件 zip.generateAsync({ type: 'blob' }).then((blob) => { // 将zip文件上传 let file = new File([blob], 'folder.zip') this.$refs.uploader.add([file]) this.$refs.uploader.upload() }) }, onUploadSuccess(response, file, fileList) { // 上传成功回调函数 console.log(response) }, onUploadError(error, file, fileList) { // 上传失败回调函数 console.log(error) } } ``` 上述代码中,使用JSZip将文件夹打包为zip文件,然后将zip文件添加到vue-simple-uploader中,最后调用upload方法上传文件。上传成功或失败后,会分别调用onUploadSuccess和onUploadError回调函数。 需要注意的是,由于JSZip依赖于浏览器的原生Zip API,因此在一些不支持Zip API的浏览器上可能无法使用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值