天气预报Demo

哈哈 花了一天的时间,总算是完成了天气预报的这个小Dmo了 – 访墨迹天气

  • 不过这个功能在我刚上大一的时候班级的一些学霸就已经会做了 想想现在的自己已经大三 。。。哎说多了都是泪~~~
哈哈这个小项目中,我觉得最难的是后端获取天气的这个接口最难, 一些繁琐的前端样式倒是没有什么太大的难点

在这里插入图片描述

  • 后端使用的是express这个nodejs的框架 另外用到了request–后端发起请求的模块,以前天真的以外只有前端才要发起请求,做完这个项目以后,才知道一些大数据的东西都是后端发起的请求 再传递给前端接收而已 quertstring’就是能狗很好的格式化字符串的小模块
  • 在这里插入图片描述
  • 用来接受前端发的数据的两行代码,现在虽然不是很懂原理 但是用上就对了
    在这里插入图片描述
    这里就是请求部分了 都是在聚合数据那边copy过来的 ,主要的是聚合数据那边天气的接口是免费的,我们需要传递的东西就是你要查询的城市/以及你的key key在聚合数据里面有
虽然后端的代码量不多 ,但是我觉得的及其难以消化,需要很多很多时间 -
  • 前端的代码我就不意义展示了 ,蛮简单的 几个最重要的点记录一下

在这里插入图片描述

  • 发起请i求用到axios 使用方法应该是将axios挂载到VUE原型上 之后要发起数据请求 只需要使用 h t t p . g e t http.get或者是 http.post() 因为是promise对象 所以只要使用.then()接收
    在这里插入图片描述

  • Vue提供的动画 分为两场 分别是 v-enter,v-leave-to ----- v-enter-active v-leave-active这两组动画

  • 要使用Vue提供的动画 需要使用-transition标签包裹

  • 在这里插入图片描述

  • 要使用子组件

  • 在这里插入图片描述

  • 这是定义私有组件的方式

  • 背景视频能够全屏播放(以父元素的宽高尺寸进行播放)

  • 在这里插入图片描述

  • 关键的代码语句的CSS的 object-fit: cover;

下面是这个Demo的最后的效果图

在这里插入图片描述
在这里插入图片描述