后端node sever index.js
const express = require('express');
const axios = require('axios')
const app = express()
app.get('/',(req,res)=>{
res.send("返回抗疫数据的api服务器")
})
app.get('/api/newsdata',async (req,res)=>{//简单的爬虫组件,将数据存入对应url路由
//解决ajax跨域问题
res.append("Access-Control-Allow-Origin","*")
res.append("Access-Control-Allow-content-type","*")
//请求头条数据
let result = await axios.get('https://i.snssdk.com/forum/home/v1/info/?activeWidget=1&forum_id=1656784762444839')
let data = result.data;
res.send(data)
})
app.get('/api/news',async (req,res)=>{
//解决ajax跨域问题
res.append("Access-Control-Allow-Origin","*")
res.append("Access-Control-Allow-content-type","*")
//请求头条数据
let httpUrl = 'https://i.snssdk.com/api/feed/forum_flow/v1/?activeWidget=1&query_id=1656810113086509&tab_id=1656810113086525&category=forum_flow_subject&is_preview=0&stream_api_version=82&aid=13&offset=0&count=20'
let result = await axios.get(httpUrl)
let data = result.data;
res.send(data)
})
app.listen(8080,()=>{
console.log("server Start:")
console.log("http://localhost:8080")
console.log("http://localhost:8080/api/newsdata")
})前端调用数据:
import React from 'react';
import axios from 'axios';
import bannerImg from '../assets/img/banner.jpg'
class NewsCom extends React.Component{
constructor(props){
super(props)
this.state = {
datalist:[]
}
}
async componentWillMount(){
let res = await axios.get('http://localhost:8080/api/news');
//console.log(res.data)
let data = JSON.parse(res.data.data[0].content)
console.log(data.sub_raw_datas)
this.setState({
datalist:data.sub_raw_datas
})
}
render(){
console.log(this.state.datalist);
return (
<div className="contentItem new">
<div className="banner">
<img alt="banner" src={bannerImg} />
<h1>疫情追踪</h1>
</div>
<div className="newContent">
<div className="line"></div>
<div className="newsList">
{
this.state.datalist.map((item,index)=>{
if(item.raw_data.event_image){
return (
<div className="newsListItem" key={index}>
<div className="time">{item.raw_data.showtime_string}</div>
<div className="desc">
{item.raw_data.desc}
</div>
<div className="img">
<img src={item.raw_data.event_image.url} alt="img" />
</div>
</div>
)
}else{
return (
<div className="newsListItem" key={index}>
<div className="time">{item.raw_data.showtime_string}</div>
<div className="desc">
{item.raw_data.desc}
</div>
</div>
)
}
})
}
</div>
</div>
</div>
)
}
}
export default NewsCom;
最新回复 (0)