springboot项目练习六去除页面上多余的html代码

最新推荐文章于 2022-03-19 00:34:41 发布

原创最新推荐文章于 2022-03-19 00:34:41 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#springboot项目练习6 页面优化 jsoup

springboot 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何利用JSoup库进行HTML页面元素选择与修改，结合LigerUI弹窗功能，实现新闻内容的动态加载与展示。通过JSoup去除页面多余元素，拼接自定义HTML模板，生成静态文件；使用LigerUI改进新闻查看方式，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去除页面多余的元素，使用jsoup完成HTML页面div的选择拼接自己的html模板完成html的修改
使用ligerui弹出窗口的方式修改查看新闻的方式

        <!-- jsoup -->
		<dependency>
			<groupId>org.jsoup</groupId>
			<artifactId>jsoup</artifactId>
			<version>1.8.3</version>
		</dependency>

修改生成静态文件的方法 gcreateHtmlFile

@Value("${html.rootDir}")
	private String htmlDir;

	public void gcreateHtmlFile(String id, String url) {
		// 通过配置文件获取存放静态文件的文件夹
		BufferedReader br = null;
		BufferedWriter out = null;
		try {
			String path = htmlDir;
			File rootDir = new File(path);
			if (!rootDir.isDirectory()) {
				rootDir.mkdirs();
			}
			URL newUrl = new URL(url);
			URLConnection openConnection = newUrl.openConnection();
			openConnection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");//设置请求类型
			openConnection.setRequestProperty("Charset", "utf-8"); //字符
			openConnection.setDoInput(true);        //设置输入流采用字节流
			openConnection.setDoOutput(true);        //设置输出流采用字节流
			InputStream in = openConnection.getInputStream();
			// 接收
			String line;
			br = new BufferedReader(new InputStreamReader(in,"gbk"));
			StringBuffer strb = new StringBuffer();
			while ((line = br.readLine()) != null) {
				strb.append(line);
			}
			String html = strb.toString();
			Document parse = Jsoup.parse(html);
			parse.charset();
			Element element = parse.getElementById("endText");//获取新闻内容主体div
			//创建文件将字符串写入文件
			File dig =new File(path + "/" + id + ".html");
			
			if(!dig.isFile()){ // 如果文件不存在则创建文件
				dig.createNewFile();
			}
			dig.setWritable(true);
			out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(dig),"utf-8"));
			out.write("<!DOCTYPE html>"
			+"<head>"+"<meta charset='UTF-8'>"+
			"</head>"+
			"<body>");
			out.write(element.toString());
			out.write("</body></html>");
			out.flush();
//			FileUtils.copyInputStreamToFile(in, new File(path + "/" + id + ".html"));

		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			if(br!=null){try {
				br.close();
			} catch (IOException e) {
				e.printStackTrace();
			}}
			if(out!=null){try {
				out.close();
			} catch (IOException e) {
				e.printStackTrace();
			}}
			
			
		}
	}

查看ligerDialog.js文件找到这个方法 $.ligerDefaults.Dialog中定义的参数

修改news.html中查看方法

function showNews(id,url){
	var newUrl ="/news/getNews/"+id;	
$.post(newUrl,{url:url},function(data){
 		if(data.code==200){
 			$.ligerDialog.open(
 					{
 					url:data.data+".html", //后台返回的文件id
 					title:"新闻信息_查看",
 					lock:true,
 					width:1000,
 					height:540,
 					id:"news_VIEW",
 					buttons:[{name:'关闭'}]
 					});
//  			window.location.href=data.data+".html";
 		}
		
		
	});
}

效果图如下：