空气质量指数搜索webapp解析

用Flask和Bootstrap以及Jquery做了一个web app。

放在了Github上,https://github.com/baoqger/Air-Quality-Index-Web-App

做这个webapp的时候,更多的是侧重Flask的后端使用,Jquery和Flask的HTTP通信方法,还有就是对第三方Web API的调用,接口JSON数据的解析方法。对于Bootstrap的设计就比较简单了。在这个项目之后,又尝试用Bootstrap和Angularjs结合做一个single page web,实现类似的空气质量监控功能,不过会有很多动态的功能,在那个项目里面,前端有了很好的丰富。稍后更新。

对于这个webapp,主要的技术点有:

Flask部分的技术点

  • 除了根route之外,只有一个额外的route: AQI_Analysis
  • Python requests 包,利用requests.get()可以发送get HTTP请求
  • 对于返回值 r= requests.get(URL), 需要用json方法来解析,前提是api 返回的是json格式的数据
  • r是一个对象,要想解析,需要提取它的内容信息: r.text, 然后再用json.loads进行转换,比如json.loads(r.text)。
  • json包一共有两个比较重要的方法,json.loads() 和json.dumps()

 

Jquery的技术点:

  • 用$.get()方法,跟Flask的route进行通信。 具体的format为 $.get(“/AQI_Analysis”, {target_city:city_name},  function(data, status){} )
  • 对于返回的data,需要用res = JSON.parse(data)进行处理,才能够得到它的内部数据 res[‘aqi’]
  • 在Flask里面用request.args.get(‘target_city’)进行解析,获取相应的参数
  • 而在web前端上添加google map,并且在map上对于搜索位置进行标注的方法则比较简单首先创建一个map对象

    1 

     

    再者创建一个marker对象

    2 

    当然想要用google map需要创建API Key,并且在html文件进行相关声明

    3

Leave a Reply

Your email address will not be published. Required fields are marked *