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题 计算打分 */ 总结今天练习模式里面的单项选择逻辑基本已经做好，明天将实现模拟考试，计算考试成绩等等功能

Serverless实战驾校小程序【数据导入】五 题目数据库导入教程1.打开网址www.bmob.cn2.登陆账号xxxxx@qq.com3.进入题目表question 表，右侧更多，点击导入数据4.准备好导入的数据文件打开提供的模板 模板.csv题目表（question）名称类型描述titlestring题目名称choseListArray选择列表 [{"item":"选选一"},{"item":"选选二","isChose":true}]typeint类型 1.单选 2.多选 3.判断picstring图片地址helpstring帮助描述bSubjectssting所属科目 1.科目一 2.科目四bModelssting所属车型 1.小车 2.货车 3.客车 4.摩托车bTypestring所属类别 关联类别表，具体看类别表（questionType）paysting付费类型 0.无需付费题 1.付费题mediaUrlstring媒体材料urlmediaTypestring媒体材料类型 video:视频 audio:音频举例，添加一个科目一题目标题：车辆因故障等原因需被牵引时，以下说法正确的是什么？选项A.前后车均应打开报警灯 b.所有车辆都应让行c.两车尽量快速行驶d.不受交通信号限制例如正确答案是A，choseList 字段就填写一下内容[{"item":"前后车均应打开报警灯","isChose":true},{"item":"所有车辆都应让行"},{"item":"两车尽量快速行驶"},{"item":"不受交通信号限制"}]Title填写 车辆因故障等原因需被牵引时，以下说法正确的是什么？截图看填写的效果如果有100道题一样的，复制100行就好了。5.格式转换由于execl 打开的默认是GBK模式，导入需要UTF8 ， 保存的时候我们选另存为 ，这里有篇教程https://jingyan.baidu.com/album/f7ff0bfc33d00f2e26bb13af.html?picindex=2也可以看这截图另存为怎么操作另存为这样保存就好了。6.Bmob控制台点击上传7.点击确定，3秒左右看到数据

Serverless实战驾校小程序【数据库设计】连载一 Serverless实战驾校小程序【数据库设计】一从今天开始，我会文字直播开发这个驾校小程序整个流程。1. 项目要求小程序端WEB管理后台时间在最短的时间内上线2. 项目功能参考驾考宝典、主栏目分为科目一、科目四、满分学习、注销恢复、资格证，包含小车、客车、摩托车等，功能包含视频讲解、章节练习、模拟考试、错题、收藏等等。 支持支付、分享、提成、提现等3. 项目选型由于要求最快时间内上线，我们小程序选择 Serverless架构。 这里使用以下技术产品小程序端：Bmob后端云+iviewVUE + Bmob后端云Bmob后端云，自带了支付，生成二维码等接口，这里集成可以快速上线。VUE 有丰富的后台模板，可以更快的做出管理后台。第一步：清晰了解需求因为已经很清楚自己要做的是驾校答题小程序，这里就不做多余的介绍了。 设计部分，由于这个项目比较小，没有专门的设计师。 尽量参考行业老大：驾校一点通与驾考宝典。第二步：数据库设计数据库参考其他驾考类小程序，优先把核心字段建立出来，尽量考虑周全， 不够后面再补。 这里注意的是，Serverless架构，主要适合做一些中小型应用，如果应用数据量很大， 尽量提前考虑分表。1. 数据表目前第一阶段暂时考虑一下表题目表题目类别表（题形）错题表收藏表成绩表用户表用户表，由于Bmob系统自带了，我就不建立了。2. 数据库文档由于使用Bmob后端云数据库，默认每条记录都带id、创建时间与更新时间，此数据表说明不带这2个字段。 题目表（question）名称类型描述titlestring题目名称choseListArray选择列表 [{"item":"选选一"},{"item":"选选二","isChose":true}]typeint类型 1.单选 2.多选 3.判断picstring图片地址videostring视频地址helpstring帮助描述bSubjectsint所属科目 1.科目一 2.科目四bModelsint所属车型 1.小车 2.货车 3.客车 4.摩托车bTypestring所属类别 关联类别表题目类别表（questionType）名称类型描述bSubjectsstring所属科目 1.科目一 2.科目四titlesting类别名称错题表名称类型描述idstring题目iduidstring用户id收藏表名称类型描述idstring题目iduidstring用户id成绩表名称类型描述timestring用时scoreint成绩设计好数据表之后，做准备工作拿到小程序的 AppID填写到Bmob控制台，应用设置-》应用配置把上面所有想好建立好的数据表添加到数据库小程序开发工具新建一个空白项目，复制BmobSDK，到utils目录引入SDK，初始化。引入SDK，初始化。文档在这里https://bmob.github.io/hydrogen-js-sdk/#/?id=%E5%88%9D%E5%A7%8B%E5%8C%96看最终效果如下。效果一：所写代码➕预览效果二：数据表变化这样我们就实现了，整个小程序开发的第一步，自动注册登陆，获取openid。 第一节就到这里，下一步就是操作业务表。

