前端文章列表展示

之前写过一篇，抓取整个页面的context的，这是姊妹篇。调用后台的接口实现文章列表展示。这个功能是在angularjs的框架下实现的，照猫画虎，依葫芦画瓢写的。文章列表的展示是根据用户在页面上的输入的关键词进行后台的搜索后展示的。共有三个函数。

 var context = getContext();
            getKnowledgeList(context);
            
            function getContext() {
                var allDoms = $("div[id^='_mdwiki_content_container_mdwiki']").children();//遍历dom树，相当于遍历div标签里的所有子节点
                var context = "";//context定义为空

                for (var i = 0; i < allDoms.length; i++) {
                    var html = allDoms[i].innerHTML;
                    if (html) {
                        html = html.replace(/[^\u4e00-\u9fa5]/g,'');
                        if (html) {
                            context = context.concat(html);
                        }
                    }
                }
                return context;
            }

根据上面函数的读取到的context，从而展示文章列表。下面是展示文章列表的函数。

 function getKnowledgeList(context) {
                $.ajax({
                    url:"http://"+server+"/KnowledgeServer/api/knowledgeMod/getKnowledgeList",
                    type : "post",
                    data: {
                        "keywords": context,
                        "type": 2,  //keywords类型，1:词语，2:句子
                        "highlight": 1 //使搜到的关键词是否高亮
                    },
                    dataType: "json",
                    success:function(result){
                        $("#knowledge-list").empty();
                        $(result.data.list).each(function(i, val){
                            var index = "<div class='serial'>"+(i+1)+"</div>";
                            var content = "<div class='rule-content'><h2><a ng-click='getKnowledgeDetail(\""+val.id+"\")'>"+val.title+"</a></h2><p>"+val.content+"......</p></div>";
                            $("#knowledge-list").append($compile(index+content)($scope));
                        });
                    }
                });
            }

上面的文字列表，是展示的文章的标题和索引列表，下面的函数实现的是点击文章列表展开的详情页。因为考虑到跨域访问的问题，用的是jsonp的方式访问。

var lastKnowledgeId;
            $scope.getKnowledgeDetail = (function(id){
                $("#knowledge-list").hide();
                $("#knowledge-detail").show();
                
                if (id == lastKnowledgeId)
                    return;
                
                $(".knowledge_title").empty();
                $(".knowledge_content").empty();
                
                $.ajax({
                    url:"http://"+server+"/KnowledgeServer/api/knowledgeMod/getKnowledgeDetail?jsonpcallback=?",
                    type : "get",
                    data: {
                        "id": id
                    },
                    dataType: "jsonp",
                    jsonp: "jsonpcallback",
                    success:function(result){
                        var title = result.data.list[0].title;//根据后台返回的json格式进行的读取
                        var content = result.data.list[0].content;
                        $(".knowledge_title").text(title);
                        $(".knowledge_content").html(content);
                        lastKnowledgeId = id;
                    }
                })
            });

前端文章列表展示

推荐阅读