御坂可视化数据库需求方案

一、需求缘由

随着域名数据统计中关于影视、书籍、游戏等需要统计的数据越来越多,且可视化需求越来越高,对“御坂关于页面”内容更新、维护不便,且无法满足自定义、多样化的可视化图表表现方案。目前需要一个后端,且能便利的支持手机移动端,实现方便的新增输入数据,并对数据进一步统计处理再可视化渲染为图表,并且渲染出来的图表可便利的在移动端、web端进行显示。

关键需求点:移动端数据输入、数据可视图表化、多平台渲染显示
重要技术点:跨平台支持、移动端输入数据与后台数据交互存储、数据库数据读取和加工、数据内容可视化图表

二、具体方案

(一)基于小程序开发

小程序具有轻后端、前端编写简单的特点,且能跨平台使用。

(二)页面内容

小程序可视化的部分主要是由页面、组件两部分组成。而小程序的程序源代码结构一般由以下几个部分组成:

├─ component
│ └─ 各组件 //各组件虽然在实际的数据表上存在差异,目前组件中均存在数据库请求、页面渲染、查询等子组件内容相似,可优化
│ ├─ dmrwSinput //动漫人物组件
│ ├─ dmSinput //动漫组件
│ ├─ dsjSinput //电视剧组件
│ ├─ dySinput //电影组件
│ ├─ xsSinput //小说组件
│ ├─ yrSinput //艺人组件
│ ├─ yxrwSinput //游戏人物组件
│ └─ yxSinput //游戏组件
├─ pages
│ └─ 各页面
│ ├─ datef //数据展示分析页面(简称:“御坂世界” 小程序页面栏关键词)
│ ├─ dateint //数据查询、新增数据页面(简称:数据键入)
│ └─ index //默认首页页面(简称:数据分析)
├─ soure
│ └─ 资源
├─ utils
│ └─ 外部引用文件
└─ 根目录文件
├─ app.js
└─ app.json

1.数据查询、新增页面(页面简称:数据键入)

在需求上,“数据键入”页面需要满足功能:

  • 在页面渲染时准备好 “查询组件块” 、“新增数据组件块”//由于此两个组件块均需要对表进行操作,可在页面上写表的选择器,而将两个组件块放在同一个表选择器下,由一个共同的组件component合并,通过载入不同的表时载入组件块。这种思路层次简单,但导致不同的表需要不同的组件component,在代码上并不简洁,选择不同的表需要载入不同的组件component,只有解决表选择与组件component之间的传值问题,可简化此段代码结构
  • “查询组件块”应具备根据选择的表,在输入关键词之后进行模糊搜索表中内容。对搜索到的对您可以进行删除、修改等点击操作,且在输入为空时,清除搜索的内容,以免挤占页面。搜索出来的项目应具备一定的辨识度,以便于能通过简单的关键词在搜索出来个几个占用页面不大的空间中能分辨对比出其特点。//在搜索内容外部需要添加一个判断,当输入框内容为无时清除搜索内容,在输入框有内容时进行模糊搜索。由于模糊搜索会同时搜索出多个结果,对任一一个搜索结果能展示的内容需要挑选重点显示(如名称、主要重点、评分、时间点等),且搜索的内容需要具备一定的顺序,目前设定为按综合评分来进行顺序判定。可考虑在查询块下部添加一个数据详细展示框,当查询出来的多个结果某个被选中时,可在展示框中展示详细的数据包括图
  • “新增数据组件块”应能根据选择的表,载入渲染不同的输入框和选择项以便于不同的表数据录入。//根据表的不同渲染出不同的输入框和选择项。需要考虑如何将此处数据键入的页面功能和查询到数据后的修改合并。实现查询到的数据项点击修改出现在“新增数据组件块”中,并进行修改。

在页面显示上,为了辨识性,在页面范围应该有包括表选择项在内的内容组成主体页面,内部再包含并行的“查询组件块” 、“新增数据组件块”两个功能块。“查询组件块”中需要包含查询区域、模糊搜索项列区域、详细数据展示区域。“新增数据组件块”由数据提示输入区域和确认键入数据区域组成。如下简图:

1.1页面与数据的对齐

由于数据的显示、输入需要严格的对齐,需要规定每个数据项及其对应关键词名。【】用于表示选择项。

(1)表项目结构dy:['名称','外译名','主演','类型','内容','导演','编剧','出品时间','国别地域','评分','备注','图片']

电影表 名称 外译名 主演 【类型】 内容 导演 编剧 【出品时间】 【国别地域】 【评分】 备注 图片
dySinput moName foName acTor 【tyPe】 coNtent diRect wrIter 【prOdata】 【coUntry】 【scOre】 reMark tUrl

(2)表项目结构dsj:['名称','外译名','主演','类型','内容','导演','编剧','出品时间','国别地域','评分','备注','图片']

