【腾讯云的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 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

Jerry的Fiori原创文章合集

我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发:

2025
来自专栏JackieZheng

学习SpringMVC——国际化+上传+下载

  每个星期一道菜,这个星期也不例外~~~   一个软件,一个产品,都是一点点开发并完善起来的,功能越来越多,性能越来越强,用户体验越来越好……这每个指标的提高...

2096
来自专栏电光石火

PHP中HTTP防盗链技术

 盗链是指服务提供商自己不提供服务的内容,通过技术手段绕过其它有利益的最终用户界面(如广告),直接在自己的网站上向最终用户提供其它服务提供商的服务内容,骗取最终...

1758
来自专栏逸鹏说道

变种XSS:持久控制

0x00 引言 首先声明,这不是一个新洞,看过 Homakov 文章(最后附)以及译文的人想必对这种漏洞有所了解。 但原文写的太过简单(没有说明利用条件、情景和...

3366
来自专栏我和PYTHON有个约会

爬虫0050:selenium & phantomJS 无界神器selenium和phantomJS

selenium是一套web网站自动化测试工具,主要通过命令行的操作完成常规可视化界面下的用户各种操作行为,因为其简单易学成本低,并且执行测试效率较高而在web...

661
来自专栏Young Dreamer

webpack4:连奏中的进化

1934
来自专栏农夫安全

用手机轻松刷洞,移动端开源安全测试工具合集

用手机轻松刷洞,移动端开源安全测试工具合集 ? 随着移动互联网的迅速发展,移动安全也慢慢成为了新的热门行业,以往移动应用的安全测试大多是使用在线检测平台或者...

4798
来自专栏学海无涯

Android开发之再探底部菜单TabLayout与Bottom navigation实现方式

前文中已经对主流的底部菜单实现进行了详细说明,但随着Android版本的升级,Google又推出了更方便的实现方式,此文就来一探究竟。 </br> 一、利用Ta...

3104
来自专栏Android 开发者

Android P 行为变更

1822
来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

822

扫码关注云+社区