用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 ...
随机推荐
- LeetCode Binary Tree Postorder Traversal（数据结构）
题意: 用迭代法输出一棵二叉树的后序遍历结果. 思路: (1)用两个栈,一个存指针,一个存标记,表示该指针当前已经访问过哪些孩子了. /** * Definition for a binary tre ...
- 使用apt-get方式为Kubuntu安装PHP＋MYSQL＋Apache
相信很多搭过动态网站的朋友都知道怎么搭web服务器, 本人是linux新手, 以前在windows是直接使用集成的wamp server, 所以在linux没有亲手搭过. 本系统: ubuntu 12 ...
- C陷阱与缺陷 1
1,符号之间的空白被忽略 符号中间不能嵌入空白 2,词法分析中的贪心法 a---b 和 a-- -b相同 和 a- --b不同 1 a=b/*p //根据贪心法 /*被解释成 注释符,便不再往下读,直 ...
- centos6.3 + db2v9.7的数据库移行
工作内容如题,我要做的事情大体如下: 1,正确备份可用数据库: 2,安装64位的cent os 6.3: 3,将1备份的数据恢复到新的cent os 6.3系统上. 第一件事情,就是备份一个可用的数据 ...
- html5中新的标准属性
属性 值 描述accesskey ...
- tomcat 启动时内存溢出
在tomcat_home/bin目录下找到catalina.bat,用文本编辑器打开,加上下面一行: set JAVA_OPTS= -Xms1024M -Xmx1024M -XX:PermSize=2 ...
- Codeforces Round #132 (Div. 2)
A. Bicycle Chain 统计\(\frac{b_j}{a_i}\)最大值以及个数. B. Olympic Medal \(\frac{m_{out}=\pi (r_1^2-r_2^2)hp_ ...
- UVa 272 Tex Quotes --- 水题
题目大意:在TeX中,左引号是 ``,右引号是 ''.输入一篇包含双引号的文章,你的任务是把他转成TeX的格式 解题思路:水题,定义一个变量标记是左引号还是右引号即可 /* UVa 272 Tex Q ...
- JAVA基本语义简介
1.标识符 标识符可以有字母.数字.下划线(_).美元符($)组成,但不能包含@.%.空格等其他特殊符,不能以数字开头. 标识符不能是JAVA关键字和保留字(JAVA预留的关键字,以后的升级版中有可能 ...
- hdu3416 最短路+最大流
题意:有 n 点 m 边,有出发点 A 到达点 B ,只允许走原图中的最短路,但每条边只允许被走一次,问最多能找出多少条边不重复的最短路 一开始做到的时候瞎做了一发最短路,WA了之后也知道显然不对,就 ...