vue网络应用：天气查询

通过vue网络应用建立的天气查询网页

功能：

1.点击查询城市天气
2.按键输入查询天气
3.默认城市天气查询
4.查询失败返回
5.界面隐藏

技术应用：

1.html5，css3布局：采用流失布局为主，flex布局为辅。
2.vue本地应用于网络应用。
3.axios接口。
4.网络应用接口。
5.git工具部署静态网页。

技术逻辑：

1.回车查询：输入内容按下回车，通过双向绑定和enter绑定按键事件，调用接口，将输入的内容传递到服务器，接受到服务器返回的内容之后，渲染成列表界面。
2.点击查询：绑定点击事件，将输入值传递给服务器。
3.默认城市查询：将默认城市赋值到城市变量中上传至服务器，接收返回数据。

测试接口：

请求地址：http://wthrcdn.etouch.cn/weather_mini

示例：http://wthrcdn.etouch.cn/weather_mini?city=深圳
请求方法：get
请求参数：city

网页效果如下：

阿闷天气

js代码：

/* 获取 json 格式的天气
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city */
var app = new Vue({el: "#app",data: {city: '请输入要查询的城市名称.',cityWeather: []},methods: {weather: function () {var thad = this;axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+ this.city).then(function (response) {// console.log(response.data.data.forecast);thad.cityWeather = response.data.data.forecast;}).catch(function (err) {alert('查询不到输入的名称。');})},cityList: function (city) {this.city = city;this.weather();},clear: function () {this.city = '';},mouseAdd: function ($event) {// console.log('鼠标经过');$event.currentTarget.className = "nav_bd mouse";},mouse: function ($event) {// console.log('鼠标移出');$event.currentTarget.className = "nav_bd";}}})

vue网络应用：天气查询相关推荐

vue+axios天气查询——天知道效果展示及源码分析
使用vue制作城市的天气查询 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
Vue(axios与Vue结合、天气查询案例)
Vueday3 文章目录 Vueday3 网络应用 axios(网络需求库) axios + Vue ==案例1==:天知道天气查询网络应用 Vue结合网络数据开发应用 axios(网络需求库) 导 ...
vue实现查询多条记录_vue.js 实现天气查询
效果预览:http://songothao.gitee.io/weather_query_based_on_vuejs/ 项目已上传码云:叁贰壹/vuejs实现天气查询知乎视频www.zhihu. ...
vue中axios的基本使用，天气查询案例
axios是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染,即页面局部更新技术. axios发送GET请求 axios.get("url地址") ...
2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】
文章目录 1.引言 2.天知道概述 3.模板展示 4.回车键查询功能开发 5.点击查询功能开发 6.js完整代码及接口 7.结束语点击进入Vue❤学习专栏~ 1.引言最近呢,也是在自学Vue中,通 ...
基于node的cmd迷你天气查询工具
1.前几天网上看到的,于是自己小改了一下,更换了天气查询的接口,当作练习一下node. 2.收获挺大的,捣鼓了一天,终于学会了发布npm包. 3.接下来,就介绍一下这个 mini-tianqi 的主要 ...
查python的软件_[Python实战]Python制作天气查询软件
以前,公众号分享了如何使用 PyQt5 制作猜数游戏和计时器,这一次,我们继续学习:如何使用 PyQt5 制作天气查询软件. 开发环境Python3 PyQt5 requests 准备工作首先要获取 ...
python小爬虫之天气查询
python小爬虫之天气查询刚开始研究爬虫,这个小程序通过抓取网页源代码,使用json解析实现了天气的查询. 1.需求分析该博客实现了简单的天气查询功能,输入城市名称后可以查询出该城市的天气情况. ...
python语音播报计算结果_Python 天气查询到实现语音播放
import requests #引用requests模块 import pygame # 获取天气 def inquery(self): url = "https://free-api.h ...