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

本文介绍如何利用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";
 		}
		
		
	});
}

效果图如下:

页面效果这样就完成了。现在没有使用到springmvc的视图解析器。慢慢完成,数据抓取这一模块。和redis的key值管理 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Master_slaves

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值