system: [SYSTEM]

user: 3. 系统设计 3.1. 业务流程设计 本系统首先进入小程序的个人主页，在这里用户可以选择登录，用户登录后可以使用本系统的全部功能，包括媒体浏览、积分答题、教程学习、演出订票的功能；其中媒体浏览包括：文章阅读与收藏、视频观看与点赞、图片浏览。如果用户选择不登录也可以直接使用媒体浏览功能，而对于评论、答题和订票功能等需要用户登录信息的模块，系统将提示用户未登录并跳转至个人中心引导用户登录，在用户登录后方可正常使用相应功能。 3.2. 系统整体架构 本系统采用小程序的云开发模式，这是一种Serverless模式，为用户提供了云函数、云数据库、云存储等功能 [ 5 ]，其中经典曲目、教学视频、图片等均放到云存储中，关于用户的积分等信息采用云数据库形式。系统功能主要分为答题积分模块、多媒体浏览模块、教程学习模块、演出订座模块四个模块。该平台的功能结构如图1所示。 图1. 赣南采茶戏聚合平台功能结构图 3.3. 数据采集和部分数据库设计 该小程序的媒体数据主要由文章数据、视频数据构成。由于互联网上的采茶戏相关报道十分散乱，不同站点使用的文章格式也是大不相同，为了更加精准地获取采茶戏相关数据，文章数据采集部分主要从“中国非物质文化遗产网(http://ihchina.com/)”中获取相关文章。首先通过页面元素审查获取页面文章的URL，通过requests来对页面进行请求，并将返回的数据转为json格式，解析链接，将文章的文字内容保存为txt格式，连同相应的文章一起保存至同一个文件夹中。再使用os库读取文件夹中所有的文章标题和文章内容，通过xlrt库写入excel文件中，保存时将excel文件保存为csv格式。将相关图片上传至小程序云存储中，将云端数据访问链接保存至本地，添加至之前保存的csv文件中即可完成文章数据的采集工作。 该小程序的视频数据主要分布在优酷视频网、戏曲百科网等网站，由于需要获取大量数据，依靠人工获取需要耗费较多时间，因此也通过Python爬虫实现自动化爬取数据。首先在代码中导入requests和lxml库，这两个库可以实现请求网页数据以及筛选数据的功能。通过正则表达匹配“采茶戏”相关的视频以及相应的视频名称，并且将其保存至本地文件夹。再使用python的os库读取文件夹中所有的视频名，通过xlrt库将所有文件名全部写入excel文件中，保存时将excel文件保存为csv格式。视频上传至小程序云存储中，将云端数据的访问链接保存至本地，添加至之前保存的csv文件中即可完成视频数据的采集工作。 小程序云数据库使用的是MongoDB数据库，MongoDB是一个轻量级的非关系型数据库，相比于传统的Mysql等关系型数据库，它具有以下几个显著的优点：采用文档结构的存储方式，通过一系列的Key-Value键值对表示数据，开发以及获取数据更加便捷；热数据被存储在物理内存中，读写更加迅速；支持全文索引、复合索引、单间索引、地理空间索引，查询数据更加高效。由于本平台需要存储大量的图片、视频、文章，这对于数据库的响应要求比较高，并且云数据库开发时可以导入或导出JSON格式或CSV格式，为批量数据处理提供了便利，故采用云数据库作为本平台数据库，实现Serverless模式。在这里分别以Answer表(答题表)以及Order表(订单表)为例，详见表1和表2。 Table 1 Answer for 字段 类型 备注 _id string 题目序号(主键) option* object 题目选项 question string 问答题目 right_answer string 正确选项 表1. 答题表 *题目选项option以对象的格式存储，以键值对的形式对应各个选项。例如：{“A”：“这是A选项”，“B”：“这是B选项”}。 Table 2 Order for 字段 类型 备注 _id string 订单标识符(主键) _openid string 用户标识符(外键) poster string 演出海报链接 price number 订单价格 seat* array 预订的位置 showTime string 演出开始时间 time array 订单生成时间 title string 演出名称 username string 用户昵称 isTrue number 是否为有效订单0：无效 1：有效 表2. 订单表 *座位以数组–数组–对象的三层嵌套格式存储，首先将座位按列储于第一层数组中，再将每一列从前往后的座位都按照对象的格式存储于第二层的数组中，在最内层的单个座位对象中用键值对的形式存储座位的价格以及座位初始状态码。座位状态码有：1：可选择；2：当前选择；3：已售出。 3.4. 系统功能实现 3.4.1. 答题积分模块 用户选择答题积分Tab页，在Page的onload函数中读取answer数据库拉取答题列表，用户选择其中的一个答题项进行答题，系统判断用户是否登录，如果没有登录则提示用户尚未登录，并跳转到我的界面引导用户登录，用户点击登陆按钮完成登录后回到答题界面，读取question数据库获取题目，一共10题，用户开始答题，其中可通过上一题回到之前的题目，也可通过下一题按钮暂时跳过一些题，最后用户提交时，核对是否有未完成的答题，如果有则提示用户并让用户继续答题，如果全部答题完毕则核对答案计算积分，并累加积分。详细见流程图，如图2所示。 3.4.2. 媒体浏览模块 媒体浏览部分涵盖了三个版块：a. 视频版块，b. 图片版块，c. 文章版块。 a. 视频版块：用户选择视频Tab页，在Page的onload函数中读取video数据库中视频列表，用户选择其中一项即可跳转至视频详情页。视频详情页通过onload函数读取用户所选视频的相关信息：视频、视频标题、视频上传时间、视频简介等。视频详情页中采用video组件来绑定视频媒体文件，text组件来绑定视频标题和视频详情内容。逻辑层从video数据库中读取视频的相关数据并动态绑定至页面中的相应变量，如将视频地址绑定到video组件的src属性中、将视频标题绑定至标题text组件中等。 图2. 答题流程图 b. 图片版块：用户选择主界面的“精美图集”跳转至图片展示页面，通过Page的onload函数读取photo数据库获得图片列表。图片详情页在WXSS中使用column-count属性设置列数，将图片布局分为两列，使用flex布局，读取photo数据库中的图片链接并添加到图片数组中，通过监听image组件的bindload事件来获取图片的高度，并将下一张图片添加至总高度更短的一列中，从而实现了瀑布流式的图片展示。用户可以通过点击图片来查看每一张图片的详情信息。用户点击图片后将会触发绑定的setPhotoStatus事件，setPhotoStatus事件将会通过当前被点击图片的id在图片数组中查找到该图片的相关信息并通过绑定view中的text组件以抽屉页的形式展示。 c. 文章版块：用户由主页的精选文章列表以及主页的“相关报道”模块进入文章列表页，由onload函数来读取article数据库并拉取文章列表，用户选择其中一项即可跳转至详情页。文章详情页通过onload函数读取用户所选文章的在article数据库中的相关信息：文章内容、文章标题、文章作者、文章发布时间、文章图片，并将这些数据动态绑定到文章详情页的相应变量中。用户可以通过点击文章底部的收藏键来实现对文章的收藏。 3.4.3. 教程学习模块 教程学习模块可以分为三个版块：a. 教程简介；b. 教程视频；c. 用户评论。用户选择主页上的“戏曲教学”进入教程学习模块，页面通过onload函数读取classes数据库以及comments数据库拉取教程简介、教程视频列表、用户评论。评论界面中用户可以通过在输入栏输入评论信息，点击发送按钮后将会触发绑定的submit事件函数，submit事件函数将会对评论信息进行非空验证，验证通过后将会向comments数据库中添加一条包含用户昵称、用户头像、评论信息、评论时间的记录，添加完毕后重新遍历读取comments数据库，利用setData方法来刷新页面评论数据以实现实时更新数据。 3.4.4. 演出订座模块 用户选择演出Tab页，Page的onload函数读取showlist数据库并拉取演出信息列表。用户通过点击选择演出，触发绑定的gotoDetail事件来向下一个页面传递用户选择的演出序号，并跳转至演出详情页。通过Page的onload函数读取showlist数据库中id字段与传入参数相对应的演出信息并在前端展示，用户可以在演出详情页浏览演出的相关信息以及订票、导航。通过点击定位图标可以跳转至导航页，采用腾讯地图SDK，从qqmap-wx-jssdk.min.js中导入腾讯地图的相关接口，并且通过向该接口传递地址信息获取演出地点位置以及地图信息。用户也可以选择点击立即购票图标跳转至选座界面，选座页面传入演出序号参数，Page的onload函数查询seat数据库中相同演出序号的座位信息并在前端展示。用户选择想要订购的座位并提交订单，order数据库中将会添加一条包含用户openid、用户名、演出时间、演出名称、订座信息、价格、订单生成时间的记录，提交订单后用户将被引导至订单页进行付款，订单页通过Page的onload函数读取order数据库与当前登录用户openid一致的订单信息并在前端展示，用户将会有十分钟时间进行付款操作，超时订单将会失效。详细流程图如图3所示。 图3. 订票部分流程图