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

news2024/11/17 9:43:45

题目提交服务完善

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

主要是我们的提交逻辑

先是看前端

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

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部分

后端代码分析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2168172.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第二十九篇——用间篇:间谍的五种用法

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 间谍的用法&#xff0c;精准的说明了对应的边界&#xff1b;以及在什么场…

字节打印流字符打印流

打印流不能读&#xff0c;只能写 打印流 分类:打印流一般是指:PrintStream&#xff0c;PrintWriter两个类 特点1:打印流只操作文件目的地&#xff0c;不操作数据源 特点2:特有的写出方法可以实现&#xff0c;数据原样写出 特点3:特有的写出方法&#xff0c;可以实现自动刷新…

如何将二氧化碳“封”入海底?

什么&#xff1f;人类在收集空气&#xff1f;&#xff01;&#xff01; 收集的二氧化碳用来干什么&#xff1f;这活咋干&#xff1f; 近期了解到一则新闻&#xff1a; 不得不说人类的智慧真是令人感叹&#xff0c;我们确实在为地球的环保事业添砖加瓦&#xff0c;点点滴滴的努…

【前端必读】一、使用 Cursor 的基本功能全教程(使用与安装)

【前端必读】一、使用 Cursor 的基本功能全教程&#xff08;使用与安装&#xff09; 【前端必读】二、使用 Cursor 的基本功能全教程&#xff08;快捷键及其他功能&#xff09; 一、使用 Cursor 的基本功能教程&#xff08;使用与安装&#xff09; 这篇教程主要讲解了如何使用…

react的事件绑定

文章目录 基本示例使用箭头函数事件对象阻止默认行为绑定事件处理函数的上下文 在 React 中&#xff0c;事件绑定主要通过 JSX 属性来实现。事件处理函数被传递给相应的事件属性&#xff0c;例如 onClick、onChange 等。这些属性会被绑定到 HTML 元素上&#xff0c;并在事件发生…

shiro 在未登录时候获取 SecurityUtils.getSubject() 异常

一、错误描述 需求背景&#xff1a;新项目需要通过aop将请求日志打印出来&#xff0c;并且附上当前登录人的账号&#xff0c;系统认证使用 shiro 控制&#xff0c;想着直接通过 SecurityUtils.getSubject() 获取当前身份&#xff0c;但是很不幸的是&#xff0c;当用户没有登录…

低代码BPM业务流程:简化企业流程管理的利器

什么是低代码BPM&#xff1f; 低代码BPM结合了低代码开发平台与业务流程管理的理念&#xff0c;使企业能够以较少的编码工作&#xff0c;快速设计、实施和优化业务流程。低代码平台通常提供可视化的界面&#xff0c;用户可以通过拖放组件来构建应用&#xff0c;而无需深入掌握…

linux信号 | 学习信号三步走 | 全解析信号的产生方式

前言&#xff1a;本节内容是信号&#xff0c; 主要讲解的是信号的产生。信号的产生是我们学习信号的第二个阶段。 我们已经学习过第一个阶段——信号的概念与预备知识&#xff08;没有学过的友友可以查看我的前一篇文章&#xff09;。 以及我们还没有学习信号的第三个阶段——信…

【rust】 基于rust编写wasm,实现markdown转换为html文本

文章目录 背景转换预览核心代码前置依赖rustup换源cargo换源中科大 wasm-pack安装 背景 尝试用rust编写一款markdown转html的插件&#xff0c;通过wasm给html使用&#xff0c;不得不说体积挺小&#xff0c;约200K&#xff0c; 比go的wasm起步2MB看着舒服点。 不过go的配置和换…

Nginx基础详解3(nginx.conf核心代码讲解、常用命令解析、Nginx日志切割)

续Nginx基础详解2&#xff08;首页解析过程、进程模型、处理Web请求机制、nginx.conf语法结构&#xff09;-CSDN博客 目录 8.nginx.conf核心代码 8.1错误日志 8.1.1第一列&#xff1a; 8.1.2第二列&#xff1a; 8.1.3第三列&#xff1a; 8.2 #pid 8.3http模块&#xff…

