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

OJ在线评测系统 将代码沙箱开放为API 跑通前端后端整个项目 请求对接口

article 2024/11/20 9:34:41

代码沙箱开放API

这一步非常简单

就是提供公共方法

引入代码沙箱的具体实现

  /**
     * 执行代码
     *
     * @param executeCodeRequest
     * @return
     */
    @PostMapping("/executeCode")
    ExecuteCodeResponse executeCode(@RequestBody ExecuteCodeRequest executeCodeRequest, HttpServletRequest request,
                                    HttpServletResponse response) {
        // 基本的认证
        String authHeader = request.getHeader(AUTH_REQUEST_HEADER);
        if (!AUTH_REQUEST_SECRET.equals(authHeader)) {
            response.setStatus(403);
            return null;
        }
        if (executeCodeRequest == null) {
            throw new RuntimeException("请求参数为空");
        }
        return javaNativeCodeSandbox.executeCode(executeCodeRequest);
    }

现在我们想想看我们之前的后端是怎么做的

我们写了一个示例

用了个策略模式

只是为了跑通流程

现在我们要把接口放进来

我们要补全远程代码沙箱里面的代码

定义新的错误枚举类型

    API_REQUEST_ERROR( 50010, "接口调用失败");

以便于我们抛出异常

   if(StringUtils.isBlank(responseStr)){
            throw new BusinessException(API_REQUEST_ERROR, "executeCode remoteSandbox error, message = {}"+responseStr);
        }

我们用hutool包进行数据封装

进入配置里面 此时我们就能修改

接下来我们进行测试

此时这个API是不安全的

接口调用是不安全的

调用安全性

如果将服务不做任何权限校验 直接发到公网 是不安全的

怎么提高安全性呢

调用方和服务提供方之间约定一个字符串 只是在服务器内部传递

这个字符串最好是加密的字符串

约定好一个字符串

如果调用方的请求头和请求秘钥和接口定义的不一致 就不给予调用

优点：简单 比较适合内部系统之间的相互调用 相对可行的环境内部调用

缺点：不够灵活 如果key泄露或者是变更 得去修改代码

调用方 在调用的时候补充请求头

package com.yupi.yuojcodesandbox.controller;

import com.yupi.yuojcodesandbox.JavaNativeCodeSandbox;
import com.yupi.yuojcodesandbox.model.ExecuteCodeRequest;
import com.yupi.yuojcodesandbox.model.ExecuteCodeResponse;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@RestController("/")
public class MainController {

    // 定义鉴权请求头和密钥
    private static final String AUTH_REQUEST_HEADER = "auth";

    private static final String AUTH_REQUEST_SECRET = "secretKey";

    @Resource
    private JavaNativeCodeSandbox javaNativeCodeSandbox;

    @GetMapping("/health")
    public String healthCheck() {
        return "ok";
    }

    /**
     * 执行代码
     *
     * @param executeCodeRequest
     * @return
     */
    @PostMapping("/executeCode")
    ExecuteCodeResponse executeCode(@RequestBody ExecuteCodeRequest executeCodeRequest, HttpServletRequest request,
                                    HttpServletResponse response) {
        // 基本的认证
        String authHeader = request.getHeader(AUTH_REQUEST_HEADER);
        if (!AUTH_REQUEST_SECRET.equals(authHeader)) {
            response.setStatus(403);
            return null;
        }
        if (executeCodeRequest == null) {
            throw new RuntimeException("请求参数为空");
        }
        return javaNativeCodeSandbox.executeCode(executeCodeRequest);
    }
}

我们也可以开放API签名认证

给允许调用的人员分配accessKey secretKey

然后校验这两组key是否匹配

跑通整个项目流程

前端后端 一起工作

远程代码沙箱

后端

前端

接下来我们就要尝试去跑通整个项目流程

写一个前端流程

写一个题目提交页面

