从RSS Feed和YQL创建数据表










  • Yahoo Query Language( YQL )是一种查询语言,例如SQL。
  • 使用YQL,我们可以Web服务 查询过滤联接数据。
  • YQL也可以阅读RSS feed。
  • 响应可以是JSON或XML。
  • 雅虎提供了一个YQL控制台,用于调试测试诊断 YQL语句。
  • YQL控制台的链接为http://developer.yahoo.com/yql/console/
  • 该演示显示:
    • 使用YQL阅读我的博客RSS Feed(http://www.tutorialsavvy.com/feeds/posts/default)。
    • 获取JSON格式的供稿。
    • 在YUI3数据表中显示数据。
  • 项目结构
  • 本演示使用以下yui3模块' node ',' yql ',' datatable ',' datatable-scroll ',' datatype-date '。
  • 使用的YQL语句是: 选择标题,发布日期,来自rss的链接,其中url ='http://www.tutorialsavvy.com/feeds/posts/default?alt = rss&format = json&diagnostics = true'
  • YQL控制台输出为:
  • YQL演示脚本yql-demo.htmlHTML标记
<!DOCTYPE html>
<html>

    <head>
        <title>YQL Query Reading RSS Feed Demo</title>
        <script src='http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js'></script>
        <style>
            .response-status {
                font-weight: bold;
                color:grey;
                list-style: none;
            }
            .response-text {
                font-size:16px;
                color : orange;
            }
            #yui-blogger-rss-feed-table {
                width:650px;
            }
            .yui3-skin-sam #yui-blogger-rss-feed-table .yui3-datatable-cell {
                font-size:11px;
            }
            .blogger-post-title {
                color: Green;
                font-style: italic;
                font-weight: bold;
            }
            .blogger-post-link {
                text-decoration: none;
                font-style: italic;
                font-weight:bold;
            }
            .blogger-post-link:hover {
                color:orange;
                text-decoration: underline;
                font-weight:bold;
            }
        </style>
    </head>

    <body class='yui3-skin-sam'>
        <!-- This DIV Element is for displaying posts from the YQL QUERY RESPONSE(JSON)
        details in YUI3 DATATABLE -->
        <div id='yui-blogger-rss-feed-table'></div>
        <!-- This UL Element is for displaying post count, created date,
        language -->
        <ul class='response-status'></ul>
        <script>
            YUI().use('node', 'yql', 'datatable', 'datatable-scroll', 'datatype-date', function (Y) {

                var resultItems,

                results, postTable,

                /*This YQL query is for my Blogger's RSS feed.*/
                yqlRssUrl = 'select title, pubDate, link from rss where ' +
                    'url='http://www.tutorialsavvy.com/feeds/posts/default?alt=rss&format=json&diagnostics=true'',

                    responseStatus = Y.one('.response-status'),

                    rssYqlFeedTable = Y.one('#yui-blogger-rss-feed-table'),

                    /*HTML template for LINK of the post*/
                    formatLink = '<td class='yui3-datatable-cell'><a  class='blogger-post-link' href='{content}'>{content}</a></td>',

                    /*HTML template for TITLE of the post*/
                    formatTitle = '<td class='yui3-datatable-cell blogger-post-title'>{content}</td>',

                    /*Formatter function for formatting a date, pubDate*/
                    formatPubDate = function (o) {

                        return Y.DataType.Date.format(Y.DataType.Date.parse(o.value), {
                            format: '%Y-%m-%d'
                        });

                    }

                    /* This will return 25 results As Blogger return 25 posts by DEFAULT.
                     * This can be changed to some other number using
                     * LIMIT parameter.
                     */
                    Y.YQL(yqlRssUrl, function (feed) {

                        results = feed.query;

                        resultItems = feed.query.results.item;

                        responseStatus.appendChild('<li> Count of Posts (in response) : <span class='response-text'>' + results.count + '</span></li>');

                        responseStatus.appendChild('<li>Created Date : <span class='response-text'>' + results.created + '</span></li>');

                        responseStatus.appendChild('<li>Post Language : <span class='response-text'>' + results.lang + '</span></li>');

                        postTable = new Y.DataTable({

                            columns: [{
                                key: 'title',
                                label: 'POST TITLE',
                                cellTemplate: formatTitle
                            },

                            {
                                key: 'pubDate',
                                label: 'PUBLICATION DATE',
                                formatter: formatPubDate
                            },

                            {
                                key: 'link',
                                label: 'POST LINK',
                                cellTemplate: formatLink
                            }],

                            data: resultItems,

                            scrollable: 'y',

                            height: '250px',

                            caption: '[ YQL READING RSS FEED FROM TUTORIAL SAVVY(http://www.tutorialsavvy.com/feeds/posts/default)' + 'AND DISPLAYING IN DATATABLE]'

                        }).render(rssYqlFeedTable);

                    })

            });
        </script>
    </body>

</html>
  • 萤火虫检查
  • 该演示的JS Fiddle链接为:
  • http://jsfiddle.net/techblogger/sr67C/2/embedded/result/

  • JS小提琴输出:
  • 输出(屏幕截图):

    演示代码下载:

    下载代码链接

    参考: My Small Tutorials博客上的JCG合作伙伴 Sandeep Kumar Patel 从RSS Feed和YQL创建数据表

    翻译自: https://www.javacodegeeks.com/2013/02/creating-datatable-from-rss-feed-and-yql.html