电视剧表 名称 外译名 主演 【类型】 内容 导演 编剧 【出品时间】 【国别地域】 【评分】 备注 图片
dsjSinput moName foName acTor 【tyPe】 coNtent diRect wrIter 【prOdata】 【coUntry】 【scOre】 reMark tUrl

(3)表项目结构yr:['名称','外文名','评分','职业','国籍','出生地','出生日期','星座','毕业院校','高重三围','印象作品-角色-剧情','主要成就','备注','图片']

艺人表 名称 外文名 【评分】 职业 【国籍】 出生地 【出生日期】 【星座】 毕业院校 高重三围 印象作品-角色-剧情 主要成就 备注 图片
yrSinput moName foName 【scOre】 vocAtion 【coUntry】 bthPlace 【bthDate】 【signs】 school HHBWH WrAcSt achMent reMark tUrl

(4)表项目结构dm:['名称','外译名','制作方','编剧','重要角色','国别地域','画风评分','剧情评分','综合评分','色气评分','内容','备注','图片']

动画表 名称 外译名 制作方 编剧 重要角色 【国别地域】 【画风评分】 【剧情评分】 【综合评分】 【色气评分】 内容 备注 图片
dmSinput moName foName proDucer wrIter acTor 【coUntry】 【PscOre】 【SscOre】 【MscOre】 【sexScOre】 coNtent reMark tUrl

(5)表项目结构dmrw:['人物','动画','外文名','评分','声优','种族','年龄','出生日期','组织阵营','学校','地址','关键词','备注','图片']

动漫人物表 人物 动画 外文名 【评分】 声优 种族 年龄 出生日期 组织阵营 学校 地址 关键词 备注 图片
dmrwSinput moName frAnime foName 【scOre】 voice race age bthDate group School home keyword reMark tUrl

(6)表项目结构yx:['名称','外译名','内容','制作公司','策划','平台','类型','画风评分','剧情评分','综合评分','色气评分','备注','图片']

游戏表 名称 外译名 内容 制作公司 策划 【平台】 【类型】 【画风评分】 【剧情评分】 【综合评分】 【色气评分】 备注 图片
yxSinput moName foName coNtent proDucer diRect 【station】 【tyPe】 【PscOre】 【SscOre】 【MscOre】 【sexScOre】 reMark tUrl

(7)表项目结构yxrw:['名称','外文名','游戏','评分','声优','种族','年龄','出生日期','组织阵营','学校','地址','关键词','备注','图片']

游戏人物表 名称 外文名 游戏 【评分】 声优 种族 年龄 出生日期 组织阵营 学校 地址 关键词 备注 图片
yxrwSinput moName foName frgame 【scOre】 voice race age bthDate group School home keyword reMark tUrl

(8)表项目结构xs:['名称','作者','内容','类型','是否完结','综合评分','色气评分','评价','备注']

小说表 名称 作者 内容 【类型】 【是否完结】 【综合评分】 【色气评分】 评价 备注
xsSinput moName author coNtent 【tyPe】 【isComp】 【MscOre】 【sexScOre】 review reMark

(9)表项目结构xsrw:['人物','小说','评分','组织阵营','地址','关键词','备注']

小说人物表 人物 小说 【评分】 组织阵营 地址 关键词 备注
xsrwSinput moName frStory 【scOre】 group home keyword reMark

(10)表项目结构fh:['番号','名称','外译名','内容','关键词','主演','导演','画风评分','剧情评分','综合评分','色气评分','马赛克','字幕','备注','图片']

番号表 番号 名称 外译名 内容 关键词 主演 导演 【画风评分】 【剧情评分】 【综合评分】 【色气评分】 【马赛克】 【字幕】 备注 图片
fhSinput fhao moName foName coNtent keyword acTor diRect 【PscOre】 【SscOre】 【MscOre】 【sexScOre】 【isMosaic】 【isSubtitle】 reMark tUrl

(11)表项目结构lfdm:['名称','外译名','制作人','编剧','重要角色','画风评分','剧情评分','综合评分','色气评分','出品时间','马赛克','字幕','内容','备注','图片']

里番表 名称 外译名 制作人 编剧 重要角色 【画风评分】 【剧情评分】 【综合评分】 【色气评分】 【出品时间】 【马赛克】 【字幕】 内容 备注 图片
lfdmSinput moName foName proDucer wrIter acTor 【PscOre】 【SscOre】 【MscOre】 【sexScOre】 【prOdata】 【isMosaic】 【isSubtitle】 coNtent reMark tUrl

(12)表项目结构mh:['名称','外译名','画师','作者','重要角色','画风评分','剧情评分','综合评分','色气评分','出品时间','汉化','内容','类型','位置','备注','图片']

漫画表 名称 外译名 画师 作者 重要角色 【画风评分】 【剧情评分】 【综合评分】 【色气评分】 【出品时间】 【汉化】 内容 【类型】 位置 备注 图片
mhSinput moName foName painter wrIter acTor 【PscOre】 【SscOre】 【MscOre】 【sexScOre】 【prOdata】 【isTrans】 coNtent 【tyPe】 fileSite reMark tUrl

