【笔记】Json数据库

发表于 | 分类于
本文字数： 2.3k | 阅读时长 ≈ 5 分钟 | 评论数：

　　突发奇想折腾了一晚上，给梦蚀做了个资料查询页面，现在点击侧边栏的梦蚀按钮不会直接跳转到DDer的分类了。
　　至于为什么会突发奇想……是因为偷看了某人的年终总结之后内心久久不能平静_(:з」∠)_，想着给亚里亚起个全名吧！取完名字又想，做个档案库查询界面吧，做好了就可以自动生成草莓县企划的人设卡了哎……
　　我们彼此思念，却再也不见。这样也好。以及额外的惊喜，刚建hexo时写的那篇怀旧小短文她居然似乎是看见了。啊……真是百感交集。( ´･ω･`)
　　然后就开始了谷歌大学夜校时间【


.+†+.

痛苦的折腾过程

　　最开始的设想是建一个数据库文件夹，每个角色单独一个文件，然后在主页创建一个script标签，用JS的setAttribute命令更改标签的src。但是src更改了之后数据却不会跟着动，谷歌了半天发现：“我们的标准就是这样的噢，js写入的外链js代码是不会被访问和执行的呢~”
　　哦。
　　然后又试了appendChild，依然不行，元素审查界面里已经改好了，但是它就是不访问，不执行，不显示。现在回想一下可能跟我文件里写的是全局变量有关……？
　　最后不知道在记忆的哪个角落搜索到一个叫JSON的东西，谷歌学习之，终于大功告成(´；ω；｀)

JSON的写法

　　说来惭愧，直到今天之前我一直以为json是“JavaScript's son”的缩写。
　　而且现在我又忘了那个n是啥了【算了这不重要，反正意思好像是差不多的，emmmmm

　　用json做数据库还是蛮简单的，写法跟JS差不多。首先确定一个模板，像这样：

1
2
3
4
5
6
7
8
9
var _00Name = {
	"fname":"???",
	"sname":"???",
	"gen":"???",
	"birth":"???",
	"age":"???",
	"pro":"???",
	"adr":"???",
}

　　_00Name是人物资料的识别编号，我本来想着是设置成【地区编号+姓名】的格式，然后报错了好几次，发现这个数组名？还是什么名，反正不能用数字开头……最后在前面加了个下划线就好了【这是什么奇怪的设计？？？
　　还有一点就是不要把自定义变量的名字设置成name，会跟JS自带的函数冲突，我没试过会不会报错，但是按常理来说肯定会报的【

主页面的写法

1
2
3
4
5
<div class="file-column1">
	姓名：<p id="cr-name" class="fill-in"></p>
	生日/年龄：<p id="cr-age" class="fill-in"></p>
	职业：<p id="cr-pro" class="fill-in">???</p>
</div>

　　这个好像没啥可做笔记的了，就是div套div各种flex排版啦，然后记得给每个填充文字部分都加一个id，方便后续用JS替换内容。

主JS的写法

1
2
3
4
5
6
7
8
9
function fillDoc(ereaIn,nameIn){
	var crname = eval("_"+ereaIn+nameIn);
	document.getElementById("cr-name").innerHTML=crname.fname;
	document.getElementById("cr-spell").innerHTML=crname.sname;
	document.getElementById("cr-gen").innerHTML=crname.gen;
	document.getElementById("cr-age").innerHTML=crname.birth+" ("+crname.age+")";
	document.getElementById("cr-adr").innerHTML=ereaIn+" 区 - "+crname.adr;
	document.getElementById("cr-pro").innerHTML=crname.pro;
}

　　用eval(数组名)来访问人物资料，用XXX.变量名的格式来写入数据。
　　不知道为啥用【`${}`】的标签写入数据的时候会出点问题，所以我还是全部用引号和加号了，反正SublimeText打引号也挺方便的【

未解决的问题

　　因为人物列表太长其实没几个人名都是字母想给文字设计一个点击回到首页的功能，是通过href="#小标题名"的方法实现的，结果调试的时候发现虽然前台能够跳转但调试器上会报错……试了之前用这个方法链的几篇文章全部报错了，因为不影响实际使用所以现在才发现OTL
　　也不知道啥原因，找时间谷歌解决一下好了【