Serverless实战驾校小程序【语音读题】六 语音读题功能为了更方便查看题目，我们加入读题功能。语音读题主要应用在智能客服机器人、电子有声读物、智慧教育等领域，了解到目前市场语音合成技术，主要有讯飞语音、百度语音、腾讯语音这几家大厂。 都支持男女生声，讯飞价格比较贵，这里发现腾讯语音合成暂时不收费，腾讯云的语言合成介绍https://cloud.tencent.com/product/tts#scenarios语音合成（Text To Speech）满足已知文本生成语音的需求，打通人机交互闭环。多种音色选择，支持自定义音量、语速，为企业客户提供定制自有领域词库和个性化发音人服务，让发音更自然、更专业、更符合场景需求。语音合成广泛应用于语音导航、有声读物、标准发音领读、自动新闻播报等场景。本以为这些API厂商，直接提供了API接口，小程序里请求就好了，现实不是的，做法跟做微信支付有点类似。必须自己实现一套服务端API，服务端实现接口加密等操作。这几家都需要这样做，这里首先把需要的资料准备好。开发语言 这里选Golang，官方有服务端SDK腾讯云API密匙，自己在控制台查看并记录开发文档地址：https://cloud.tencent.com/document/api/441/18086选一台服务器，备案好域名，配置好https编写代码1.路由 beego.Router("/1/textToVoice", &controllers.CloudController{}, "post:TextToVoice") 2.控制器func (cloud *CloudController) TextToVoice() { body := cloud.Ctx.Input.CopyBody(beego.BConfig.MaxMemory) js, err := simplejson.NewJson(body) if err != nil { cloud.responseError(err) } //获取文本信息 text := js.Get("text").MustString() //判断不能为空 if strings.TrimSpace(text) == "" { cloud.responseError(fmt.Errorf("text param不能为空")) } //这里初始化大家传入自己腾讯云的key信息 client, _ := aai.NewClientWithSecretId( "id", "key", regions.Guangzhou) request := aai.NewTextToVoiceRequest() request.Text = common.StringPtr(text) request.SessionId = common.StringPtr(uuid.GetRandomString(16)) request.ModelType = common.Int64Ptr(-1) request.ModelType = common.Int64Ptr(-1) request.Speed = common.Float64Ptr(0.8) response, err := client.TextToVoice(request) // 处理异常 if _, ok := err.(*errors.TencentCloudSDKError); ok { cloud.responseError(fmt.Errorf("An API error has returned: %s", err)) } // 非SDK异常，直接失败。实际代码中可以加入其他的处理。 if err != nil { cloud.responseError(err) } // 打印返回的json字符串 var base64Str *string = response.Response.Audio fileByte, err := models.Base64Decode([]byte(*base64Str)) if err != nil { cloud.responseError(err) } fileName := uuid.GetRandomString(16) + "_" + fmt.Sprintf("%d", time.Now().Unix()) + ".wav" filePath := "/data/dyfsuda/app/restful/files/" + fileName url := "https://api.xxxx.com/files/" + fileName //把文件写入目录 if err = ioutil.WriteFile(filePath, fileByte, os.ModeAppend); err != nil { cloud.responseError(err) } if err = os.Chmod(filePath, 0777); err != nil { cloud.responseError(err) } //返回文件路径给客户端 cloud.Data["json"] = map[string]string{"url": url} cloud.ServeJSON() }这里每次的题目可能都不一样，所以就不更新到数据库了，需要的时候，调用一次接口，如果接口收费，这里就把语音文件路径保存到数据表里，每次判断数据表是否存在语音就可以了。目前开发这读题还是需要自己有服务器，如果现成的API调用就好了。这项目目前已经上线，大家可以体验下读题效果。

