内容简介:简洁的天气预报项目,可用于练手
Weathers
首先来看看效果图,下面分别是在电脑和手机上的演示图
使用到的资源
基本结构
后台: 使用 Node
书写后台代码,后台的主要任务就是从心知天气官网提供的 API
获取天气信息,然后按照指定的接口输出供前端页面使用。
app.get('/weather/now/:location', function(req, res) { // 逻辑代码 }); app.get('/weather/recent/:location', function(req, res) { // 逻辑代码 });
从接口也可以看得出来,一个用于获取当前的天气,一个用于获取最近几日的天气。
不过由于后台代码不和前台在同一域名下,即使是在本地开发的时候其使用的端口也不相同,所以这里牵扯到了跨域问题,如果在 Node
中使用了 Express
框架,可以使用以下代码解决跨域问题。
app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","GET"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next(); });
这段代码是从网上粘贴来的,其第一行代码指定允许跨域访问的网络地址,这里设置为 *
说明允许所有地址跨域访问,当然也可以在这里指定某一个或者某几个域名。
第三行的意思是,允许跨域网站对本地执行的操作,这里有很多比如 PUT, POST, DELETE, GET
等,由于我们后台的主要任务就是提供信息,所以这里只允许 GET
操作。
前台: 任务主要就是创建界面,然后利用 AJAX
向后台发送数据请求,在这一过程中使用到了 ES6
语法中的 Promise
,不得不说它的确让代码简洁易读了很多。
友情提示
如果你想将整个项目拷贝下来查看源代码的话,建议首先将改目录下的 Weather
分开放置,然后执行 npm install && node app.js
即可提供后台数据服务。
而且,还需要对前台代码进行改动(或者你也可以不改动,因为那样的话你将默认使用我部署在 Heroku
的后台服务),将后台 Ajax
请求的 url
改为本地 http://localhost:5000/weather/....
。
值得注意的是,为了使用心知天气需要申请 API KEY
, 而我的项目中使用的是我自己的 KEY
,你可以申请自己的 KEY
,详细内容可以查看官方文档。
以上所述就是小编给大家介绍的《简洁的天气预报项目,可用于练手》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 免费天气API,天气JSON API,不限次数获取十五天的天气预报
- flutter天气预报APP
- Python爬虫天气预报(小白入门)
- Python爬虫天气预报(小白入门)
- 浪潮完成500万平方公里1Km分辨率高精度数值天气预报
- 去哪里找 Java 练手项目?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
社交网站界面设计
Christian Crumlish、Erin Malone / 樊旺斌、师蓉 / 机械工业出版社 / 2010-9-1 / 69.00元
《社交网站界面设计》提供100多种模式、原则以及最佳实践,并针对在设计社交网站时经常遇到的问题给出明确建议。本书将提供给你培养用户交互习惯和构建社区最具价值的参考。 本书作者将与你分享难得的经验,教会你平衡各种不同的因素,并与你的用户共同构建和谐健康的网络社区。 本书教会你 掌握创建任何网站时都会用到的原则 学习基本设计模式,以便向现有的网站中添加新的社交组件 学会在......一起来看看 《社交网站界面设计》 这本书的介绍吧!
Base64 编码/解码
Base64 编码/解码
XML、JSON 在线转换
在线XML、JSON转换工具