Vue引入js脚本问题记录(附解决办法)

目录 一、需求 二、import引入问题记录 三、解决方式 一、需求 我想在我的Vue项目中引入jquery.js和bootstrap.js这种脚本文件&#xff0c;但发现不能单纯的import引入&#xff0c;问题如下。 二、import引入问题记录 我直接这么引入&#xff0c;发现控制台报错TypeError: …

语义分割评价指标——95% Hausdorff距离

回顾以下95% Hausdorff距离的概念&#xff0c;一张比较经典直观的图&#xff1a; 一、 最快理解 max(d_XY, d_YX):取X>Y距离 和 Y>X距离的最大值。 其中 X>Y max min x>y :X所有点都和Y集合计算最小的距离&#xff0c;得到的距离集合再取最大值。 同理 Y>X m…

汽修行业:融合员工培训、知识库管理系统与SOP

随着汽车技术的飞速发展和消费者需求的日益多样化&#xff0c;汽修行业面临着前所未有的挑战与机遇。为了提升服务质量、增强竞争力&#xff0c;汽修企业必须重视员工培训、知识管理和作业标准化。本文旨在探讨如何构建一套集成汽修员工培训、知识库管理与SOP&#xff08;标准作…

Leetcode - 周赛416

目录 一&#xff0c;3295. 举报垃圾信息 二&#xff0c;3296. 移山所需的最少秒数 三&#xff0c;3297. 统计重新排列后包含另一个字符串的子字符串数目 I 四&#xff0c;3298. 统计重新排列后包含另一个字符串的子字符串数目 II 一&#xff0c;3295. 举报垃圾信息 本题就是…

首个端到端自动驾驶背景下对抗性训练研究

更多优质内容&#xff0c;请关注公众号&#xff1a;智驾机器人技术前线 1.论文信息 论文标题&#xff1a;Module-wise Adaptive Adversarial Training for End-to-end Autonomous Driving 作者&#xff1a;Tianyuan Zhang, Lu Wang, Jiaqi Kang, Xinwei Zhang, Siyuan Liang,…

(done 意义不明的公式) 声音信号处理基础知识(10) (Demystifying the Fourier Transform: The Intuition)

参考&#xff1a;https://www.youtube.com/watch?vXQ45IgG6rJ4 就像棱镜可以把可见光分解为不同波长的光一样&#xff0c;FT 做的事情就是把复杂的声波转为不同频率的声波 FT 可以把时域信息转为频域信息 以下是对于 FT 的一些 intuition-level 的理解&#xff1a; 1.FT 会…

2.4K star的GOT-OCR2.0:端到端OCR 模型

GOT-OCR2.0是一款新一代的光学字符识别&#xff08;OCR&#xff09;技术&#xff0c;标志着人工智能在文本识别领域的重大进步。作为一款开源模型&#xff0c;GOT-OCR2.0不仅支持传统的文本和文档识别&#xff0c;还能够处理乐谱、图表以及复杂的数学公式&#xff0c;为用户提供…

如何使用ssm实现基于JavaWeb的个人健康信息管理系统

TOC ssm701基于JavaWeb的个人健康信息管理系统jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#x…

大模型如何赋能智慧城市新发展?

国家数据局近期发布的《数字中国发展报告&#xff08;2023&#xff09;》显示&#xff0c;我国数据要素市场化改革步伐进一步加快&#xff0c;数字经济规模持续壮大&#xff0c;数字技术应用场景不断拓展。这一成就的背后是数字技术广泛应用&#xff0c;数字技术不仅影响着老百…

12.系统架构分析师应该懂的项目管理知识

进度管理 进度管理就是采用科学的方法&#xff0c;确定进度目标&#xff0c;编制进度计划和资源供应计划&#xff0c;进行进度控制&#xff0c;在与质量、成本目标协调的基础上&#xff0c;实现工期目标。具体来说&#xff0c;包含以下过程&#xff1a; 活动定义&#xff1a;…