一个简单的头条新闻响应式（调用聚合数据api）

最新推荐文章于 2024-02-28 15:48:14 发布

BYh_blog

最新推荐文章于 2024-02-28 15:48:14 发布

阅读量2.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/byhage1/article/details/99734445

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

架在服务器上。地址可访问：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" >
                    <img  style="width: 30%;height:120px" :src="item.thumbnail_pic_s" alt="">
                    <img  style="width: 30%;height:120px"  v-if="item.thumbnail_pic_s02" :src="item.thumbnail_pic_s02" alt="">
                    <img  style="width: 30%;height:120px" v-if="item.thumbnail_pic_s03" :src="item.thumbnail_pic_s03" alt="">
                </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
}

效果图
在这里插入图片描述

BYh_blog

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
一个简单的头条新闻响应式（调用聚合数据api）

架在服务器上。地址可访问：http://106.13.193.149:8081/后端使用的是nodejs（express+superagent）直接上代码：文件目录：app.js//superagent是一个HTTP库这里之所以用superagent，也是因为前端页面如果直接掉聚合数据api 会出现跨域。const superagent= require('superagent...
复制链接

扫一扫