【腾讯云的1001种玩法】利用腾讯云搭建实用小工具

腾讯公司一直以来产品就深受我的喜爱,自QQ以来,到微信支付再到LOL,所以这次选择腾讯云服务器作为我的研究对象,一来是亲切感,二来是相信腾讯的技术实力。

作为一个java程序猿,一直以来都是在于时间做赛跑,很多时间花费在软件启动的等待上面,这对于我来说是一种浪费。我个人以为,如果只是做一个简单的demo片段,或者测试某一段代码,就得去开启某些占用内存的IDE,并且花费数秒甚至1分钟去等待软件启动这很不明智,所以我打算打造一个个人常用工具集,当然这对于我来说是有用的,而对于其它人来说,同样也是有用的。

工具1:HTML代码演示工具

逛过W3School的人都知道,W3school上面有一个可以测试HTML代码的工具,非常好用,而且轻巧,而且好用而且轻巧,重要的事我一般说2遍。那么我为什么还要再造轮子?原因很简单,一个是想知道它的运行原理,之前没认真研究过,所以我想知道它是怎么运作的,这也是我的求知欲作祟,二来是因为W3school的服务器这一年来明显的感觉不行了,以前代码提交以后可以立即响应,而现在代码提交了等待的时间可以跟我打开IDE有的拼了,这里所以还是要赞一下腾讯云服务器,响应速度快。还有第三个原因,他们现在全都是谷歌以及百度的广告在旁边....

	

然后就是环境搭建演示了

我的后端使用的tomcat+java+mysql的技术,前端使用的H5技术,环境部署见百度,传送门

这个工具由于基本不与后端做数据交互,所以就别问我后端是怎么写的了,因为说了也没用,我们就看前端吧~

演示地址

此工具使用的是HTML5技术,利用ActiveXObject 创建而成,由于js的安全性考虑,只可以本地使用这个插件,所以各位看客可以下载到本地使用,直接右键查看源代码即可。

代码解析:

<meta name="viewport" content="width=device-width, initial-scale=1"  />
<!--响应式页面-->
<!--[if  lt IE 9]>
<script  src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

上面这一段是响应式页面设置的meta,使得这个页面可以在手机或者pad上面也可以正常浏览

这里是核心js部分,我将在代码中注释出关键点

<script>
function submitTryit(){
	var fso = new ActiveXObject("Scripting.FileSystemObject"); //这里创建ActiveXObject 对象,此对象只适用于IE模式
	var Html_src=document.location; //这里获取浏览器地址栏地址

	document.getElementById("HTML_src").value=Html_src;	//暂存数据
	Html_src=document.getElementById("HTML_src").value; //取值
	Html_src2=Html_src.substring(0,Html_src.lastIndexOf("/")+1)+"ceshi.html"; //操作字符串
	var file=Html_src2.substring(8); //去掉协议头
	
	if(fso.FileExists(file)){
		fso.DeleteFolder (file);
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}else{
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}	
	var content=document.getElementById("TestCode").textContent;
	document.getElementById("i").src=file;
	f1.WriteLine(content);
	console.log("文件写入成功");
	f1.Close();
	//location.reload();	//自动刷新会丢失代码
	var totalzifushu=content.length;
	console.log("字符数:"+content.length);
	document.getElementById("zitotal").value=totalzifushu;
}
</script>

前面的代码没有上面亮点,值得一提的是这一段代码:

document.getElementById("HTML_src").value=Html_src;	//暂存数据
Html_src=document.getElementById("HTML_src").value; //取值
Html_src2=Html_src.substring(0,Html_src.lastIndexOf("/")+1)+"ceshi.html"; //操作字符串
var file=Html_src2.substring(8); //去掉协议头

这里是讲地址栏的地址进行一次字符串的截取操作,然后拼接生成的那个页面,组成新的地址,以便于在iframe中使用。

document.getElementById("HTML_src").value=Html_src;	//暂存数据
Html_src=document.getElementById("HTML_src").value; //取值

这里是在那个隐藏的input那里做一个数据的暂存然后取值,由于js的可以操作DOM文档独特性,有时候这一招十分管用。

if(fso.FileExists(file)){
		fso.DeleteFolder (file);
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}else{
		var f1 = fso.CreateTextFile(file, true);
		if(fso.FileExists(file)){
			console.log("文件创建成功");
		}
	}	

这里的代码则是对文件做一个判断,是否已经存在文件了,如果不存在,则创建,如果已存在,删除旧文件然后创建新文件

