用dcloud的serveless，写一个题库，能够容纳选择题，填空题。再用VUE，写一个简单的答题页面，页面从题库中读取题目，进行答题，答对就提示正确，答错显示正确答案

好的，那我们先来看一下如何用dcloud的serveless写一个题库。

1. 创建一个云函数

在dcloud的控制台中，点击左侧的“云开发”，然后选择“云函数”，点击“创建云函数”，填写相关信息，然后点击“创建函数”。

2. 创建一个集合

在dcloud的控制台中，点击左侧的“云开发”，然后选择“数据库”，点击“创建集合”，填写相关信息，然后点击“创建集合”。

3. 在云函数中操作集合

在云函数中，使用wx.cloud.database()获取数据库实例，然后就可以对集合进行增删改查操作了。

具体代码如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const db = cloud.database()
  const collection = db.collection('questions')
  
  // 查询所有选择题
  const choiceQuestions = await collection.where({
    type: 'choice'
  }).get()
  
  // 查询所有填空题
  const blankQuestions = await collection.where({
    type: 'blank'
  }).get()
  
  // 返回结果
  return {
    choiceQuestions: choiceQuestions.data,
    blankQuestions: blankQuestions.data
  }
}

注意：这里假设题库中有一个“questions”集合，其中每个文档包含一道题目，其中必须包含“type”字段，值为“choice”或“blank”，表示选择题或填空题。

4. 创建一个VUE项目

使用vue-cli创建一个新的VUE项目，然后安装必要的依赖：

npm install --save axios vant

5. 编写答题页面

在src/views目录下创建一个question.vue文件，然后编写答题页面的代码：

<template>
  <div class="question">
    <van-tabbar route>
      <van-tabbar-item icon="question-o">选择题</van-tabbar-item>
      <van-tabbar-item icon="edit">填空题</van-tabbar-item>
    </van-tabbar>
    <van-cell-group>
      <van-cell v-for="(item, index) in questions" :key="index" :title="item.title" :label="item.answer" :value="item._id" @click="onSelect(item)">
        <template #right-icon>
          <van-icon :name="item.selected ? 'check' : 'circle'"></van-icon>
        </template>
      </van-cell>
    </van-cell-group>
    <van-button type="primary" :disabled="!hasAnswer" @click="onSubmit">提交</van-button>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'

export default {
  name: 'question',
  data() {
    return {
      questions: [],
      answers: {},
      hasAnswer: false
    }
  },
  mounted() {
    // 加载选择题
    this.loadQuestions('choice')
  },
  methods: {
    async loadQuestions(type) {
      try {
        const res = await axios.get('/api/loadQuestions', {
          params: { type }
        })
        this.questions = res.data
      } catch (err) {
        console.error(err)
      }
    },
    onSelect(item) {
      if (item.selected) {
        this.$set(item, 'selected', false)
        delete this.answers[item._id]
      } else {
        this.$set(item, 'selected', true)
        this.$set(this.answers, item._id, item.answer)
      }
      this.hasAnswer = Object.keys(this.answers).length > 0
    },
    async onSubmit() {
      if (Object.keys(this.answers).length === 0) {
        Toast('请选择答案')
        return
      }
      try {
        const res = await axios.post('/api/submitAnswers', {
          answers: this.answers
        })
        if (res.data.correct) {
          Toast.success('回答正确')
        } else {
          Toast.fail(`回答错误，正确答案为${res.data.answer}`)
        }
        this.questions.forEach(item => {
          this.$set(item, 'selected', false)
        })
        this.answers = {}
        this.hasAnswer = false
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

<style>
.question {
  padding: 20px;
}
</style>

注意：这里假设后端云函数的API地址为“/api”，并且选择题和填空题分别在两个不同的tab中展示，点击选择题后，会在题目列表中加入一个选中状态，点击提交按钮后，会将选择的答案提交给后端进行判断，然后提示答题结果。

6. 在main.js中注册路由

在src/main.js中，注册一个路由：

import Question from './views/question.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'question',
      component: Question
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

7. 部署到dcloud平台

使用dcloud的命令行工具，将项目部署到dcloud平台：

dcloud deploy

然后在dcloud控制台中打开应用，就可以看到一个简单的答题页面了！