Serverless实战驾校小程序考题练习三 Serverless实战驾校小程序【考题练习】三 介绍 上一节我们讲了，实现了分类、题目显示、进度条显示等功能，这节我们继续完善答题功能。由于开发时间比较紧，这里主要写实习思路，与核心代码。 这一节做顺序练习与模拟考试。都属于答题详细页面功能 这次进度条可以根据答题进度，显示进度。 这个也用了iview的一个插件， 目前样式没调整， 这个后面再说。这一节主要实现了一些逻辑计算逻辑一：记录学习题目进度 记录的核心代码，在提交保存的时候调用。当然，也可以在练习离开的时候触发，这里给了个按钮，点击保存即可保存学习记录const AddLearning = ({ num, result, type = 1 }) => { let current = wx.Bmob.User.current() return new Promise((resolve, reject) => { const query = wx.Bmob.Query('learning'); query.set('bSubjects', '1') query.set('bModels', '1') query.set('num', num) query.set('result', result) query.set('type', type) query.set('uid', current.objectId) query.save().then(res => { resolve(res) }).catch(err => { console.error(err) reject(err) }) }); }逻辑二：记录题目回答的对错 上面的变量result记录，格式请看上一节数据库格式说明，是题目的对错。这里点击一个选择就记录一次，我在页面data里面增加了一个items变量来保存。选择答案执行以下代码，今天先实现单选，我们单选与多选，判断事件分开来做，这样便于逻辑管理// 单选题 handleFruitChange ({ detail = {}, target = {} }) { let questionInfo = this.data.questionInfo // 判断单选是否正确 if (target.dataset.id) { console.log('ok') questionInfo.isOk = 1 } this.setData({ questionInfo: questionInfo, current: detail.value }); // 单选自动跳到下一题 this.statistical() // 显示第几道题 this.setThisData(this.data.index) this.setData({ index: this.data.index + 1, current: '' }); },逻辑三：答题相关统计 逻辑二讲了，记录对错，这里有一些统计需要拿出来计算，先做单选题，点击选择，判断是否正确， 如果正确，记录到结果对象 [{" id ":" XXX ', '0'}, {" id ":" XXX ", "1"}] ，0代表回答错误，1正确例如错题个数、对题个数，页面提示，进度条进一步statistical () { // 统计错题个数 let questionErr = this.data.questionErr //错题个数 let questionOk = this.data.questionOk //错题个数 let questionInfo = this.data.questionInfo let items = this.data.items let arr = { "id": questionInfo.objectId, "o": 0 } let t = 'error', m = '回答错误' if (questionInfo.isOk === 1) { // o 0代表失败，1代表成功 arr.o = 1 questionOk = questionOk + 1 t = 'success' m = '回答正确' } else { // 错误数+1 questionErr = questionErr + 1 } items.push(arr) // 提示 $Message({ content: m, type: t, duration: 2 }); //进度条 let totalW = this.data.index / this.data.total totalW = (totalW * 100).toFixed(2); totalW = totalW < 1 ? 1 : totalW this.setData({ items: items, questionErr: questionErr, questionOk: questionOk, totalW: totalW, }); },逻辑四：上一题下一题的实现 页面显示第几个题目，我们用数组的下面来记录，单电机下一题，我们记录回答对错，并且数组下标+1// 翻页 handlePageChange ({ detail }) { const type = detail.type; const current = this.data.current if (current == "") { console.log('空') $Toast({ content: '请选择答案！', type: 'warning' }); return; } this.statistical() if (type === 'next') { this.setThisData(this.data.index) this.setData({ index: this.data.index + 1, current: '' }); } else if (type === 'prev') { this.setData({ index: this.data.index - 1, current: '' }); this.setThisData(this.data.index) } },逻辑五：引入模式概念 因为答题页面逻辑非常多，今天写这么多也没写完一般， 除了学习模式，后面还有模拟考试模式，这里不单独使用另外的页面来开发，统一在一个页面。 所以，我们在页面data里加入model变量，代表模式。/**​ * 这里有个模式， 练习模式，与模拟考试模式 ​ * model 1.练习模式 2.模拟考试考试​ * 练习模式查询出所有数据练习​ * 模拟考试 随机100题 计算打分​ */总结 今天练习模式里面的单项选择逻辑基本已经做好，明天将实现模拟考试，计算考试成绩等等功能大家想学习更多的云服务开发， 可以加入Bmob的交流群：群号:273080081

Baas-后端架构思考 暂无简介