var content=document.getElementById("TestCode").textContent;
document.getElementById("i").src=file;
f1.WriteLine(content);
console.log("文件写入成功");

这里则是讲那个文本区域里面的值写入到创建的文件中,js里面我没有查到有流的说法,这估计也是安全性考虑吧。

这里创建的文件将会在iframe当中被引用,所以在右侧即可看到那个新生成的HTML文件,不过由于刷新的问题不好处理,所以我只得让其手动刷新,当然此工具还提供了一个小工具,那就是字符数个数的读取,比如您有一大片文档需要统计字数(事实上这样的事情时常发生),您可以直接粘贴到文本域里面,它将会自动给你统计出来。也算是在W3School的工具上面重写并拓展了其功能吧。

CSS部分也就是利用的CSS3的媒体查询,来匹配移动设备,这不是我所想讲的,如有兴趣,可以直接向我提问,或者百度吧。

结论:

此工具也是我上班时候闲暇时间写的,本是为了方便自己,以及一个同事的,所以当时并没有考虑到将其置于服务器上,由于忽略了ActiveXObject组建不可以跨域的问题,所以各位看客没办法在服务器段执行代码,如果有时间,我会考虑使用java代码重写这个小工具,以便于服务器端也可以方便使用,这个工具当然优点也是有的,比如在断网的情况下呢?如果您刚好下载了这个工具,您就可以方便的在手机或者pad或者PC上面做代码测试了,您多半不会在手机安装HTML的IDE不是么?

相关推荐

【腾讯云的1001种玩法】激发云力量--打造我的云端工具集

【腾讯云的1001种玩法】利用腾讯云搭建个人博客

最佳上云实践机

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在Ubuntu 14.04上安装和配置PostGIS

PostGIS是PostgreSQL关系数据库的空间扩展。PostGIS允许您使用几何和地理数据类型存储空间数据,使用空间函数执行空间查询以确定区域,距离,长度...

45600
来自专栏技术视野

在Ubuntu 16.04或Debian 8上安装SquirrelMail

SquirrelMail是一个用PHP编写的webmail包,它支持SMTP和IMAP协议,并具有跨平台兼容性。SquirrelMail需要一台带有PHP的We...

39710
来自专栏云计算教程系列

如何在Ubuntu 14.04上安装和使用BaasBox

BaasBox是一个充当数据库服务器和应用程序服务器的应用程序。开箱即用,BaasBox通过备份提供用户注册,用户管理,角色管理,内容管理,文件管理和数据库管理...

16900
来自专栏云计算教程系列

如何在Ubuntu 18.04上安装和使用Composer

Composer是一种流行的PHP 依赖管理工具,主要用于促进项目依赖项的安装和更新。它将根据项目要求使用适当的版本检查特定项目所依赖的其他软件包并为您安装。

1.7K00
来自专栏云计算教程系列

如何在Ubuntu 16.04上安装和保护phpMyAdmin

虽然许多用户需要像MySQL这样的数据库管理系统的功能,但他们可能不会仅仅通过MySQL提示与系统进行交互。

32400
来自专栏云计算教程系列

如何在CentOS 7上安装和配置scponly

scponly是匿名FTP的安全替代品。它使管理员能够设置具有受限远程文件访问权限且无法访问交互式shell的安全用户帐户。

21900
来自专栏云计算教程系列

如何选择有效的防火墙策略来保护您的服务器

使用防火墙既可以用于制定智能策略决策,也可以用于学习语法。 像iptables这样的防火墙能够通过解释管理员设置的规则来实施策略。但是,作为管理员,您需要知道哪...

63420
来自专栏云计算教程系列

如何在Ubuntu 18.04上安装和保护Mosquitto MQTT Messaging Broker

MQTT是一种机器到机器的消息传递协议,旨在为“物联网”设备提供轻量级的发布/订阅通信。它通常用于地理跟踪车队,家庭自动化,环境传感器网络和公用事业规模数据收集...

1.5K10
来自专栏老蒋专栏

腾讯云服务器扩容云磁盘增容至挂载盘目录中的方法

在老蒋记录的文章中,关于VPS、服务器的挂载盘问题其实也是比较多的,但是确实因为疏忽不同的服务商可能操作起来有所不同。最近主要对腾讯云服务器这块的云磁盘扩容挂载...

1.9K60
来自专栏云计算教程系列

如何在Ubuntu 16.04上安装和使用Byobu进行终端管理

Byobu是一个易于使用的tmux(或screen)终端多路复用器包装器。这意味着它可以让您轻松打开多个窗口并在单个终端连接中运行多个命令。

86200

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励