OJ前端对接口

OJ前端对接口

---

原文链接

1.导入注册接口

①新建接口js文件（与接口名一致）

②首先导入post或者get

import { post } from "utils/http";

③导出接口名

export default{
 	
}

④接口命名—接口的最后名字

例如在下面的例子中，就选用objectiveJudge

⑤选择请求方式，填写路径

⑥完整接口导入代码

import { post } from "utils/http";
// 客观题判题
export default{
    objectiveJudge:post('/objective/objectiveJudge')
}

⑦在index.js中注册

导入

导出

2.调用接口

完整代码

import api from 'api'
export default {
  data() {
    return {
      lastContent: [
        {
          id: 0,
          topicNum: '6-1',
          topicContent: '将字符串变为html可使用（）、（）方法实现',
          blankNum: 2,
          TorF: true,
          allScore: '8分',

          blankAll: [
            // { preAnswer: '第一空答案：', blank: '', score: '2分' },
            // { preAnswer: '第二空答案：', blank: '', score: '6分' },
            {
              qtopicsetId: 306,
              userAnswer: [
                {
                  // preAnswer: '第一空答案：',
                  blank: '',
                  // score: '2分',
                },
                {
                  // preAnswer: '第二空答案：',
                  blank: '',
                  // score: '6分',
                },
              ],
            },
          ],
        },
      ],
    }
  },

  methods: {
    async submit() {
      const data = await api.objectiveJudge.objectiveJudge({
        accountId: 28,
        topicsetId: 1,
        userAnswer: this.lastContent[0].blankAll,
        topicTypeid: 4,
      })

      console.log(data)
    },
  },

①导入api

import api from 'api';

②在methods中添加异步方法async

async submit(){
      
}

③用const、await、接口名

const data = await api.objectiveJudge.objectiveJudge({
        
 })

④填写请求数据

请求数据为后端需要的数据

const data = await api.objectiveJudge.objectiveJudge({
        accountId:28,
        topicsetId:1,
        userAnswer:this.lastContent[0].blankAll,
        topicTypeId:4,
      })

⑤使用data

console.log(data);

3.使用接口

①设置一个按钮，绑定点击响应事件submit（刚才设置异步方法的名字）

    <el-button type="success" @click="submit">提交</el-button>

②查看是否完成

右键检查，打开netWork，点击Fetch/XHR查看
出现以下画面及调用成功

---

接下来就是漫长的和后端拉扯的过程……