MongoDB实现问卷/考试设计(2)

dataId用于将这个问题同一个业务数据绑定，dataType用来标志这个业务数据的类型，这两个字段方便数据的扩展；dataTitle是业务数据的标题；options是这个问题的选项；analysis问题的解析，用于用户答题结束后的自查；right用来记录问题的正确与否。

新增问题

上层接口

提供新增问题的接口：

@PostMapping("/saveOrUpdateQuestion")  
public JsonData saveOrUpdateQuestion(@RequestBody Question data) {  
    questionService.saveOrUpdateQuestion(data);  
    return JsonData.success();  
} 

QuestionService：

public void saveOrUpdateQuestion(Question data) {  
    if (StringUtils.isEmpty(data.getId())) {// 新增  
        writer.insert(manager.getExamDataBase(), ExamConstant.QUESTION_COLLECT, data);  
    } else {//修改  
        writer.updateDocument(data, ExamConstant.QUESTION_COLLECT);  
    }  
} 

DAO

Writer：

public void insert(String dataBase, String collect, MongoBean data) {  
    if (data.getId() == null) {  
        data.setId(BsonTool.uuid());  
    }  
    MongoCollection<Document> collection = getCollection(dataBase, collect);  
    collection.insertOne(Document.parse(JSONObject.toJSONString(data))); 
}  
public Document updateDocument(MongoBean data, String questionCollect) {  
    Document filter = new Document();  
    filter.put("id", data.getId());  
    Document res = new Document();  
    res.put("$set", BsonDocument.parse(JSONObject.toJSONString(data)));  
    update(manager.getExamDataBase(), questionCollect, filter, res);  
    return res;  
}  
public boolean update(String dataBase, String collect, Bson filter, Bson update) {  
    MongoCollection<Document> collection = getCollection(dataBase, collect);  
    UpdateResult ur = collection.updateOne(filter, update);  
    return ur.getModifiedCount() > 0;  
} 

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

前端实现数据结构

前端使用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> 

（编辑：ASP站长网）