MongoDB实现问卷考试设计功能(2)-木庄网络博客

这样后端的工作就全部完成了，接下来就是前端怎么给后端提供这样的数据结构了。

前端实现数据结构

前端使用 vue 实现JSON的构造：

<Modal title="问题编辑" v-model="showEdit" :closable="false" :mask-closable="false">
 <Form ref="question" :model="question" :rules="ruleValidate">
  <FormItem label="题目类型：" prop="qType">
   <Select v-model="question.qType" class="input-180" placeholder="题目类型" @on-change="changeQType(question)">
    <Option v-for="d in qTypes" :value="d.value" :key="d.value">{{ d.label }}</Option>
   </Select>
  </FormItem>
  <FormItem label="题目：" prop="title">
   <Input
     class="input-95-per"
     v-model="question.title"
     type="textarea"
     row="1"
     placeholder="题目"
     ></Input>
  </FormItem>
  <FormItem label="选项：">
   <div v-for="(o, i2) in question.options" :key="i2" style="display:flex">
    <Input class="input-95-per margin-bot-8 margin-right-10" v-model="o.text">
     <span slot="prepend">{{i2+1}}:</span>
    </Input>
    <Button size="small" @click="addOpt(question)" v-if="i2===0">+</Button>
    <Button size="small" @click="delOpt(question, o)" v-if="i2">-</Button>
    <Checkbox v-model="o.right">正确答案</Checkbox>
   </div>
  </FormItem>
  <FormItem label="答案解析：">
   <Input
     class="input-95-per"
     v-model="question.analysis"
     type="textarea"
     row="1"
     placeholder="答案解析"
     ></Input>
  </FormItem>
 </Form>
 <div slot="footer">
  <Button type="text" @click="cancelQuestion">取消</Button>
  <Button type="primary" :loading="saveLoading" @click="saveQuestion">保存</Button>
 </div>
</Modal>

这里绑定的 question 就是一个问题了。而一张试卷则是由多个问题，再加上试卷的额外属性构成的。

在 question 上的dataId刚好就能绑定上试卷的id

Exam exam = new Exam();
List<Question> questions = reader.findRandom(manager.getExamDataBase(), ExamConstant.QUESTION_COLLECT, new Document(), Question.class, no);
exam.setTitle(title);
exam.setDuration(dutation);
return exam;

总结

以上所述是小编给大家介绍的MongoDB实现问卷/考试设计功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

标签：MongoDB

返回前面的内容