预计还需要设计数据结构及关键词的表

  • 项目完成度表录入:项目 内容 目标值 当前值 进度
  • 项目推进记录表录入:项目 内容 当前值 上次值 上次推进比
  • 完成项目表录入:标题 内容 重要度 紧急度 是否完成(仅记录作用?)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
db.collection('system')  //小程序数据库表项快速添加模板
.add({
data: [
{
dy:['名称','外译名','主演','类型','内容','导演','编剧','出品时间','国别地域','评分','备注','图片'],
},
{
dsj:['名称','外译名','主演','类型','内容','导演','编剧','出品时间','国别地域','评分','备注','图片'],
},
{
yr:['名称','外文名','评分','职业','国籍','出生地','出生日期','星座','毕业院校','高重三围','印象作品-角色-剧情','主要成就','备注','图片']
},
{
dm:['名称','外译名','制作方','编剧','重要角色','国别地域','画风评分','剧情评分','综合评分','色气评分','内容','备注','图片']
},{
dmrw:['人物','动画','外文名','评分','声优','种族','年龄','出生日期','组织阵营','学校','地址','关键词','备注','图片']
},
{
yx:['名称','外译名','内容','制作公司','策划','平台','类型','画风评分','剧情评分','综合评分','色气评分','备注','图片']
},
{
yxrw:['名称','外文名','游戏','评分','声优','种族','年龄','出生日期','组织阵营','学校','地址','关键词','备注','图片']
},
{
xs:['名称','作者','内容','类型','是否完结','综合评分','色气评分','评价','备注']
},{
xsrw:['人物','小说','评分','组织阵营','地址','关键词','备注']
},
{
fh:['番号','名称','外译名','内容','关键词','主演','导演','画风评分','剧情评分','综合评分','色气评分','马赛克','字幕','备注','图片']
},{
lfdm:['名称','外译名','制作人','编剧','重要角色','画风评分','剧情评分','综合评分','色气评分','出品时间','马赛克','字幕','内容','备注','图片']
},
{
mh:['名称','外译名','画师','作者','重要角色','画风评分','剧情评分','综合评分','色气评分','出品时间','汉化','内容','类型','位置','备注','图片']
},
]
})

1.2后端数据的数据常量

各表的选择项内容对应数组值如下:

  • 表选项:biaolist: ['电影数据', '电视剧数据', '艺人数据', '动画数据','动漫人物数据','游戏数据','游戏人物','小说数据','项目完成度表','项目推进记录表','完成项目表'],
  • 电影类型:leixing: ['未知','动作','奇幻','喜剧','恐怖','冒险','爱情','警匪','科幻','战争','灾难','史诗','实验','微电影','悬疑','音乐','黑帮','纪录','公路','意识流','动画','惊悚','西部','飞车','家庭','超级英雄'],
  • 游戏类型:yxleixing: ['未知','RPG','ACT','AVG','ACT','策略','经营','FPS','益智','体育竞技','竞速','卡牌','音游','网游','养成','模拟','格斗','解密','恐怖','Rlike','对抗','自由建造'],
  • 游戏平台:station:['PC','NS','PSP','手游'],
  • 小说类型:xiaoshuo:['未知','武侠','玄幻','仙侠','科幻','都市青春','穿越历史','军事幻想','游戏世界','重生','体育','变身','宅文','同人','综漫','H文'],
  • 国别地域:guobie: ['英国 England','美国 America','加拿大Canada','俄罗斯 Russia','大陆 China','希腊 Greece','法国 France','德国 Germany','日本 Japan','韩国 Korea','香港 HongKong','台湾 TaiWan','泰国 Thailand','印度 India'],
  • 星座:signs: ['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天枰座','天蝎座','射手座','魔蝎座','水瓶座','双鱼座'],
  • 评分项:score: ['1分','2分','3分','4分','5分'],

具体内容输入项应该有四类。输入框组件类、下拉选项类、需点击进行修改类和不可输入修改类。根据不同表的内容不同,制作不同的由组件构成的大组件,再根据表载入不同的填表内容。

2.数据展示和分析页面

在小程序端应该主要有三个页面部分。分别是数据分析页面,此页面后面可用于展示关于页面动态的数据内容。如玩的游戏时长统计、看的视频数量统计、项目完成度等各种主要数据。下方还可以添加数据处理之后的图表。

三、数据对齐

页面名称对齐

组件名称对齐
“中文缩写+S+input”
数据需求及其数据名称对应规范表

关于生成静态数据图片再用于其他页面引用的想法

小程序数据库中的数据经过统计、汇总之后再生成一个页面,同时生成一张图片,这张图片再由御坂关于页面,这样即保证了静态页面的快速访问,也让页面可以丰富、动态的显示数据内容。

-------------本文结束感谢您的阅读-------------