网易新闻小案例

首页 > 代码库 > 网易新闻小案例

2024-09-17 04:41:17 218人阅读

抓取网易新闻的接口，用代理服务器解决跨域，在前端页面上展示。

需要的文件有：

index.html,app.js,

headLine.html,headlineController.js,

detail.html,detailController.js,

引入js文件：angular.js和angular-route.js，

服务器：nodePost.js。

index.html内容，主界面显示，引入需要的文件

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>网易新闻小案例</title>
    </head>
    <body>
        <ng-view></ng-view>
    </body>
    <script src="http://www.mamicode.com/code/angular.js" type="text/javascript"></script>
    <script src="http://www.mamicode.com/code/angular-route.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.mamicode.com/js/app.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.mamicode.com/js/headlineController.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.mamicode.com/js/detailController.js" type="text/javascript" charset="utf-8"></script>
</html>

index.html

app.js内容，控制路由

angular.module("myApp",["ngRoute","myApp.headlineController", "myApp.detailController"])
    .config(["$routeProvider", function($routeProvider){
        $routeProvider.when("/headline", {
            templateUrl:"headLine.html",
            controller:"headlineController"
        });
        $routeProvider.when("/detail/:postid", {
            templateUrl:"detail.html",
            controller:"detailController"
        });
        $routeProvider.otherwise("/headline")
    }])

app.js

headLine.html，控制新闻主页显示，显示图片和标题

<div class="content">
    <div class="nav">
        <h2>新闻头条</h2>
    </div>
    <ul style="list-style: none;">
        <li ng-repeat="news in mine.newsList" ng-click="mine.goToDetailView(news.postid)">
            <div class="contentView" style="clear: both;width:70%;border-bottom: 1px dashed saddlebrown;">
                <div class="left" style="float: left;">
                    <img style="width:200px;" ng-src="http://www.mamicode.com/{{news.imgsrc}}"  />
                </div>
                <div class="right" style="float:right">
                    <h3>{{news.title}}</h3>
                    <p>
                        <span>{{news.ptime}}</span>
                        <span>回复:{{news.replyCount}}</span>
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>

headLine.html

headlineController.js，主页面的控制器

angular.module("myApp.headlineController", [])
    .controller("headlineController", function($scope, $http, $location) {
        $scope.mine = {
            newsList: [],
            goToDetailView: function(postid) {
                console.log("跳转到详情界面");
                console.log(postid);
            }
        }! function() {
            var myUrl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html";
            myUrl = encodeURIComponent(myUrl);

            $http({
                    method: "get",
                    url: "http://localhost:3000?myUrl=" + myUrl,

                })
                .then(function(res) {
                    console.log(res);
                    var resultArr = res.data.T1348647853363;
                    //由于新闻第一条的详情界面有问题，所以把第一条新闻去除了
                    resultArr.splice(0, 1);
                    $scope.mine.newsList = resultArr;
                    $scope.mine.goToDetailView = function(postid) {
                        $location.path("/detail/" + postid)
                    }
                }, function(err) {
                    console.log(err);
                })
        }()
    });

headlineController

detail.html，新闻详情界面

<p>新闻详情</p>
<div class="content">
    <div ng-click="goBack()">返回</div>
    <h2>{{mine.title}}</h2>
    <div ng-bind-html="mine.content">
    </div>
</div>

detail.html

detailController.js，新闻详情界面的控制器

angular.module("myApp.detailController", [])
    .controller("detailController", function($scope,$routeParams,$http,$sce){
//        console.log("传过来的参数是:",$routeParams.postid);
        $scope.mine = {
            title:"",
            content:"",
        }
        function goBack(){
            window.history.go(-1);
        }
        //根据传过来的新闻id获取详细的新闻信息
        ~function(){
            var myUrl = "http://c.m.163.com/nc/article/" + $routeParams.postid + "/full.html";
            myUrl = encodeURIComponent(myUrl);
            var promise = $http({
                method:"get",
                url:"http://localhost:3000?myUrl="+myUrl,
            });
            promise.success(function(res){
//                console.log(res[$routeParams.postid]);
                $scope.mine.title = res[$routeParams.postid].title;
                $scope.mine.content = $sce.trustAsHtml(res[$routeParams.postid].body);
            });
            promise.error(function(err){
                console.log(err);
            });
            
        }()
    });

detailController.js

注意文件位置的放置，不要引入错了。

接下来，服务器的代码nodeServer.js(用nodeJS运行)

var http = require("http");
var url = require("url");
var qs = require("querystring");

http.createServer(function(req, res) {

        res.setHeader("Access-Control-Allow-Origin", "*");
        //        console.log(req.url);
        //        对请求对象的url进行解析，拿到查询参数字符串
        var query = url.parse(req.url).query;
        //        console.log(query);
        //把key=value字符串转变成对象的方式 方便获取
        var queryObj = qs.parse(query);
        //用来接收数据的变量
        var result = "";
        //        console.log(queryObj.myUrl);
        http.get(queryObj.myUrl, function(request) {
            request.on("data", function(data) {
                result += data;
            });
            request.on("end", function() {
                if(queryObj.callback) {
                    var fn = queryObj.callback;
                    var resultStr = JSON.stringify(result);
                    var str = fn + "(" + resultStr + ")";
                    res.end(str);
                } else
                    res.end(result);
            });
        }).on("error", function(err) {
            res.end(err);
        })
        //        res.end("hello sb");
    })
    .listen(3000, function() {
        console.log("服务器启动成功，监听3000...");
    });

nodeServer.js

网易新闻小案例

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 网易新闻小案例

网易新闻小案例

看完仍有疑问？有类似问题直接问程序猿