使用Node.js与和风天气创建一个天气服务
注册和风天气账号
Node.js安装Express
安装ejs框架
页面的搭建
解析JSON数据
注册和风天气账号
Node.js安装Express
在文件夹下初始化，创建工程
$ npm init
安装ejs
安装express包
$ npm install express --save
配置(创建app.js)
var express = require('express');
var app = express();
//配置静态目录
app.use(express.static('public'));
///设置监听端口
var server = app.listen(3000,function(){
console.log("server 3000 running!");
});
安装ejs模板
$ npm install ejs --save
配置ejs信息
//配置放模板文件的目录
app.set('views','./views');
//模板引擎
app.set('view engine','ejs');
页面的搭建
在上文配置的"views"文件夹下创建一个.ejs文件
<html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%=HeWeather5[0].basic.city%></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.weatherDiv{
text-align: center;
/*border: 1px solid black;*/
}
</style>
<body>
<h1><%=HeWeather5[0].basic.city%>当前天气</h1>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-4 weatherDiv">
<p>今天(<%=HeWeather5[0].daily_forecast[0].date%>)</p>
<img class="img-rounded" src="http://files.heweather.com/cond_icon/<%=HeWeather5[0].daily_forecast[0].cond.code_d%>.png" alt="http://files.heweather.com/cond_icon/<%=HeWeather5[0].daily_forecast[0].cond.code_d%>.png"/>
<p><%=HeWeather5[0].daily_forecast[0].tmp.min%>~<%=HeWeather5[0].daily_forecast[0].tmp.max%>摄氏度</p>
<p><%=HeWeather5[0].daily_forecast[0].cond.text_d%></p>
<p><%=HeWeather5[0].daily_forecast[0].wind.dir%><%=HeWeather5[0].daily_forecast[0].wind.sc%>级</p>
</div>
<div class="col-xs-6 col-md-4 weatherDiv">
<p>明天(<%=HeWeather5[0].daily_forecast[0].date%>)</p>
<img src="http://files.heweather.com/cond_icon/<%=HeWeather5[0].daily_forecast[1].cond.code_d%>.png" alt="http://files.heweather.com/cond_icon/<%=HeWeather5[0].daily_forecast[1].cond.code_d%>.png"/>
<p><%=HeWeather5[0].daily_forecast[0].tmp.min%>~<%=HeWeather5[0].daily_forecast[1].tmp.max%>摄氏度</p>
<p><%=HeWeather5[0].daily_forecast[0].cond.text_d%></p>
<p><%=HeWeather5[0].daily_forecast[0].wind.dir%><%=HeWeather5[0].daily_forecast[0].wind.sc%>级</p>
</div>
<div class="col-xs-6 col-md-4 weatherDiv">
<p>后天(<%=HeWeather5[0].daily_forecast[0].date%>)</p>
<img src="http://files.heweather.com/cond_icon/<%=HeWeather5[0].daily_forecast[2].cond.code_d%>.png" alt="http://files.heweather.com/cond_icon/<%=HeWeather5[0].daily_forecast[2].cond.code_d%>.png"/>
<p><%=HeWeather5[0].daily_forecast[0].tmp.min%>~<%=HeWeather5[0].daily_forecast[2].tmp.max%>摄氏度摄氏度</p>
<p><%=HeWeather5[0].daily_forecast[0].cond.text_d%></p>
<p><%=HeWeather5[0].daily_forecast[0].wind.dir%><%=HeWeather5[0].daily_forecast[0].wind.sc%>级</p>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
解析JSON数据
安装request包
$ npm install request --save
添加使用代码，解析和风传来的参数
拼接字符串：https://free-api.heweather.com/v5/forecast?key=cb77d4e4750e4d6fb56c91091e401bc4&city=jinan
app.get("/weather", function(req,res){
request(forecastUrl,function(error,response,body){
var weather = JSON.parse(body);
res.render('weather', weather);
});
});
app.js
var express = require('express');
var app = express();
var request = require('request');
var key = "cb77d4e4750e4d6fb56c91091e401bc4";
var weatherUrl = "https://free-api.heweather.com/v5/";
var city = "jinan";
var forecastUrl = weatherUrl+"forecast?key="+key+"&city="+city;
app.use(express.static('./public'));
app.set('views','./views');
app.set('view engine','ejs');
app.get("/weather", function(req,res){
request(forecastUrl,function(error,response,body){
var weather = JSON.parse(body);
res.render('weather', weather);
});
});
var server = app.listen(3000,function(){
console.log("server 3000 running!");
});
运行
结果
网友评论