前言:
今天柴犬君又给本菜准备了一道题,nodeJS request 模块调用百度API并在前台进行渲染输出。经过一天的折腾终于折腾出来了,另外获得了新技能API调用。
开始:
先百度一下,百度天气API,果断发现了了下图,百度支持开发者调试, 经过观察,我们需要先调用城市ID API获得城市的唯一IP然后带入通过自己的apikey加上城市name和城市ID就可以获得天气信息。
好了,知道我们需要什么了就可以动手了,由于我直接用了visual studio (装了个插件),之间新建个express 4 改个 ejs模版渲染引擎,好了直接到routes文件夹下载入index 路由文件写入。
index.js文件:
- var express = require('express');
- var router = express.Router();
- var request = require('request');
- //构建一个函数用来查询返回信息。
- function tRequest(cityName, callback) {
- request.get(
- {
- url: 'http://apistore.baidu.com/microservice/cityinfo?cityname='+ encodeURI(cityName),
- }, function (error, response, body) {
- if (!error && response.statusCode == 200) {
- var cityCode = JSON.parse(body).retData.cityCode;
- if (JSON.parse(body).errNum=="0") {
- var querya= {
- url: 'http://apis.baidu.com/apistore/weatherservice/recentweathers?cityname=' + encodeURI(cityName)+ '&cityid=' + cityCode,
- headers: {
- "apikey":"d10ace00d1d553c6ac00b20c8076323e"
- }
- }
- } else {
- console.log('城市代号请求错误!')
- }
- request.get(querya, function (error, response, body) {
- if ((JSON.parse(body).errNum) == "0") {
- var queryb = JSON.parse(body).retData;
- console.log(queryb);
- var outCome = {
- "cityName": cityName,
- "data": queryb.today.date,
- "week": queryb.today.weak,
- "curTemp":queryb.today.curTemp,
- "fengxiang":queryb.today.fengxiang,
- "fengji": queryb.today.fengji,
- "hightemp": queryb.today.hightemp,
- "lowtemp": queryb.today.lowtemp,
- "Type": queryb.today.type,
- "index": queryb.today.index[0]
- }
- callback(outCome);
- } else {
- console.log('城市天气请求错误')
- }
- });
- }
- });
- }
- /* GET home page. */
- router.get('/', function (req, res) {
- var cityName = '章丘';
- tRequest(cityName, function (data) {
- var resource = data;
- res.render('index',resource);
- });
- });
- module.exports = router;
注意:第二次查询的时候要使用百度开发者appkey,写在头文件里,因为不能使用中文来查询必须进行转码所以使用encodURL();对中文进行处理,我们以json的方式获得信息,并在前台进行渲染。
index.ejs (VIEW)前台文件:
由于API提供的信息很多,甚至有各种建议,就不依次进行渲染了,反正能够实现的了,在调试过程中我们要充分使用console.log();来分析程序的执行
- <h1 style="margin-top:2px;margin-left:60px;"><%= cityName %></h1>
- <div style="border:3px solid red; height:300px;width:700px;margin-top:2px;margin-left:60px;">
- <h1><%= data %></h1>
- <%= week %>
- 平均气温: <%= curTemp %>
- <%= fengxiang %>
- <%= fengji %></br>
- 最高气温 : <%= hightemp %>
- 最低气温: <%= lowtemp %>
- <%= Type %></br>
- <%= index.name %>
- <%= index.details %>
- </div>
后记:
OK,完成了这个目标了,可以正常输出渲染了,今天的任务圆满结束,今天自己写的东西比较多,但是回调仍然生一些,需要更加努力。