后端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)