妙味学员作品:独特的产品理念自己的追求-天气预报

古语有云:“青出于蓝,而青于蓝;冰水为之,而寒于水”。在学习的道路上,新手经常会模仿一些优秀作品,既致敬经典,又习得其中精妙的技巧。然而妙味学员 王明阳 却反其道而行之。他有着自己的独特产品理念,善于创新与思考,面对个人结课作品,更是亲力亲为,从策划、到设计、制作、交互……全程包揽,因此,今天给大家带来的,就是 王明阳 的个人作品:天气预报。

项目地址:http://project.microbu.com/170329/zhangjiale/

用到的组件及技术:

  • antd:蚂蚁金服的 ui 组件库,可以通过他快速搭建项目UI界面和基础功能;
  • react-router-dom:一个路由组件,实现路由绑定,根据不同的 url 显示不同的页面组件;
  • echarts:百度的一个数据图表框架,用于图形化的展示我们的大数据应用,让我们对数据的分析更加的直观和便捷;
  • jsonp:实现了跨域数据的调用;
  • localStorage:把数据进行本地存储,缓存,提高性能,加快数据和页面处理速度;

功能及技术:

一、登陆(首次登陆,请先注册):

  • 登陆成功后,使用 localStorage 本地存储用户的注册信息。再次打开页面会直接跳转到主页;(友情提示:登录账号是用用户名登录,不是注册邮箱)

二、左侧导航

  • 主页( main ):
    • 第一次默认显示北京当天的实时天气,未来一周的气温图(可切换柱形图和折线图);
    • 天气数据使用了 JSONP 来调用,然后 echarts 来渲染数据到图表,应用中用到的城市和天气的数据都是通过 JSONP 的方式来进行跨域的异步请求加载过来的第三方真实数据;

  • 预报天气( forecast ):显示未来 6 天的预报天气,点击日期,可查看当天详细天气参数;

  • 24 小时天气( hoursly ):
    • 显示未来 24 小时气温变化趋势(可以切换柱形图和折线图);
    • 表格显示每隔一小时的天气详情;
    • 可以查询其他城市当天 24 小时天气详情;

  • 生活小贴士( lifenote ):显示几个生活提醒,按钮切换详情;

  • todos ( todo ): todolist 功能;

三、用户管理

  • 城市管理( citymanage ):添加和删除某个城市(目前测试已经知道的市区都支持),单选选择显示该城市天气;如果该城市发布天气预警,会在右上角弹出预警信息,默认需要手动关闭;用户数据和代办事项都是通过本地存储 localStorage 来实现对数据的存储与管理;

  • 出行事项( proceed ):以列表形式显示 todos 中完成和未完成的事项;

项目地址:http://project.microbu.com/170329/zhangjiale/

小伙伴们,看了妙味学员 王明阳 的作品有没有种想摩拳擦掌的感觉?自己也做上这样一件从策划到设计、制作、交互,全部自行完成实用性极强的作品呢?!


素质教育在于培养学员的诸方面素质为目标;在于学员能力培养,个性发展…如同一粒种子,帮它埋好土、浇好水、扎好根、发好芽;于是枝繁叶茂蓬勃发展;在无限竞争中,披荆斩棘所向披靡~


课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690

想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

妙味网友
请登录后留言,请登录注册