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

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

后端代码分析


http://www.kler.cn/news/326961.html

相关文章:

  • 代码随想录算法训练营第34天|46. 携带研究材料、416. 分割等和子集
  • Android 12系统源码_输入系统(三)输入事件的加工和分发
  • Spring RestTemplate 升级 WebClient 导致 OutOfMemoryError
  • SQL进阶技巧:如何利用if语句简化where或join中的条件 | if条件语句的优雅使用方法
  • QT界面制作
  • 粉丝们得以一窥索菲亚罗兰奢华的90岁生日庆祝仪式! 她已完成了所有的遗愿清单 !
  • 选择租用徐州存储服务器有什么作用?
  • 大数据-149 Apache Druid 基本介绍 技术特点 应用场景
  • 2024年7月大众点评广州美食店铺基础信息
  • 2024.9.24 作业
  • Stable Diffusion 蒙版:填充、原图、潜空间噪声(潜变量噪声)、潜空间数值零(潜变量数值零)
  • 我店生活系统小程序开发功能解析
  • uniapp框架中实现文件选择上传组件,可以选择图片、视频等任意文件并上传到当前绑定的服务空间
  • 修改 idea 的 Terminal 命令窗口使用 git-bash
  • 得物App荣获新奖项,科技创新助力高质量发展
  • 国内ChatGPT镜像网站整理汇总【OpenAI o1/GPT 4o】-2024/10月最新
  • 【数据结构与算法】算法和算法分析
  • nginx服务介绍
  • ros2 colcon build 构建后,install中的local_setup.bash 和setup.bash有什么区别
  • 企业数据可视化大屏的工具选择有哪些
  • UI设计师面试整理-设计趋势和行业理解
  • 互斥量mutex、锁、条件变量和信号量相关原语(函数)----很全
  • 从两个 Excel 表格中提取相关信息,并根据学生的 学号 和 姓名 将第一个表格中的成绩数据填充到第二个表格中(附Python代码)
  • 【LeetCode HOT 100】详细题解之链表篇
  • 【Kubernetes】常见面试题汇总(四十八)
  • MySQL实现跨服务器查询
  • Vscode超好看的渐变主题插件
  • Axure9破解
  • MySQL中的嵌套查询
  • Go实现RabbitMQ消息模式