Nodejs gets weather information and passes it to the front end

<div id="jsonData">
        <span></span>
        <em>

        </em>
        <i></i>
        <img src="" alt="" id="pic1">
        <img src="" alt="" id="pic2">
    </div>
 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //接口
            //localhost:5500/list
            var apiurl=`http://127.0.0.1:5500/list`;
            $.ajax({
                url:apiurl,
                type:'get',
                dataType:'json',
                success:function(data){
                   console.log(data.weatherinfo);
                   console.log(data.weatherinfo.city);
                   console.log(data.weatherinfo.weather);


                    $('#jsonData span').html(data.weatherinfo.city)
                    $('#jsonData em').html(data.weatherinfo.weather)
                    $('#jsonData i').html(data.weatherinfo.temp2)

                    var img1='http://www.weather.com.cn/m/i/weatherpic/29x20/'+data.weatherinfo.img1;
                    var img2='http://www.weather.com.cn/m/i/weatherpic/29x20/'+data.weatherinfo.img2;
                    $('#jsonData #pic1').attr('src',img1)
                    $('#jsonData #pic2').attr('src',img2)

                   

                }
            })
           
        })
    </script>
var http =  require('http');
const express = require('express');
const app = express();
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', "*");
    res.header("Access-Control-Allow-Methods", "*");
    res.header("Access-Control-Allow-Credentials", true);
    next();
});
// 解析post请求带过来的参数
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));


app.use(express.static(__dirname));//使用绝对路径

var jsonData = '';//存储天气信息
// var url_ = "http://www.weather.com.cn/data/cityinfo/101220101.html";//合肥的天气预报信息
 var url_='http://www.weather.com.cn/data/cityinfo/101220601.html'//安庆的天气预报
http.get(url_, function (res) {//通过上面传过来的url来获取该天气信息的数据    
    res.on("data", function (data) {
        jsonData += data.toString('utf8');//保存天气信息的数据
    })
    res.on('end', function(){
        jsonData = JSON.parse(jsonData);
    })
});

app.get("/list", function(req, res) {
    // 返回josn数据  
    res.send(jsonData);
    // res.send('hi nodejs')
});

app.post('/addstu',function(req,res){
    // console.log(req);
    console.log(req.body);
    res.send(req.body)
})

app.post("/wlist", function(req, res) {
    // 返回josn数据
    // return res.json({//只返回需要的数据
    //     city:jsonData.weatherinfo.city,//城市名
    //     weather: jsonData.weatherinfo.weather,//天气
    //     temp1:jsonData.weatherinfo.temp1,//最低温
    //     temp2:jsonData.weatherinfo.temp2,//最高温
    //     img1:jsonData.weatherinfo.img1,//天气图片1
    //     img2:jsonData.weatherinfo.img2//天气图片2
    // });

    return res.json(jsonData);
});


const port = 5500;
// 设置端口
app.listen(port,'127.0.0.1',()=>{
    console.log(`服务器运行在localhost:${port}`);
})

Preview:

 

list list preview:

 

wlist preview:

 

 

 

 

Guess you like

Origin blog.csdn.net/weixin_52629158/article/details/130913646