用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 ...
随机推荐
- [转]设计模式（22）－Strategy Pattern
一. 策略(Strategy)模式 策略模式的用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 假 设现 ...
- H - 放苹果
Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Submit Status Des ...
- 关于OC队列
GCD中有三种队列类型: The main queue: 与主线程功能相同.实际上,提交至main queue的任务会在主线程中执行.main queue可以调用dispatch_get_main_q ...
- git 上传
首先明白两个点: git clone diveinedu@192.168.1.254:~/YGYSocket 从服务器上下载项目 divein 服务器密码 nc -l -t 2000 socket ...
- Web应用开发工具及语言需要具备的功能探索
1 前言 最近一个多月在做Web项目,用到的技术有(也不算泄漏公司机密吧): 后台:Struts 2(with JSP/FreeMarker).Spring.Hibernate.MySQL.Web S ...
- Linux网络管理概述
概述:计算机基础知识.网络基础知识其实是所有的程序员所必须的,甚至已经不仅仅是程序员的专利,而是每一个人都应该掌握的计算机知识. 主要内容: 一.网络基础 二.Linux网络配置 三.Linux网络命 ...
- php下载c
1.php下载中,不认识的类型比如zip,rar,rmvb等可以直接点击链接下载<a href="one.zip">one.zip</a>. 2.php下载 ...
- php配置伪静态的方法
mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法 .检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查看 ...
- Linux 下WordPress FTP帐号解决办法
自己用Ubuntu搭建WordPress后在更换主题时提示需要输入FTP帐号和密码,解决办法主要是把WordPress主目录的权限所有者弄为Apache: 找到apache服务所使用的用户名和用户组 ...
- 【NOIP2012】国王游戏
这一次高精度完美地过辣好开心OvO,还get到了非常方便的高精度除小于10000的方法,这个是我自己脑出来的OvO 看来下午高精度傻逼得值qvq 原题: 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个 ...