当前位置: 首页 > news >正文

OJ在线评测系统 前端 完善题目提交服务 细讲异步前端请求与后端接口交互

题目提交服务完善

这则笔记是我们来梳理一下前后端逻辑

主要是我们的提交逻辑

先是看前端

按钮绑定的是这个异步请求

async 关键字表示这个函数内部会使用 await 来等待异步操作完成。

异步提交表单数据

const doSubmit = async () => {// message.error("刷题机架构尚未完成");console.log("尚未完善");if (!question.value?.id) {return;}const res = await QuestionControllerService.doQuestionSubmitUsingPost({...form.value,questionId: question.value.id,});// console.log(res.code);if (res.code === 0) {message.success("提交成功");} else {message.error("提交失败," + res.message);}
};

找一下请求

使用 await 关键字等待 QuestionControllerService.doQuestionSubmitUsingPost 异步请求的结果。这个请求将 form.value 对象的所有属性(使用了对象展开运算符 ...)以及 questionId 属性一起发送到服务器。questionIdquestion.value.id 中提取。

请求在这

  public static doQuestionSubmitUsingPost(questionSubmitAddRequest: QuestionSubmitAddRequest,): CancelablePromise<BaseResponse_long_ | any> {return __request(OpenAPI, {method: 'POST',url: '/question/question_submit/do',body: questionSubmitAddRequest,errors: {401: `Unauthorized`,403: `Forbidden`,404: `Not Found`,},});}

我们的请求找到了后端接口

首先我们看一下controller层 表现层接口的的情况

@PostMapping("/question_submit/do")
public BaseResponse<Long> doQuestionSubmit(@RequestBody QuestionSubmitAddRequest questionSubmitAddRequest,HttpServletRequest request) {if (questionSubmitAddRequest == null || questionSubmitAddRequest.getQuestionId() <= 0) {throw new BusinessException(ErrorCode.PARAMS_ERROR);}final User loginUser = userService.getLoginUser(request);long questionSubmitId = questionSubmitService.doQuestionSubmit(questionSubmitAddRequest, loginUser);return ResultUtils.success(questionSubmitId);
}

在看我们的核心代码逻辑主要在service层里

业务逻辑层我们看一下实现类里面是怎么书写具体逻辑的

@Override
public long doQuestionSubmit(QuestionSubmitAddRequest questionSubmitAddRequest, User loginUser) {// 校验编程语言是否合法String language = questionSubmitAddRequest.getLanguage();QuestionSubmitLanguageEnum languageEnum = QuestionSubmitLanguageEnum.getEnumByValue(language);if (languageEnum == null) {throw new BusinessException(ErrorCode.PARAMS_ERROR, "编程语言错误");}long questionId = questionSubmitAddRequest.getQuestionId();// 判断实体是否存在,根据类别获取实体Question question = questionService.getById(questionId);if (question == null) {throw new BusinessException(ErrorCode.NOT_FOUND_ERROR);}// 是否已提交题目long userId = loginUser.getId();// 每个用户串行提交题目QuestionSubmit questionSubmit = new QuestionSubmit();questionSubmit.setUserId(userId);questionSubmit.setQuestionId(questionId);questionSubmit.setCode(questionSubmitAddRequest.getCode());questionSubmit.setLanguage(language);// 设置初始状态questionSubmit.setStatus(QuestionSubmitStatusEnum.WAITING.getValue());questionSubmit.setJudgeInfo("{}");boolean save = this.save(questionSubmit);if (!save){throw new BusinessException(ErrorCode.SYSTEM_ERROR, "数据插入失败");}// todo 执行判题服务Long questionSubmitId = questionSubmit.getId();// 执行判题服务CompletableFuture.runAsync(() -> {judgeService.doJudge(questionSubmitId);});return questionSubmitId;
}

前端代码分析

JS部分

TypeScript部分

后端代码分析

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 基于nodejs+vue的游戏陪玩系统
  • uniapp视频禁止用户推拽进度条并保留进度条显示的解决方法——方案二
  • AI 驱动旅游创业新机遇,旅游卡与共享旅游的融合发展
  • Java面试题之JVM20问
  • 进阶:反转二叉树的奇数层
  • SLF4J报错log4j又报错
  • 【C++】入门基础知识-1
  • 【C#生态园】构建高效PDF应用:全面解析C#六大PDF生成库
  • 2024最新国内镜像源设置(npm、yarn、pnpm)
  • 皮肤病检测-目标检测数据集(包括VOC格式、YOLO格式)
  • 【系统架构设计师】专题:软件工程基础
  • CAT1 RTU软硬件设计开源资料分析(TCP协议+Modbus协议+GNSS定位版本 )
  • 数据仓库ETL开发规范
  • MISC - 第二天(wireshark,base64解密图片,zip文件伪加密,LSB二进制最低位,ARCHPR工具)
  • 计算机网络1
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • CSS中外联样式表代表的含义
  • express.js的介绍及使用
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • Node + FFmpeg 实现Canvas动画导出视频
  • 关于字符编码你应该知道的事情
  • 讲清楚之javascript作用域
  • 前端知识点整理(待续)
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 世界上最简单的无等待算法(getAndIncrement)
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 小程序 setData 学问多
  • 自制字幕遮挡器
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • 第二十章:异步和文件I/O.(二十三)
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (13)Hive调优——动态分区导致的小文件问题
  • (c语言+数据结构链表)项目:贪吃蛇
  • (四)Linux Shell编程——输入输出重定向
  • (万字长文)Spring的核心知识尽揽其中
  • (原創) 博客園正式支援VHDL語法著色功能 (SOC) (VHDL)
  • (转)AS3正则:元子符,元序列,标志,数量表达符
  • (转载)CentOS查看系统信息|CentOS查看命令
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .htaccess配置重写url引擎
  • .Net 8.0 新的变化
  • .net core + vue 搭建前后端分离的框架
  • .Net Core 微服务之Consul(二)-集群搭建
  • .Net Web项目创建比较不错的参考文章
  • .NET WPF 抖动动画
  • .net 使用ajax控件后如何调用前端脚本
  • .NET 事件模型教程(二)
  • .net 怎么循环得到数组里的值_关于js数组