聚合數(shù)據(jù)API申請(qǐng)鏈接：https://www.juhe.cn/docs/api/id/235
架在服務(wù)器上热芹。 地址可訪問：http://106.13.193.149:8081/
后端使用的是nodejs（express+superagent）
直接上代碼：
文件目錄：
**app.js**
```
//superagent是一個(gè)HTTP庫
這里之所以用superagent舷暮，也是因?yàn)榍岸隧撁嫒绻苯拥艟酆蠑?shù)據(jù)api 會(huì)出現(xiàn)跨域。
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 ,可根據(jù)瀏覽器的F12查看,把對(duì)應(yīng)的粘貼在這里就行
? ? res.header('Access-Control-Allow-Headers', 'Content-Type');
? ? res.header('Access-Control-Allow-Methods', '*');
? ? res.header('Content-Type', 'application/json;charset=utf-8');
? ? next();
? });
//靜態(tài)資源路徑
app.use('/public', express.static('public'));
//首頁
app.get('/', function (req, res) {
? ? res.sendFile( __dirname + "/" + "toutiao.html" );
})
//首頁會(huì)調(diào)用此接口狈网，攜帶參數(shù)type 可返回不同的新聞?lì)愋?/p>
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);
? ? //返回的是字符，需要前端頁面轉(zhuǎn)換為對(duì)象
? ? res.jsonp({
? ? ? data:reso
? ? })
? });
})
var server = app.listen(8081, function () {
? var host = server.address().address
? var port = server.address().port
? console.log("應(yīng)用實(shí)例斤贰，訪問地址為 http://%s:%s", host, port)
})
```
**toutiao.html**
```
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <!-- 引入樣式 -->
? <link rel="stylesheet" >
? <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')">社會(huì)</div>
? ? ? ? ? ? <div :class="{'dynamic':mark == 'guonei'}" class="item" @click="get_toutiao('guonei')">國內(nèi)</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')">財(cái)經(jīng)</div>
? ? ? ? ? ? <div :class="{'dynamic':mark == 'shishang'}" class="item" @click="get_toutiao('shishang')">時(shí)尚</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>已經(jīng)到底了</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} /* 未訪問時(shí)的狀態(tài) */
a:visited {color: #000} /* 已訪問過的狀態(tài) */
a:hover {color: #F56C6C;text-decoration:underline} /* 鼠標(biāo)移動(dòng)到鏈接上時(shí)的狀態(tài) */
a:active {color: #F56C6C} /* 鼠標(biāo)按下去時(shí)的狀態(tài) */
.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
}
```
### 效果圖
————————————————
版權(quán)聲明：本文為CSDN博主「BYh_blog」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明瑞驱。
原文鏈接：https://blog.csdn.net/byhage1/article/details/99734445
