说明

思路来源于 shinigamisakuragi/tf ,发现逻辑不难才敢自己上手…

自己用 vue 实现的,主要逻辑没怎么参考上面的代码。

只简单地实现完成的显示界面,几个命令。

历史命令,tab 补全想做来着…再说咯。(大概不会有下文了)

效果

点击这里试一试

homepage

思路

思路很简单,终端显示命令,类似于 vue 教程里的 ToDoList,写一条命令,便把该命令加到一个 list,vue 会自己渲染上去。

重要点也都写在代码了…

输入命令就是一个隐藏了外表的 input,有没有更好的实现方式呢?

取自己博客上的文章显示在终端

我想实现,一个命令,把自己博客上的文章以 a 标签全部显示到终端,然后点击就阔以查看。

因为博客使用 hexo 搭建的,要取文章的话就必须请求归档页,再自己解析网页,获取到自己想要的信息。(标题,url)

本来觉得挺难的,没想到意外的顺利。

用了 axios,代码中是 this.$ajax ,因为我把 axios 全局注册为 ajax,方便使用。

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
this.$axios({
method: "get",
url: this.blog.archiveUrl
}).then(response => {
let parser = new DOMParser();
let htmlDoc = parser.parseFromString(response.data, "text/html");
let h3s = htmlDoc.getElementsByTagName(this.blog.label);//取所有文章信息

//这里出了错 index 会出现 length, item 等值
//所以解析 xml 失败,手机上不能忽略这个错 直接加载失败
for (let index in h3s) {
if (!isNaN(index)) {
let titleUrl = h3s[index].innerHTML;
let doc = parser.parseFromString(titleUrl, "text/xml");
let a = doc.firstChild;
//另外设置
a.setAttribute("href", this.blog.site + a.getAttribute("href"));
a.setAttribute("target", "_BLANK"); //新建窗口打开文章
a.setAttribute("style", " color: cadetblue;"); //标题颜色
//标签转文字 方便插入网页
titleUrl = a.outerHTML;
this.addCommandWithoutTime("url", titleUrl);
} else {
console.log(index);
}
}
});

对应的归档页面是 这个

遇到 error : 解析 xml 失败,电脑浏览器可以忽略这个错误,但是手机上就直接加载不出来获取的文章。

经过不断地查询,发现时是 let index in h3s 时,index 的值会出现 length ,item 等值。因为按理说上面的 h3s 应该是一个存了对象的数组,key 应该为数字才对。没仔细研究为什么,总之排除了那些非数字的 key 就能解决问题了,如上。

因为从归档或取的文章 url 是相对于源的相对路径,所以自己又手动修改文章 url。

命令匹配

简单地用 switch 匹配。

switch 里使用正则表达式,要这样。

1
2
3
4
5
switch (command) {
case /rm[ a-zA-Z]*/.test(command) ? command : false:
this.Egg();
break;
}

vuejs 动态添加数据,滚动条滚动到底部问题

命令向屏幕刷新,输入命令的区域需要一直保持在 div 底部哇。

因为vue视图渲染和取DOM之间有一个时间差,导致取DOM的时候,元素还没有渲染出来,所以取到的scrollHeight不足。

讨论–解决方法,此问题被忽略的答案

update 钩子函数。

1
2
3
4
5
updated: function() {
document.getElementById("main").scrollTop = document.getElementById(
"command"
).scrollHeight;
}

ReferenceError: webpackJsonp is not defined

本地调试没问题,部署到容器就报这个错。

百度有解决方式。

hexo 上传自己的页面

hexo 是部署到 coding 的,想把自己的这个页面也放上去,放在 hexo 的静态资源文件夹,不行。访问 https://hqweay.cn/tf.html 的时候,被 hexo 的路由控制了。

需要放在 theme 的静态资源目录下,这样部署上去才能正常访问。

其他

配置分离之类的暂不提。