随着域名数据统计中关于影视、书籍、游戏等需要统计的数据越来越多,且可视化需求越来越高,对“御坂关于页面”内容更新、维护不便,且无法满足自定义、多样化的可视化图表表现方案。目前需要一个后端,且能便利的支持手机移动端,实现方便的新增输入数据,并对数据进一步统计处理再可视化渲染为图表,并且渲染出来的图表可便利的在移动端、web端进行显示。
一、数据库小程序部分
之所以选择小程序,原因在于小程序具有轻后端、前端编写简单的特点,且能跨平台使用。
关键需求点:移动端数据输入、数据可视图表化、多平台渲染显示
重要技术点:跨平台支持、移动端输入数据与后台数据交互存储、数据库数据读取和加工、数据内容可视化图表
(二)数据库小程序设计方案
1.小程序开发知识(程序源文件结构)
小程序可视化的部分主要是由页面、组件两部分组成。而小程序的程序源代码结构一般由以下几个部分组成:
├─ component
│ └─ 各组件 //各组件虽然在实际的数据表上存在差异,目前组件中均存在数据库请求、页面渲染、查询等子组件内容相似,可优化
│ ├─ dmrwSinput //动漫人物组件
│ ├─ dmSinput //动漫组件
│ ├─ dsjSinput //电视剧组件
│ ├─ dySinput //电影组件
│ ├─ xsSinput //小说组件
│ ├─ yrSinput //艺人组件
│ ├─ yxrwSinput //游戏人物组件
│ └─ yxSinput //游戏组件
├─ pages
│ └─ 各页面
│ ├─ datef //数据展示分析页面(简称:“御坂世界” 小程序页面栏关键词)
│ ├─ dateint //数据查询、新增数据页面(简称:数据键入)
│ └─ index //默认首页页面(简称:数据分析)
├─ soure
│ └─ 资源
├─ utils
│ └─ 外部引用文件
└─ 根目录文件
├─ app.js
└─ app.json
2.基于小程序开发的数据结构
在需求上,“数据键入”页面需要满足功能:
- 在页面渲染时准备好 “查询组件块” 、“新增数据组件块”。//由于此两个组件块均需要对表进行操作,可在页面上写表的选择器,而将两个组件块放在同一个表选择器下,由一个共同的组件component合并,通过载入不同的表时载入组件块。这种思路层次简单,但导致不同的表需要不同的组件component,在代码上并不简洁,选择不同的表需要载入不同的组件component,只有解决表选择与组件component之间的传值问题,可简化此段代码结构
- “查询组件块”应具备根据选择的表,在输入关键词之后进行模糊搜索表中内容。对搜索到的对您可以进行删除、修改等点击操作,且在输入为空时,清除搜索的内容,以免挤占页面。搜索出来的项目应具备一定的辨识度,以便于能通过简单的关键词在搜索出来个几个占用页面不大的空间中能分辨对比出其特点。//在搜索内容外部需要添加一个判断,当输入框内容为无时清除搜索内容,在输入框有内容时进行模糊搜索。由于模糊搜索会同时搜索出多个结果,对任一一个搜索结果能展示的内容需要挑选重点显示(如名称、主要重点、评分、时间点等),且搜索的内容需要具备一定的顺序,目前设定为按综合评分来进行顺序判定。可考虑在查询块下部添加一个数据详细展示框,当查询出来的多个结果某个被选中时,可在展示框中展示详细的数据包括图
- “新增数据组件块”应能根据选择的表,载入渲染不同的输入框和选择项以便于不同的表数据录入。//根据表的不同渲染出不同的输入框和选择项。需要考虑如何将此处数据键入的页面功能和查询到数据后的修改合并。实现查询到的数据项点击修改出现在“新增数据组件块”中,并进行修改。
在页面显示上,为了辨识性,在页面范围应该有包括表选择项在内的内容组成主体页面,内部再包含并行的“查询组件块” 、“新增数据组件块”两个功能块。“查询组件块”中需要包含查询区域、模糊搜索项列区域、详细数据展示区域。“新增数据组件块”由数据提示输入区域和确认键入数据区域组成。如下简图:
针对不同的表,需要展示的数据并不相同。搜索展示数据在搜索名称、主演、人物等信息时出现,按评分从高至低排列。主要按以下:
电影表(dySinput):
- 图片 tUrl
- 名称 moName
- 主演 acTor
- 评分 MscOre
- 出品时间 prOdata
电视剧表(dsjSinput):
- 图片 tUrl
- 名称 moName
- 主演 acTor
- 评分 MscOre
- 出品时间 prOdata
艺人表(yrSinput):
- 图片 tUrl
- 名称 moName
- 评分 MscOre
- 职业 vocAtion
- 国籍 coUntry
动画表(dmSinput):
- 图片 tUrl
- 名称 moName
- 综合评分 MscOre
- 主要角色 acTor
- 出品方 proDucer
动漫人物表(dmrwSinput):
- 图片 tUrl
- 人物 moName
- 动画 frAnime
- 评分 MscOre
- 声优 voice
游戏表(yxSinput):
- 图片 tUrl
- 名称 moName
- 平台 station
- 综合评分 MscOre
游戏人物表(yxrwSinput):
- 图片 tUrl
- 名称 moName
- 游戏 frgame
- 评分 MscOre
小说表(xsSinput):
- 名称 moName
- 作者 author
- 综合评分 MscOre
小说人物表(xsrwSinput):
- 人物 moName
- 小说 frStory
- 评分 MscOre
番号表(fhSinput):
- 图片 tUrl
- 番号 fhao
- 名称 moName
- 综合评分 MscOre
里番表(lfdmSinput):
- 图片 tUrl
- 名称 moName
- 重要角色 acTor
- 综合评分 MscOre
漫画表(mhSinput):
- 图片 tUrl
- 名称 moName
- 综合评分 MscOre
1.1页面与数据的对齐
由于数据的显示、输入需要严格的对齐,需要规定每个数据项及其对应关键词名。【】用于表示选择项。
(1)表项目结构dy:['名称','外译名','主演','类型','内容','导演','编剧','出品时间','国别地域','评分','备注','图片']
快速导出字段:moName,foName,acTor,tyPe,coNtent,diRect,wrIter,prOdata,coUntry,MscOre,reMark,tUrl
电影表 | 名称 | 外译名 | 主演 | 【类型】 | 内容 | 导演 | 编剧 | 【出品时间】 | 【国别地域】 | 【评分】 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
dySinput | moName | foName | acTor | 【tyPe】 | coNtent | diRect | wrIter | 【prOdata】 | 【coUntry】 | 【MscOre】 | reMark | tUrl |
(2)表项目结构dsj:['名称','外译名','主演','类型','内容','导演','编剧','出品时间','国别地域','评分','备注','图片']
快速导出字段:moName,foName,acTor,tyPe,coNtent,diRect,wrIter,prOdata,coUntry,MscOre,reMark,tUrl
电视剧表 | 名称 | 外译名 | 主演 | 【类型】 | 内容 | 导演 | 编剧 | 【出品时间】 | 【国别地域】 | 【评分】 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
dsjSinput | moName | foName | acTor | 【tyPe】 | coNtent | diRect | wrIter | 【prOdata】 | 【coUntry】 | 【MscOre】 | reMark | tUrl |
(3)表项目结构yr:['名称','外文名','评分','职业','国籍','出生地','出生日期','星座','毕业院校','高重三围','印象作品-角色-剧情','主要成就','备注','图片']
快速导出字段:moName,foName,MscOre,vocAtion,coUntry,bthPlace,bthDate,signs,school,HHBWH,WrAcSt,achMent,reMark,tUrl
艺人表 | 名称 | 外文名 | 【评分】 | 职业 | 【国籍】 | 出生地 | 【出生日期】 | 【星座】 | 毕业院校 | 高重三围 | 印象作品-角色-剧情 | 主要成就 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
yrSinput | moName | foName | 【MscOre】 | vocAtion | 【coUntry】 | bthPlace | 【bthDate】 | 【signs】 | school | HHBWH | WrAcSt | achMent | reMark | tUrl |
(4)表项目结构dm:['名称','外译名','制作方','编剧','重要角色','国别地域','画风评分','剧情评分','综合评分','色气评分','内容','备注','图片']
快速导出字段:moName,foName,proDucer,wrIter,acTor,coUntry,PscOre,SscOre,MscOre,sexScOre,coNtent,reMark,tUrl
动画表 | 名称 | 外译名 | 制作方 | 编剧 | 重要角色 | 【国别地域】 | 【画风评分】 | 【剧情评分】 | 【综合评分】 | 【色气评分】 | 内容 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
dmSinput | moName | foName | proDucer | wrIter | acTor | 【coUntry】 | 【PscOre】 | 【SscOre】 | 【MscOre】 | 【sexScOre】 | coNtent | reMark | tUrl |
(5)表项目结构dmrw:['人物','动画','外文名','评分','声优','种族','年龄','出生日期','组织阵营','学校','地址','关键词','备注','图片']
快速导出字段:moName,frAnime,foName,MscOre,voice,race,age,bthDate,group,School,home,keyword,reMark,tUrl
动漫人物表 | 人物 | 动画 | 外文名 | 【评分】 | 声优 | 种族 | 年龄 | 出生日期 | 组织阵营 | 学校 | 地址 | 关键词 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
dmrwSinput | moName | frAnime | foName | 【MscOre】 | voice | race | age | bthDate | group | School | home | keyword | reMark | tUrl |
(6)表项目结构yx:['名称','外译名','内容','制作公司','策划','平台','类型','画风评分','剧情评分','综合评分','色气评分','备注','图片']
快速导出字段:moName,foName,coNtent,proDucer,diRect,station,tyPe,PscOre,SscOre,MscOre,sexScOre,reMark,tUrl
游戏表 | 名称 | 外译名 | 内容 | 制作公司 | 策划 | 【平台】 | 【类型】 | 【画风评分】 | 【剧情评分】 | 【综合评分】 | 【色气评分】 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
yxSinput | moName | foName | coNtent | proDucer | diRect | 【station】 | 【tyPe】 | 【PscOre】 | 【SscOre】 | 【MscOre】 | 【sexScOre】 | reMark | tUrl |
(7)表项目结构yxrw:['名称','外文名','游戏','评分','声优','种族','年龄','出生日期','组织阵营','学校','地址','关键词','备注','图片']
快速导出字段:moName,foName,frgame,MscOre,voice,race,age,bthDate,group,School,home,keyword,reMark,tUrl
游戏人物表 | 名称 | 外文名 | 游戏 | 【评分】 | 声优 | 种族 | 年龄 | 出生日期 | 组织阵营 | 学校 | 地址 | 关键词 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
yxrwSinput | moName | foName | frgame | 【MscOre】 | voice | race | age | bthDate | group | School | home | keyword | reMark | tUrl |
(8)表项目结构xs:['名称','作者','内容','类型','是否完结','综合评分','色气评分','评价','备注']
快速导出字段:moName,author,coNtent,tyPe,isComp,MscOre,sexScOre,review,reMark
小说表 | 名称 | 作者 | 内容 | 【类型】 | 【是否完结】 | 【综合评分】 | 【色气评分】 | 评价 | 备注 |
---|---|---|---|---|---|---|---|---|---|
xsSinput | moName | author | coNtent | 【tyPe】 | 【isComp】 | 【MscOre】 | 【sexScOre】 | review | reMark |
(9)表项目结构xsrw:['人物','小说','评分','组织阵营','地址','关键词','备注']
快速导出字段:moName,frStory,MscOre,group,home,keyword,reMark
小说人物表 | 人物 | 小说 | 【评分】 | 组织阵营 | 地址 | 关键词 | 备注 |
---|---|---|---|---|---|---|---|
xsrwSinput | moName | frStory | 【MscOre】 | group | home | keyword | reMark |
(10)表项目结构fh:['番号','名称','外译名','内容','关键词','主演','导演','画风评分','剧情评分','综合评分','色气评分','马赛克','字幕','备注','图片']
快速导出字段:fhao,moName,foName,coNtent,keyword,acTor,diRect,PscOre,SscOre,MscOre,sexScOre,isMosaic,isSubtitle,reMark,tUrl
番号表 | 番号 | 名称 | 外译名 | 内容 | 关键词 | 主演 | 导演 | 【画风评分】 | 【剧情评分】 | 【综合评分】 | 【色气评分】 | 【马赛克】 | 【字幕】 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
fhSinput | fhao | moName | foName | coNtent | keyword | acTor | diRect | 【PscOre】 | 【SscOre】 | 【MscOre】 | 【sexScOre】 | 【isMosaic】 | 【isSubtitle】 | reMark | tUrl |
(11)表项目结构lfdm:['名称','外译名','制作人','编剧','重要角色','画风评分','剧情评分','综合评分','色气评分','出品时间','马赛克','字幕','内容','备注','图片']
快速导出字段:moName,foName,proDucer,wrIter,acTor,PscOre,SscOre,MscOre,sexScOre,prOdata,isMosaic,isSubtitle,coNtent,reMark,tUrl
里番表 | 名称 | 外译名 | 制作人 | 编剧 | 重要角色 | 【画风评分】 | 【剧情评分】 | 【综合评分】 | 【色气评分】 | 【出品时间】 | 【马赛克】 | 【字幕】 | 内容 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
lfdmSinput | moName | foName | proDucer | wrIter | acTor | 【PscOre】 | 【SscOre】 | 【MscOre】 | 【sexScOre】 | 【prOdata】 | 【isMosaic】 | 【isSubtitle】 | coNtent | reMark | tUrl |
(12)表项目结构mh:['名称','外译名','画师','作者','重要角色','画风评分','剧情评分','综合评分','色气评分','出品时间','汉化','内容','类型','位置','备注','图片']
快速导出字段:moName,foName,painter,wrIter,acTor,PscOre,SscOre,MscOre,sexScOre,prOdata,isTrans,coNtent,tyPe,fileSite,reMark,tUrl
漫画表 | 名称 | 外译名 | 画师 | 作者 | 重要角色 | 【画风评分】 | 【剧情评分】 | 【综合评分】 | 【色气评分】 | 【出品时间】 | 【汉化】 | 内容 | 【类型】 | 位置 | 备注 | 图片 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
mhSinput | moName | foName | painter | wrIter | acTor | 【PscOre】 | 【SscOre】 | 【MscOre】 | 【sexScOre】 | 【prOdata】 | 【isTrans】 | coNtent | 【tyPe】 | fileSite | reMark | tUrl |
预计还需要设计数据结构及关键词的表
- 项目完成度表录入:项目 内容 目标值 当前值 进度
- 项目推进记录表录入:项目 内容 当前值 上次值 上次推进比
- 完成项目表录入:标题 内容 重要度 紧急度 是否完成(仅记录作用?)
1 | db.collection('system') //小程序数据库表项快速添加模板 |
数据库内容筛选删除
1 | db.collection("yxSinput") |
1.2后端数据的数据常量
各表的选择项内容对应数组值如下:
- 表选项:
biaolist: ['电影数据', '电视剧数据', '艺人数据', '动画数据','动漫人物数据','游戏数据','游戏人物','小说数据','项目完成度表','项目推进记录表','完成项目表'],
- 电影类型:
leixing: ['未知','动作','奇幻','喜剧','恐怖','冒险','爱情','警匪','科幻','战争','灾难','史诗','实验','微电影','悬疑','音乐','黑帮','纪录','公路','意识流','动画','惊悚','西部','飞车','家庭','超级英雄'],
- 游戏类型:
yxleixing: ['未知','RPG游戏','ACT游戏','AVG游戏','策略','经营','射击','益智','体育竞技','竞速','卡牌','音游','网游','养成','模拟','格斗','解密','恐怖','Rlike游戏','对抗','自由建造','无双','多人合作'],
- 游戏平台:
station:['PC','NS','PSP','手游'],
- 小说类型:
xiaoshuo:['未知','武侠','玄幻','仙侠','科幻','都市青春','穿越历史','军事幻想','游戏世界','重生','体育','变身','宅文','同人','综漫','H文'],
- 国别地域:
guobie: ['英国 England','美国 America','加拿大Canada','俄罗斯 Russia','大陆 China','希腊 Greece','法国 France','德国 Germany','日本 Japan','韩国 Korea','香港 HongKong','台湾 TaiWan','泰国 Thailand','印度 India'],
- 星座:
signs: ['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天枰座','天蝎座','射手座','魔蝎座','水瓶座','双鱼座'],
- 评分项:
score: ['0分','1分','2分','3分','4分','5分'],
具体内容输入项应该有四类。输入框组件类、下拉选项类、需点击进行修改类和不可输入修改类。根据不同表的内容不同,制作不同的由组件构成的大组件,再根据表载入不同的填表内容。
3.数据展示和分析页面
在小程序端应该主要有三个页面部分。分别是数据分析页面,此页面后面可用于展示关于页面动态的数据内容。如玩的游戏时长统计、看的视频数量统计、项目完成度等各种主要数据。下方还可以添加数据处理之后的图表。
4.数据规范
页面名称对齐
组件名称对齐
“中文缩写+S+input”
数据需求及其数据名称对应规范表
二、数据库可视化渲染页面
建立数据库的主要作用不仅仅在于有组织的进行数据记录,更是为了动态的输出记录的数据并渲染图表。
之前也一直有想其他方案解决数据可视化的问题。一个尝试就是使用支持网页的excel文档,渲染图表之后上到博客页面上。但国内的wps等办公软件对数据内容会进行检查,我数据统计中很多18禁影视、游戏数据无法通过审核分享出来。于是有阵子尝试了外国的zoho在线表格,在国内不用VPN的情况下,勉强可用,而且也不会审核数据内容,还可以创建分享图片,并加载到外部页面上去。但似乎因为加载的原因还是因为是外部引用页面的原因,加载这个外国在线表格的图表让我的页面很卡,而且这个外国的在线表格也不符合我使用国内办公软件的习惯,不便于数据的统计管理。
在通过小程序的方式建立了数据库之后,我们就可以利用一些自己编写的程序完成对数据的图形化并加载到自己的网页中。甚至我们可以产生在图形化之后进行静态化输出。
(一)数据网页可视化方案
要将数据库的数据在网页页面读取出来并且渲染表格和图形,我们需要完成以下功能。
- 数据库数据读取
- 数据的筛选、分类、统计(加工)
- 生成表格和图形(前端页面)
- 转换为图片或静态网页输出(静态化)
一开始的时候,我按照传统的大家的想法,上述这个过程应该在用户访问或者外部引用这个静态图表时触发我们的程序,从而产生读取、加工、渲染等一系列操作。但这样会导致我们设计的这个程序较为复杂,而且一次性运行,虽然让内容渲染每次都是即时的,但却无疑增加了访问、加载时的延迟,毕竟一旦触发就要经过读取、加工、渲染一系列操作,而且我的统计表必然涉及对整个数据库多张表的多个不同类型的查询统计,例如统计某类型的电影有多少部,就需要对电影表25个不同类型进行全表筛选统计,更何况还有电视剧、动漫、游戏,还有星级、国别等分类,一旦让数据读取、筛选统计加工这个环节放在访问、加载之后,比如极大的延迟访问、加载的结果反馈。
于是最优的方案我认为是把上述流程分成两个程序,我们在云开发中的云函数来分别写着两个程序———数据统计整理程序和数据渲染程序。
数据统计整理程序设置为云端定时触发,定期对数据库的数据情况进行整理统计,主要负责:
- 数据读取、筛选、统计
- 将统计结果汇总为一个数据集合写入到新的数据表中
数据渲染程序设置为HTTP访问触发,即外部访问时,负责渲染出一个页面来显示数据结果,主要负责:
- 读取汇总的数据集合
- 生成表格和图形
- 将页面内容静态化(如果需要的话)
(二)数据渲染程序
数据统计整理程序的关键在于需要生成一个我们最后渲染页面时要用的数据集合。所以我们需要先思考这个数据集合应该是怎样的结构,由哪些数据组成。我觉得从这点我们也可以体会出来,一旦涉及交互的内容,其实还是得先设计用户能够接触到的内容,只能才能来定义实现这些内容的方式。
也就是说虽然执行逻辑上,我们是先进行统计整理数据,之后再进行内容的渲染,但事实上我们在设计时,由于最终展示内容是直面用户,也就是直面需求,我们反而需要先去设计渲染内容,才能根据渲染内容来思考怎么进行数据的统计整理。
每个echarts 实例创建多个图表和坐标系等等(用 option 来描述);系列(series)表示一组数值以及他们映射成的图。包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数。
图表类型有:line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)……
1 | // 此处填入您的真实环境 ID |
1 | const tcb = require('@cloudbase/node-sdk') |
(三)数据统计整理程序
1 | // 此处填入您的真实环境 ID |