网易新闻小案例
Posted 柒夏°
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网易新闻小案例相关的知识，希望对你有一定的参考价值。
抓取网易新闻的接口，用代理服务器解决跨域，在前端页面上展示。
需要的文件有：
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="../code/angular.js" type="text/javascript"></script>
<script src="../code/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/headlineController.js" type="text/javascript" charset="utf-8"></script>
<script src="js/detailController.js" type="text/javascript" charset="utf-8"></script>
</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")
}])
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="{{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>
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);
})
}()
});
detail.html，新闻详情界面
<p>新闻详情</p>
<div class="content">
<div ng-click="goBack()">返回</div>
<h2>{{mine.title}}</h2>
<div ng-bind-html="mine.content">
</div>
</div>
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);
});
}()
});
注意文件位置的放置，不要引入错了。
接下来，服务器的代码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..."); });
以上是关于网易新闻小案例的主要内容，如果未能解决你的问题，请参考以下文章
Android最新主流新闻app功能实现。仿网易,搜狐等新闻客户端实现展示