聚合數據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