前端：基于Vue框架以及Axios实现天气预报系统

Vue框架

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装vue框架：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Axios

Axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。
特点：
1、从浏览器中创建 XMLHttpRequest
2、从 node.js 发出 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防止 CSRF/XSRF

安装Axios：（在这里我使用的是本地的axios，当然也可以使用线上的）

<script src="axios.min.js"></script>  //本地
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> //线上cdn导入

axios也经常与Vue框架一块使用，本例就是同时使用两者。

天气预报的代码实现（代码中有相应的解释）：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}#app{width: 400px;margin: 50px auto;}.search {width: 400px;margin: 0 auto;}.search input{height: 32px;width: 300px;}.search button{width: 50px;height: 35px;}.citys a{text-decoration:none}.info>ul>li{list-style: none;}</style></head>
<body><div id="app"><div class="search"><input type="text" v-model="inputCity" placeholder="请输入要查询的城市"><button type="submit" @click="changeCity">搜索</button></div><div class="info"><div>当前城市：{{city}}</div><div>当前温度：{{wendu}} ℃</div><hr><h3 style="margin-top:20px;margin-bottom:20px;">未来五天的天气变化</h3><hr><ul v-for="one in wutian"><li>日期：{{one.date}} </li><li>天气:{{one.type}}</li><li>温度:{{one.low}}~{{one.high}}</li><hr /></ul><div><b>温馨提醒</b>：{{ganmao}}</div></div></div><!-- 安装VUE --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 安装Axios --><script src="axios.min.js"></script><script>//创建一个vue对象,映射到一个标签上，所有映射到的标签都能够使用vue来操作let vue = new Vue({  //可以在id为app的标签中使用的数据el:"#app",  data:{wendu:"0",data:"0",wutian:[],ganmao:"感冒提醒：",city:"北京",inputCity:"",},methods:{changeCity:()=>{vue.city = vue.inputCity;axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +vue.city).then((response)=>{console.log(response.data.data);//将数据加到vue的data中去vue.city = response.data.data.city;vue.wendu = response.data.data.wendu;vue.ganmao = response.data.data.ganmao;vue.wutian = response.data.data.forecast;}).catch((error)=>{//错误处理alert("访问异常");});}},mounted(){//从网络上获取天气信息,来源于国家气象局//then表示正常的获取地址之后，catch表示网络请求异常//界面一开始默认显示北京的天气状况axios.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").then((response)=>{console.log(response.data.data.ganmao);//将数据加到vue的data中去vue.city = response.data.data.city;vue.wendu = response.data.data.wendu;vue.ganmao = response.data.data.ganmao;vue.wutian = response.data.data.forecast;console.log(vue.ganmao);}).catch((error)=>{//错误处理alert("访问异常");});}});</script>
</body>
</html>

界面显示：

前端：基于Vue框架以及Axios实现天气预报系统相关推荐

vue 回车查询按钮_前后端分离商城，前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接项目简介本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码221604
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
（附源码）Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
完整企业官网源码，前端基于Vue+ElementUI，后台基于基于core3 webapi，含数据库文件，含详情安装部署文档
完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档完整代码下载地址:完整企业官网源码某工程管理有限公司企业官网前端新版 ...
java计算机毕业设计基于vue框架的疫情防控知识在线答题系统设计与实现源程序+mysql+系统+lw文档+远程调试
java计算机毕业设计基于vue框架的疫情防控知识在线答题系统设计与实现源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计基于vue框架的疫情防控知识在线答题系统设计与实现源程序+m ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
springboot基于VUE框架的商城综合项目设计与实现毕业设计源码
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...

前端：基于Vue框架以及Axios实现天气预报系统

Vue框架

Axios

前端：基于Vue框架以及Axios实现天气预报系统相关推荐

最新文章

热门文章