聚合数据API申请链接：https://www.juhe.cn/docs/api/id/235
架在服务器上。 地址可访问：http://106.13.193.149:8081/
后端使用的是nodejs（express+superagent）
直接上代码：
文件目录：
**app.js**
```
//superagent是一个HTTP库
这里之所以用superagent，也是因为前端页面如果直接掉聚合数据api 会出现跨域。
const superagent= require('superagent');
var express = require('express');
var app = express();
//解决跨域
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
//Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
//静态资源路径
app.use('/public', express.static('public'));
//首页
app.get('/', function (req, res) {
res.sendFile( __dirname + "/" + "toutiao.html" );
})
//首页会调用此接口，携带参数type 可返回不同的新闻类型
app.get('/get_toutiao',(req,res)=>{
console.log(req.query.type)
superagent.get(`http://v.juhe.cn/toutiao/index?key=58ff2000704bbf8e31ce031c1b555a33&type=${req.query.type}`).end((err, reso) => {
// console.log(reso);
//返回的是字符，需要前端页面转换为对象
res.jsonp({
data:reso
})
});
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})
```
**toutiao.html**
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./public/toutiao.css">
<title>每日头条</title>
</head>
<body>
<div id="app">
<div class="content">
<div class="head">
<div :class="{'dynamic':mark == 'top'}" class="item" @click="get_toutiao('top')">推荐</div>
<div :class="{'dynamic':mark == 'shehui'}" class="item" @click="get_toutiao('shehui')">社会</div>
<div :class="{'dynamic':mark == 'guonei'}" class="item" @click="get_toutiao('guonei')">国内</div>
<div :class="{'dynamic':mark == 'guoji'}" class="item" @click="get_toutiao('guoji')">国际</div>
<div :class="{'dynamic':mark == 'yule'}" class="item" @click="get_toutiao('yule')">娱乐</div>
<div :class="{'dynamic':mark == 'tiyu'}" class="item" @click="get_toutiao('tiyu')">体育</div>
<div :class="{'dynamic':mark == 'junshi'}" class="item" @click="get_toutiao('junshi')">军事</div>
<div :class="{'dynamic':mark == 'keji'}" class="item" @click="get_toutiao('keji')">科技</div>
<div :class="{'dynamic':mark == 'caijing'}" class="item" @click="get_toutiao('caijing')">财经</div>
<div :class="{'dynamic':mark == 'shishang'}" class="item" @click="get_toutiao('shishang')">时尚</div>
</div>
<div class="body">
<div class="item" v-for="item in items">
<div class="title" :class="{left:true}"><a style="font-size:22px" :href="item.url" target="view_window">{{item.title}}</a></div>
<div class="imgs" >
</div>
<div class="date"><span style="color:#F56C6C;padding-right: 15px;">{{item.author_name}}</span><span>{{item.date}}</span></div>
</div>
<div class="bottom">
<span>已经到底了</span>
</div>
</div>
</div>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
items: [],
mark:'top'
}
},
methods:{
get_toutiao(type) {
this.mark = type;
axios.get('/get_toutiao', {
params: {
type: type
}
})
.then((res)=>{
var list = JSON.parse(res.data.data.text);
console.log(list.result.data)
this.items = list.result.data;
})
.catch((err)=>{
console.log(err)
});
},
scrollToTop () {
const that = this
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
that.scrollTop = scrollTop
if (that.scrollTop > 60) {
that.btnFlag = true
} else {
that.btnFlag = false
}
}
},
mounted() {
this.get_toutiao();
window.addEventListener('scroll', this.scrollToTop)
}
})
</script>
</html>
```
**public/toutiao.css**
```
body{
margin: 0;
padding: 0;
color: black
}
a{text-decoration:none}
a:link {color: #000} /* 未访问时的状态 */
a:visited {color: #000} /* 已访问过的状态 */
a:hover {color: #F56C6C;text-decoration:underline} /* 鼠标移动到链接上时的状态 */
a:active {color: #F56C6C} /* 鼠标按下去时的状态 */
.content{
width: 100%;
/* height: 100vh; */
margin: auto;
padding-top: 75px;
}
.head{
width: 100%;
height: 50px;
position: fixed;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #409EFF;
font-size: 18px
}
.head >.item{
width: 8%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dynamic{
background-color: #F56C6C;
color:#ffffff
}
.head >.item:hover{
color: #F56C6C
}
.body{
/* margin-top: 105px; */
width: 65%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center
}
.body>.item{
width: 100%;
/* height: 150px; */
border-bottom: 1px solid #DCDFE6;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 25px;
}
.body >.item>.imgs{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
margin-bottom: 7px;
}
.body>.bottom{
width: 100%;
height: 152px;
display: flex;
justify-content: center;
align-items: center
}
```
### 效果图
————————————————
版权声明：本文为CSDN博主「BYh_blog」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/byhage1/article/details/99734445
