【sduoj】关于前端教师出题功能的设计

2021SC@SDUSC

序言

SDUOJ 项目，全称 山东大学学生程序设计能力在线提升平台，作为一款 Online Judge 产品，其自然少不了出题的功能。而这篇博客就将着笔介绍 SDUOJ 项目的出题功能。

页面结构

对于整个出题系统的结构，可以查看下方列出的树状结构图：

└── src/views/Teacher/newProblem.vue├── src/components/newProblem/publishQuestion.vue├── src/components/newProblem/testPoint.vue└── src/components/newProblem/setLimits.vue

其中，

• src/views/Teacher/newProblem.vue：作为出题系统的主要页面，作为其下三个出题系统子模块的容器，并实时处理当前的出题步骤以及其他通用信息。
• src/components/newProblem/publishQuestion.vue：作为出题系统的第一步，设置题目基本信息，包括题目的标题、难度、题目所涉及的知识点（标签），以及记录题目描述的markdown文本。
• src/components/newProblem/testPoint.vue：该页面用来给每道题目上传测试点，可通过 zip 压缩包批量上传测试点，也可通过表单手动输入并上传单个测试点。
• src/components/newProblem/setLimits.vue：该页面的作用是设置学生回答该题可使用的高级程序设计语言，并设置该语言的模板答案代码。上传代码后可使用第二步上传的测试点对代码进行测试，系统会为教师判断代码或测试数据是否有误，并生成合适的测试限制（最大占用内存空间、最大运行耗时等）。教师可对生成的限制进行合理的修改。

模块介绍

newProblem

这是整个出题系统的控制模块，是整个出题系统的核心模块。其负责综合统计当前题目的所有信息，并有选择地将三个子模块展示在页面中。
下面我们来看看该模块的源代码：

<template><div class="newProblem"><el-steps :active="step" simple><el-step title="编辑题目" icon="el-icon-edit" /><el-step title="测试数据" icon="el-icon-upload" /><el-step title="设置限制" icon="el-icon-cpu" /></el-steps><div style="margin-top: 20px"><publish-question :step.sync="step" :problemId.sync="problemId" v-show="step===1" /><test-point :problemId="problemId" v-show="step===2" :step.sync="step" /><set-limits :problemId="problemId" v-show="step===3" :step.sync="step" /></div></div>
</template><script> import publishQuestion from "../../../components/newProblem/publishQuestion.vue"; import setLimits from "../../../components/newProblem/setLimits.vue"; import testPoint from "../../../components/newProblem/testPoint.vue"; export default {
      name: "newProblem",components: {
      publishQuestion,setLimits,testPoint,},data() {
      return {
      step: 1,problemId: 0,};},beforeCreate() {
      if (this.$store.state.noToken || !this.$store.state.isTeacher) {
      this.$router.replace("/");}},created() {
      let problemId = this.$route.query.problemId;if (problemId) {
      this.problemId = Number(problemId);let step = this.$route.params.step;this.step = step ? step : 1;}}, }; </script>

可以看到，作为一个容器，该模块的源代码还是比较简洁的。事实上，这个模块更像是连接三个子模块的 “桥” ，负责记录当前的 题目 Id 和 出题进度。
在该模块的 beforeCreate 生命周期中，通过读取项目的 Vuex 中的数据，判断当前用户是否登录、是否拥有教师权限，若不具备教师权限则重定向至项目首页。
基于 Vue 的模块化开发思想，出题系统在具备出题功能的同时也具备修改已有题目的信息的功能。
该模块作为出题系统时，模块内的 problemId 的值为 0。当用户使用 publishQuestion 模块提交题目的基本信息后，后端数据库中将生成一道新题目，并将该题目的 Id 返回给前端。前端将这个 Id 赋值给 problemId。
而当该模块用以修改题目信息的时候，会在该模块对应的路由中添加相关的数据信息，在路由的query的problemId字段中携带该题对应的 Id。子模块通过监控该 Id 即可得知当前是处于出题阶段还是修改信息阶段。

publishQuestion

详情请参考 出题功能模块分析 (1) — 题目详情

testPoint

详情请参考 出题功能模块分析 (2) — 测试点上传

setLimits

详情请参考 这部分博客还没发