Web版RSS閱讀器（五）——初步完成閱讀功能 · Web版Rss閱讀器

? ? ?上一篇博文《[Web版RSS閱讀器（四）——定制自己的Rss解析庫myrsslib4j](http://blog.csdn.net/xiaoxian8023/article/details/10048325)》中，已經分享給大家制作自己的rss解析庫。稍微有點遺憾的是，它僅僅支持rss格式的博客。現在給大家分享一下我基于rome修改而成的另一款rss解析庫——myrome，完美支持atom和rss 2種格式。 ? ? myrome.jar是在rome的基礎上修改而來的，主要改動的地方是：([查看](http://note.youdao.com/share/?id=e9cdd75e55131fe6383e63d49fcc2440&type=note)[詳細修改說明](http://note.youdao.com/share/?id=e9cdd75e55131fe6383e63d49fcc2440&type=note)) 1. 修改GetAuthor()返回null 1. 修改getPublishedDate()返回null 1. 添加獲取文章摘要的接口和方法 ? ? 附下載地址：[http://pan.baidu.com/share/link?shareid=3563208157&uk=1259218556](http://pan.baidu.com/share/link?shareid=3563208157&uk=1259218556) ? ? 本篇主題是把myrome加入到RssReader中，修改界面，完成初步的訪問和閱讀的功能。具體實現的效果為： 1. 根據不同的訂閱信息，加載對應的圖標，從而一眼得知訂閱的出處 1. 點擊左側的某個訂閱，在中間的頁面中顯示出標題、時間和摘要列表，用水平線隔開 1. 點擊某個摘要信息，在右側內容區域，顯示該文章的所有內容。 1. 雙擊摘要信息，則會用新窗口打開原文章地址。 ? ? 等不及了嗎？點[這里](http://mfxuan.free.800m.net/)或者**[](http://mfxuan.free.800m.net/)**[這里](http://test.free.800m.net/)搶先查看效果吧。 ? ? 言歸正傳，接下來請大家跟隨我初步成功的腳步： ? ? 下載myrome-1.0.jar，拷貝到WebRoot/WEB-INF/lib下。如果已經引用過rome-0.2.jar，要提前刪除掉。在com.tgb.rssreader.manager包中新建RomeReadRss類，用來解析在線rss內容。【RomeReadRss.java】 ~~~ package com.tgb.rssreader.manager; import java.net.URL; import java.net.URLConnection; import com.sun.syndication.feed.synd.SyndFeed; import com.sun.syndication.io.SyndFeedInput; import com.sun.syndication.io.XmlReader; /** * 解析Rss訂閱信息 * * @author Longxuan * */ public class RomeReadRss { /** * 解析Rss訂閱信息 */ public SyndFeed parseRss(String rss) { SyndFeed feed = null; feed = null; try { URLConnection feedUrl = new URL(rss).openConnection(); // 由于服務器屏蔽java作為客戶端訪問rss，所以設置User-Agent feedUrl.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)"); // 讀取Rss源 XmlReader reader = new XmlReader(feedUrl); SyndFeedInput input = new SyndFeedInput(); // 得到SyndFeed對象，即得到Rss源里的所有信息 feed = input.build(reader); } catch (Exception e) { e.printStackTrace(); } return feed; } } ~~~ ? ? 修改left.jsp頁的樹形節點加載信息，根據不同的博客提供商，加載不同的圖標。點擊某節點后，將rss地址傳遞給servlet，去解析在線的rss。【left.jsp】 ~~~ <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import="com.tgb.rssreader.bean.*" %> <%@ page import="java.util.*" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+path+"/"; %> <html> <head> <base href="<%=basePath %>" /> <link rel="stylesheet" href="style/main.css"> <link rel="StyleSheet" href="style/dtree.css" type="text/css" /> <script type="text/javascript" src="js/dtree.js"></script> <script type="text/javascript"> //獲取圖標地址 function getIco(field){ var s = field.split("/"); if(s[2].indexOf("163")>0 && s[2].split(".")[0]!="blog"){ s[2] = s[2].substring(s[2].indexOf("blog")); } return "icos/"+s[2]+".ico"; } </script> </head> <body> <div id="leftMenu" style="overflow-y:auto; overflow-x:auto;"> <script type="text/javascript"> //add(id, pid, name, url, title, target, icon, iconOpen, open); //9個參數說明: id,pid,顯示名稱，打開的url,提示信息，目標框架，閉合時的圖標，展開時的圖標，是否展開(open || false) d = new dTree('d'); d.add(0,-1,'博客分組','','','','','img/blog.png'); <% int i = 0;//當前分組的節點索引值 int c = 0;//節點總數 //獲取所有分組信息 List<RssTeamBean> rssTemBeanList = (List)request.getAttribute("rssTemBeanList"); //遍歷所有分組信息 for (RssTeamBean rssTeamBean:rssTemBeanList) { c = c+1;//總個數加1 %> //添加組節點 d.add(<%=c%>,0,'<%=rssTeamBean.getTitle()%>','','','','img/open.png','img/close.png'); <% i=c;//設定當前節點為分組節點索引值 //遍歷分組下的所有訂閱信息 for (RssBean rssBean : rssTeamBean.getRssBeanList()) { c = c+1;//總個數加1 %> //添加訂閱信息節點 //參數：當前節點索引值，所屬節點索引，標題，點擊后的連接地址，鼠標指上去的提示信息，目標頁，節點閉合時圖標，節點展開時圖標，是否展開節點 d.add(<%=c%>,<%=i%>,'<%=rssBean.getTitle()%>','servlet/RssServlet?rss=<%=rssBean.getXmlUrl()%>','<%=rssBean.getText()%>','middlehtml',getIco('<%=rssBean.getXmlUrl()%>'),getIco('<%=rssBean.getXmlUrl()%>'),false); //d.add(<%=c%>,<%=i%>,'<%=rssBean.getTitle()%>','<%=rssBean.getXmlUrl()%>','<%=rssBean.getText()%>','contenthtml'); <% } } %> //在界面上顯示樹形結構 document.write(d); //--> </script> </div> </body> </html> ~~~ ? ? 在com.tgb.rssreader.web包中新建一個RssServlet類，繼承HttpServlet，實現doGet和doPost方法。它接收到有left.jsp傳遞過來的rss地址，調用RomeReadRss來解析rss內容。解析完畢后，轉向middle.jsp，在中間這個網頁中，顯示解析的內容。【RssServlet.java】 ~~~ package com.tgb.rssreader.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sun.syndication.feed.synd.SyndFeed; import com.tgb.rssreader.manager.RomeReadRss; /** * 解析Rss信息資源Servlet * @author Longxuan * */ @SuppressWarnings("serial") public class RssServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //獲取rss地址 String rss = request.getParameter("rss"); //獲取基于myrome的解析對象 RomeReadRss romeReadRss = RomeReadRss.getInstance(); //解析rss內容，存放到SyndFeed對象中 SyndFeed feed = romeReadRss.parseRss(rss); //設置屬性，用于傳遞SyndFeed對象 request.getSession().removeAttribute("feed"); request.getSession().setAttribute("feed", feed); //轉向middle.jsp request.getRequestDispatcher("/middle.jsp").forward(request, response); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { doGet(req, resp); } } ~~~ ? ? 解析完畢后，開始修改middle.jsp。它接受到request中傳遞過來的SyndFeed對象，讀取文章標題、發布時間及摘要信息，每篇文章都用橫線隔開。未閱讀過的顯示黑色字體，閱讀過后，顯示灰色字體，鼠標指上去會變藍色。點擊文章摘要后，將該摘要的索引值傳遞過去；雙擊文章摘要信息，則會在新窗口中打開對應文章的實際連接。【middle.jsp】 ~~~ <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import="com.sun.syndication.feed.synd.*"%> <%@page import="java.util.List"%> <%@page session="true" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <base href="<%=basePath%>" /> <link rel="stylesheet" href="style/main.css"> <style type="text/css"> #middleTitle ul li { text-align: left; display: inline; line-height: 24px; height: auto; word-break: break-all; word-wrap: break-word; } a { text-decoration: none; } a:link { color: #000000; } /* 未被訪問的鏈接 */ a:visited { color: #808080; } /* 已被訪問的鏈接 */ a:hover { color: #0000FF; } /* 鼠標指針移動到鏈接上 */ a:active { color: #0000FF; } /* 正在被點擊的鏈接 */ </style> <script type="text/javascript"> function openInBrowser(url) { window.open(url); } </script> </head> <body> <div id="middleTitle"> <ul> <% //獲取設置到session中的摘要信息 SyndFeed feed = (SyndFeed) request.getSession().getAttribute("feed"); if (feed == null)return; //獲取所有文章列表 List entriesList = feed.getEntries(); //循環加載文章摘要列表 for (int i = 0; i < entriesList.size(); i++) { SyndEntry entry = (SyndEntry) entriesList.get(i);%> <a href="servlet/ArticleServlet?articleIndex=<%=i%>" title="<%=entry.getTitle()%>" target="contenthtml" ondblclick="openInBrowser('<%=entry.getLink().trim()%>')"> <li> <%=entry.getTitle().trim()%> <%=entry.getPublishedDate().toLocaleString()%> </li> <li> <%=((SyndContent) entry.getContents().get(0)).getSummary(30)%> </li> </a> <hr> <%}%> </ul> </div> </body> </html> ~~~ ? ?? ? ? 當點擊某篇文章標題時，將該文章的索引值傳遞到ArticleServlet中，在Session中找到對應的文章，把文章正文內容傳遞到content.jsp頁面。所以在com.tgb.rssreader.web包中新建ArticleServlet類，繼承HttpServlet，實現doGet和doPost方法。【ArticleServlet.java】 ~~~ package com.tgb.rssreader.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sun.syndication.feed.synd.SyndContent; import com.sun.syndication.feed.synd.SyndEntry; import com.sun.syndication.feed.synd.SyndFeed; /** * 獲取文章正文 * @author Longxuan * */ @SuppressWarnings("serial") public class ArticleServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //獲取要查看的文章的索引值 int articleIndex = request.getParameter("articleIndex") == null? 0: Integer.parseInt( request.getParameter("articleIndex")); //獲取session中的變量 SyndFeed feed = (SyndFeed) request.getSession().getAttribute("feed"); SyndContent content = (SyndContent)((SyndEntry)feed.getEntries().get(articleIndex)).getContents().get(0); request.setAttribute("content", content.getValue()); request.getRequestDispatcher("/content.jsp").forward(request, response); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } } ~~~ ? ? 在content.jsp中獲取文章內容進行顯示即可：【content.jsp】 ~~~ <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@page import="com.sun.syndication.feed.synd.*"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <base href="<%=basePath%>" /> <link rel="stylesheet" href="style/main.css"> </head> <body> <div id="content"> <div id="welcome" class="content" style="display: block;"> <div align="left"> <p> <%= request.getAttribute("content")==null?"<marquee behavior='alternate'" + "onmouseover='this.stop()' onmouseout='this.start()' wight='60%' scrollamount='4'>" + "<font size='6' text-align='center' >歡迎使用提高班在線Rss閱讀器！" + "——@<a href = \"http://blog.csdn.net/xiaoxian8023\" target='_blank'>龍軒</a></font>" :request.getAttribute("content").toString()%> </p> <hr> </div> </div> </div> </body> </html> ~~~ ? ? 至此，Web版Rss閱讀器閱讀博客功能基本已經完工了，終于可以看到這款rss閱讀器的樣子了。當然需要優化的地方還很多。暫時打算告一段落，等過段時間再進行優化。基本的代碼都已經寫過了，~~不打算單獨提供源碼了。~~本來不打算提供源碼了，因為按照步驟，差不多能整出來的。不過為了方便大家，剛剛還是把源碼上傳了，資源地址： [http://download.csdn.net/detail/xiaoxian8023/8116737](http://download.csdn.net/detail/xiaoxian8023/8116737) ? ? ?最后曬一下效果圖吧： [![](https://box.kancloud.cn/2016-02-18_56c53c293e265.jpg)](http://mfxuan.free.800m.net/) [![](https://box.kancloud.cn/2016-02-18_56c53c294f0f5.jpg)](http://mfxuan.free.800m.net/) **（點擊圖片在查看網站實例）** ** ** 如果您覺得做得不錯，值得鼓勵，就輕輕地【**頂一下**】吧