Serverless实战驾校小程序【考题数据采集】四 Serverless实战驾校小程序【考题练习】四由于没有数据，这次需要拿一些测试数据放到数据库。 这里想到本地采集，大家可以随意用任何后端语言，Python，PHP，Golang，Java，nodejs等等， 这里我就不用其他语言，使用接近JavaScript语法的，nodejs，采集后生成CSV文件。主要用到三个库：网络库解析库文件库这里找到一个采集的地址：http://www.jiakao.com/cnty/web/km1_tc_new.php?q=11. 选择Table 打印这效果let table = $('table'); table.each(function (index, item) { let x = $(this).text(); console.log(x) 2.提取标题由于数据库，标题title是一个单独字段，这里先把title取出来。let table = $('table'); table.each(function (index, item) { let x = $(this).find("tr>td").eq(0).text(); let t = x.split('\n\t'); console.log(t) });这里的数据[1]就是标题数据3. 提取题目内容这里不细说了，后面我会放上代码，大家自己看。 无非就是拿到A、b、c、d结果，放到一个对象里面，跟导入的格式一致就行。4.完成导入Bmob控制台导入CSV，导入后，效果如下。小程序里面，我们测试下。放代码let http = require('http'); let fs = require('fs'); let cheerio = require('cheerio'); let request = require('request'); let iconv = require('iconv-lite'); let i = 0; let url = "http://www.jiakao.com/cnty/web/km1_tc_new.php?q=1"; //初始url function fetchPage (x) { //封装了一层函数 startRequest(x); } function startRequest (x) { //采用http模块向服务器发起一次get请求 http.get(x, function (res) { let html = ''; //用来存储请求网页的整个html内容 let titles = []; res.setEncoding('binary'); //防止中文乱码 //监听data事件，每次取一块数据 res.on('data', function (chunk) { html += chunk; }); //监听end事件，如果整个网页内容的html都获取完毕，就执行回调函数 res.on('end', function () { html = iconv.decode(html, 'gb2312'); let $ = cheerio.load(html); //采用cheerio模块解析html let table = $('table'); console.log('help,choseList,title,video,type,bType,bModels,bSubjects,pic') table.each(function (index, item) { let t; let d; let tArr = []; let choseList = [] //{""item"":""6个月""} $(this).find("tr>td").each(function (i, items) { // t = $(this).eq(0).text().split('\n\t'); t = $(this).text().split('\n\t'); if (i == 0) { tArr.push(t[1]) } d = $(this).text().trim() if (i > 0 && i < 6) { if (d.indexOf('A') != -1 || d.indexOf('B') != -1 || d.indexOf('C') != -1 || d.indexOf('D') != -1) { let answerStr, answerArr; // 获取正确答案 let okStr = $(this).parent().attr('onclick') if (okStr != undefined) { answerStr = okStr.substr(25, 3) answerArr = answerStr.split(',') } d = d.split('、'); if (answerArr[0] == answerArr[1]) { choseList.push({ "\"isChose\"": true, "\"item\"": "\"" + d[1] + "\"" }) } else { choseList.push({ "\"item\"": "\"" + d[1] + "\"" }) } } } }) console.log(`,"${JSON.stringify(choseList)}",${tArr},,1,413405afba,1,1,`) }); }) }).on('error', function (err) { console.log(err); }); } fetchPage(url); //主程序开始运行总结：Bmob数据库支持CSV导入， 我们把采集到的数据输出为一个CSV即可，然后后台点击导入，采集到数据后，进行处理，分四步。拿到标题拿到结果分析出正确答案整理数据格式导出CSV由于这里100题只是为了做Demo，时间第一，并没有采集图片，如果正式上线，还需要采集图片并上传。时间关系，这一节就到这，有问题可以在下面评论。