用java给html文件添加必要的控制html代码片
这个需求，我估计很多时候都不会用到，但是，我们目前在做一个CMS的系统，在创建页面的时候，需要控制页面各个板块显示的内容来源，这个不是关键，关键是页面内容配置完毕后，如何提交内容，也就是说如何和后台系统通信。这个时候，有两种做法，一种是在页面的控制区域内添加右键菜单，实现这个功能。另外一个做法，就是在页面中添加按钮区域来实现。
但是不管那种做法，控制区域的html页面上的逻辑代码片，都不可能在模板里面添加，这是不友好的，客户也是不会考虑这个的，再说了，他也没有办法考虑。所以，需要CMS系统自动最近这个控制区域的html代码片。于是，java操作html的插件就诞生了！有不少类似的插件，这里我选择比较简单的jsoup插件。下面的简单实验，用到的版本是1.9.2，就一个jar包，不需要额外的资源了。
我这里上代码，分别说明右键实现，以及直接追加button的方式实现。
先说右键实现方案，这里，右键菜单是用bootstrap-contextmenu.js插件实现的，是基于bootstrap风格的。
/**
* @author "shihuc"
* @date 2016年5月21日
*/
package opc; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter; import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements; /**
* @author "shihuc"
*
*/
public class Demo { /**
* @param args
* @throws IOException
*/
public static void main(String[] args) throws IOException {
File input = new File("./example.html");
Document doc = Jsoup.parse(input, "UTF-8");
System.out.println(doc.html());
Elements content = doc.getElementsByTag("body");
//找到body的内容
String body = content.get(0).html();
System.out.println(body); //读取控制页面右键的代码片段
File pice = new File("./pice.html");
Document pdoc = Jsoup.parse(pice, "UTF-8");
Element control_area = pdoc.getElementById("tk-cms-page-context-menu-control-area"); //将业务相关的html代码片添加到右键菜单控制区域中
control_area.append(body); //将带有业务相关代码的html内容填写到原来的example.html文件的body区域
content.get(0).html(pdoc.html()); FileOutputStream fos = new FileOutputStream("./output.html", false);
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
osw.write(doc.html());
osw.close();
} }
这里的example.html文件的内容如下：
<!DOCTYPE HTML>
<html> <body> <div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div> </body>
</html>
那个pice.html的内容如下:
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style> <div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class="">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Cancel</a></li>
<li><a tabindex="-1">Action</a></li>
</ul>
</div>
<div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;width:100%;border:1px solid #ddd;" class="vCenter"> </div> <script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-contextmenu.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
//屏蔽掉浏览器显示的页面中的右键菜单。
document.oncontextmenu = function(){return false;};
//启用自定义的右键菜单
$('#tk-cms-page-context-menu-control-area').contextmenu({
target: '#context-menu',
onItem: function (context, e) {
alert($(e.target).text());
}
});
})
</script>
最后生成的output.html的内容如下：
<!doctype html>
<html>
<head></head>
<body>
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style>
<div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class="">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Cancel</a></li>
<li><a tabindex="-1">Action</a></li>
</ul>
</div>
<div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;width:100%;border:1px solid #ddd;" class="vCenter">
<div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-contextmenu.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
//屏蔽掉浏览器显示的页面中的右键菜单。
document.oncontextmenu = function(){return false;};
//启用自定义的右键菜单
$('#tk-cms-page-context-menu-control-area').contextmenu({
target: '#context-menu',
onItem: function (context, e) {
alert($(e.target).text());
}
});
})
</script>
</body>
</html>
效果如下图所示，只有在灰色框区域内容点击鼠标右键有反应，框外点击鼠标右键是没有菜单出来的，那个框，限定了菜单的有效控制范围。
下面，再来看看，直接追加button在业务模板html页面后面的实现方案。直接上代码！
example.html的部分与上面一样，不再列举，下面先说java的部分：
/**
* @author "shihuc"
* @date 2016年5月21日
*/
package opc; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter; import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements; /**
* @author "shihuc"
*
*/
public class Demo2 { /**
* @param args
* @throws IOException
*/
public static void main(String[] args) throws IOException {
File input = new File("./example.html");
Document doc = Jsoup.parse(input, "UTF-8");
System.out.println(doc.html());
Elements content = doc.getElementsByTag("body");
//找到body的内容
Element body = content.get(0);
System.out.println(body.html()); //读取控制页面右键的代码片段
File pice = new File("./pice2.html");
Document pdoc = Jsoup.parse(pice, "UTF-8"); //将控制页面相关逻辑代码追加到业务页面example.html的最后面。
body.append(pdoc.html()); FileOutputStream fos = new FileOutputStream("./output2.html", false);
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
osw.write(doc.html());
osw.close();
} }
再来列举pice2.html的代码部分：
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style> <div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter">
<button type="button" onclick="cancel();">Cancel</button>
<button type="button" onclick="action();">Action</button>
</div> <script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function cancel(){
alert("cancel");
}
function action(){
alert("action");
}
$(document).ready(function(){ });
</script>
最后看看输出部分output2.html的代码片：
<!doctype html>
<html>
<head></head>
<body>
<div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div>
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style>
<div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter">
<button type="button" onclick="cancel();">Cancel</button>
<button type="button" onclick="action();">Action</button>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function cancel(){
alert("cancel");
}
function action(){
alert("action");
}
$(document).ready(function(){ });
</script>
</body>
</html>
看看example.html模板文件在追加了控制代码片后的效果：
到此，两种通过jsoup操作html添加页面控制单元的实现方案都列举出来，读者是不是有疑问了，这两者有啥区别，或者说到底那种要好点呢？
个人觉得，第一种右键菜单的那个，最终页面的视觉效果会干净点，但是，右键菜单是基于bootstrap的，引入了bootstrap.css以及bootstrap.js和bootstrap-contextmenu.js，所以，这个会对业务模板代码可能会造成影响。也就是说有些side effect. 另外的一种方案，就是直接添加button的，这个虽然不是那么好看，但是他需要的而外的插件资源少，最多就是一个jQuery的插件。其实，右键方式，也需要jQuery插件。
不多说了，有需要的，自己选择参考！测试的工程中引入了的资源文件等文件结构如下图所示：
用java给html文件添加必要的控制html代码片的更多相关文章
- java读取CSV文件添加到sqlserver数据库
在直接将CSV文件导入sqlserver数据库时出现了错误,原因还未找到,初步怀疑是数据中含有特殊字符.于是只能用代码导数据了. java读取CSV文件的代码如下: package experimen ...
- java向压缩文件添加文件
package org.alfresco.repo.bom.util; import java.io.File; import java.io.FileInputStream; import java ...
- JAVA对XML文件的读写(有具体的代码和解析
XML 指可扩展标记语言(EXtensible Markup Language),是独立于软件和硬件的信息传输工具,应用于 web 开发的许多方面,常用于简化数据的存储和共享. xml指令 处理指令, ...
- JAVA解析XML文件(DOM,SAX,JDOM,DOM4j附代码实现)
1.解析XML主要有四种方式 1.DOM方式解析XML(与平台无关,JAVA提供,一次性加载XML文件内容,形成树结构,不适用于大文件) 2.SAX方式解析XML(基于事件驱动,逐条解析,适用于只处理 ...
- Java中的文件和stream流的操作代码
1.Java中FileRead方法的运用代码及详解 package example2;import java.io.FileReader;import java.io.IOException;clas ...
- Java读取一个文件并打印到控制台上
package test9; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExcept ...
- eclipse编辑窗口不见了（打开左边的java、xml文件，中间不会显示代码)
转自:https://blog.csdn.net/u012062810/article/details/46729779?utm_source=blogxgwz4 1. windows-->re ...
- eclipse 编辑窗口不见了（打开左边的java、xml文件，中间不会显示代码)
参考:https://blog.csdn.net/u012062810/article/details/46729779
- Java 图片爬虫，java打包jar文件
目录 1. Java 图片爬虫,制作 .jar 文件 spider.java 制作 jar 文件 添加执行权限 1. Java 图片爬虫,制作 .jar 文件 spider.java spider.j ...
随机推荐
- [转]LUA C 互调
组件工厂 ------3D游戏研发 LUA和C之间的函数调用 1.1 从C程序调用LUA函数 LUA的函数和普通变量一样也是First Class Variable类型,可以看作函数指针变量参与栈操作 ...
- BSP、PSP到底指什么？
/************************************************************************* * BSP.PSP到底指什么? * 说明: * B ...
- JavaScript数据结构——树
树:非顺序数据结构,对于存储需要快速查找的数据非常有用. 二叉树:二叉树中的节点最多只能有两个子节点(左侧子节点和右侧子节点).这些定义有助于我们写出更高效的向/从树中插入.查找和删除节点的算法. 二 ...
- isFinite
window.isFinite 如果 number 是有限数字(或可转换为有限数字),那么返回 true.否则,如果 number 是 NaN(非数字),或者是正.负无穷大的数,则返回 false
- postgresql 分区表创建及测试
1 建立分区 1.1. 创建主表 CREATE TABLE measurement ( city_id int not null, logdate date ...
- 转 SQL Server中关于的checkpoint使用说明
在SQL Server中有一个非常重要的命令就是CheckPoint,它主要作用是把缓存中的数据写入mdf文件中. 其实在我们进行insert, update, delete时,数据并没有直接写入数据 ...
- LVS+keepalived配置
一.系统环境准备: 1.keepalive主服务器 主机名称:dir 系统环境:CentOS release 6.5 (Final) 外网ip:192.168.1.203(网络模式桥接) vip:19 ...
- spark Streaming的Receiver和Direct的优化对比
Direct 1.简化并行读取:如果要读取多个partition,不需要创建多个输入DStream然后对它们进行union操作.Spark会创建跟Kafka partition一样多的RDD part ...
- vsftp虚拟用户配置
找了很久,终于找到像样一点的文章,很详细,参数方面懂英文基本能看懂,一个教程是否有用,关键在于细节.错了一点点就不能配下去了. ------------------------------------ ...
- rsyslog日志服务的配置文件分析
基于rsyslog日志服务的日志 在不同的LINUX系统,实现的软件略有不同. syslog,rsyslog,syslog-ng,用于实现系统日志的管理. [root@asianux4 ~]# rpm ...