<template>
  <div id="questionSubmitView">
    <a-form :model="searchParams" layout="inline">
      <a-form-item field="questionId" label="题号" style="min-width: 240px">
        <a-input v-model="searchParams.questionId" placeholder="请输入" />
      </a-form-item>
      <a-form-item field="language" label="编程语言" style="min-width: 240px">
        <a-select
          v-model="searchParams.language"
          :style="{ width: '320px' }"
          placeholder="选择编程语言"
        >
          <a-option>java</a-option>
          <a-option>cpp</a-option>
          <a-option>go</a-option>
          <a-option>html</a-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doSubmit">搜索</a-button>
      </a-form-item>
    </a-form>
    <a-divider size="0" />
    <a-table
      :ref="tableRef"
      :columns="columns"
      :data="dataList"
      :pagination="{
        showTotal: true,
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total,
      }"
      @page-change="onPageChange"
    >
      <template #judgeInfo="{ record }">
        {{ JSON.stringify(record.judgeInfo) }}
      </template>
      <template #createTime="{ record }">
        {{ moment(record.createTime).format("YYYY-MM-DD") }}
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import {
  Question,
  QuestionControllerService,
  QuestionSubmitQueryRequest,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import moment from "moment";

const tableRef = ref();

const dataList = ref([]);
const total = ref(0);
const searchParams = ref<QuestionSubmitQueryRequest>({
  questionId: undefined,
  language: undefined,
  pageSize: 10,
  current: 1,
});

const loadData = async () => {
  const res = await QuestionControllerService.listQuestionSubmitByPageUsingPost(
    {
      ...searchParams.value,
      sortField: "createTime",
      sortOrder: "descend",
    }
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败，" + res.message);
  }
};

/**
 * 监听 searchParams 变量，改变时触发页面的重新加载
 */
watchEffect(() => {
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const columns = [
  {
    title: "提交号",
    dataIndex: "id",
  },
  {
    title: "编程语言",
    dataIndex: "language",
  },
  {
    title: "判题信息",
    slotName: "judgeInfo",
  },
  {
    title: "判题状态",
    dataIndex: "status",
  },
  {
    title: "题目 id",
    dataIndex: "questionId",
  },
  {
    title: "提交者 id",
    dataIndex: "userId",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
];

const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

const router = useRouter();

/**
 * 跳转到做题页面
 * @param question
 */
const toQuestionPage = (question: Question) => {
  router.push({
    path: `/view/question/${question.id}`,
  });
};

/**
 * 确认搜索，重新加载数据
 */
const doSubmit = () => {
  // 这里需要重置搜索页号
  searchParams.value = {
    ...searchParams.value,
    current: 1,
  };
};
</script>

<style scoped>
#questionSubmitView {
  max-width: 1280px;
  margin: 0 auto;
}
</style>

这段代码定义了一个异步函数 loadData，用于加载分页问题提交的数据。它调用 QuestionControllerService 的 listQuestionSubmitByPageUsingPost 方法，传入的参数是 searchParams.value 的内容，并添加了排序字段和顺序。如果返回结果的 code 为 0，说明请求成功，则将返回的记录赋值给 dataList，同时更新总数 total；如果请求失败，则显示错误信息。

这是对象展开运算符（spread operator）的写法，...searchParams.value 将 searchParams.value 对象的所有属性展开，并与后面的 sortField 和 sortOrder 一起创建一个新对象。这种写法可以方便地合并对象属性。

封装请求信息

后端的提交是异步执行的

推荐的是每十秒刷新一下状态


http://www.kler.cn/a/322425.html

相关文章：

  • Jmeter 如何导入证书并调用https请求
  • 《探索 C++：一门强大且多功能的编程语言》
  • 【Vue笔记】基于vue3 + element-plus + el-dialog封装一个自定义的dialog弹出窗口组件
  • 讯飞、阿里云、腾讯云：Android 语音合成服务对比选择
  • 第23次CCF计算机软件能力认证
  • web——upload-labs——第十二关——%00截断
  • 后端开发刷题 | 没有重复项数字的全排列
  • 家庭网络的ip安全性高吗
  • 为什么IP首部的源IP地址和目的IP地址不变而MAC层的源MAC地址和目的MAC地址变
  • Spring Boot电商开发：购物商城系统
  • F28335 的 EPWM 外设
  • 鸿蒙_异步详解
  • Python知识点：如何使用Python进行卫星数据分析
  • 如何选择数据库架构
  • Redis 的 Java 客户端有哪些？官方推荐哪个？
  • socket.io-client实现实前后端时通信功能
  • LeetCode[中等] 78.子集
  • 基于SpringBoot+Vue+MySQL的旅游推荐管理系统
  • 使用 C 语言解析多时间戳歌词文件的实现
  • List和Map有什么区别？
  • 视频生成模型哪家强？豆包可灵通义海螺全面评测【AI评测】
  • StopWath，apache commons lang3 包下的一个任务执行时间监视器的使用
  • 起号半个月GMV 1300W+，视频号这个赛道真香！
  • CMU 10423 Generative AI：lec7、8、9（专题2：一张图理解diffusion model结构、代码实现和效果）
  • 论文阅读 | 一种基于潜在向量优化的可证明安全的图像隐写方法（TMM 2023）
  • 端上自动化测试平台实践