axios前后端数据打通——网上代码,作为一个范本参考

zhuanbike 2022-1-8 915

后端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)
发新帖