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

架在服务器上。 地址可访问：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

  
  
  
  



  

    

        

            
推荐
            
社会
            
国内
            
国际
            
娱乐
            
体育
            
军事
            
科技
            
财经
            
时尚
        
        

            

                
{{item.title}}
                

                    
                    
                    
                
                
{{item.author_name}}{{item.date}}
            
            

                已经到底了
            
        
    
  

  
  
  
  
  
  

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
}

效果图