vue axios实战,请求天气预报接口
效果预览
创建流程
1. 创建项目目录
mkdir test2
2. 进入目录
cd test2
3. 引入vue
引入vue, 一路敲回车就行了
npm init vue@latest
4. 启动项目
创建成功,启动项目
cd vue-project
npm install
npm run dev
执行run 后的访问结果
> vue-project@0.0.0 dev
> viteVITE v4.0.1 ready in 401 ms➜ Local: http://localhost:5173/➜ Network: use --host to expose➜ press h to show help
访问 http://localhost:5173/ 可以看到这个界面,就说明vue启动成功
5. 引入axios
先按control + c 退出运行界面, 然后引入axios
npm i axios
6. 粘贴axios请求天气代码
打开这个页面 /vue-project/src/components/HelloWorld.vue 把下面代码全部覆盖进去, 之前的删掉就行
<script>import axios from 'axios';export default {data() {return {img: '',weather: ''}},mounted() {let appid = '';//43656176let appsecret = '';//I42og6Lmconsole.log('mounted')axios({method: 'get',url: 'https://v0.yiketianqi.com/api/worldchina?appid=' + appid + '&appsecret=' + appsecret}).then(res => {console.log(res.data);this.weather = res.datathis.img = 'https://xintai.xianguomall.com/skin/peach/' + res.data.day.phrase_img + '.png';});},}
</script><template><div v-if="weather" style="text-align: center;"><img alt="Vue logo" class="logo" src="/src/assets/logo.svg" width="125" height="125" /><h3>{{weather.city}} 今日天气</h3><h3>{{weather.month[0].night.temperature}}℃ ~ {{weather.month[0].day.temperature}}℃ <img v-bind:src="img" width="20" style="vertical-align: sub;" /> {{weather.day.phrase}}</h3><p>空气质量:<a>{{weather.day.air_level}}</a> 气压:<a>{{weather.day.altimeter}}mb</a> 湿度:<a>{{weather.day.humidity}}%</a></p><p>白天:{{weather.month[0].day.narrative}}</p><p>夜间:{{weather.month[0].night.narrative}}</p><p style="padding: 30px 0; color:#999999;">数据来源:<a href="https://tianqiapi.com/index/doc?version=worldchina" target="_blank">Tianqiapi.com</a></p></div>
</template>
7. 重新启动项目
然后在执行 npm run dev 刷新下浏览器, 就可以看到天气接口请求成功了!
附天气api传参文档
参数名 | 必选 | 类型 | 说明 | 备注(示例) |
---|---|---|---|---|
appid | 是 | string | 用户appid | |
appsecret | 是 | string | 用户appsecret | |
cityid | 否 | string | 城市ID | 请参考 城市ID列表 |
city | 否 | string | 城市名称 | 不要带市、区、县; 如: 青岛、铁西、梁山 |
province | 否 | string | 所在省 | 防止city重名, 不要带省; 如: 山东、上海、广西 |
ip | 否 | string | IP地址 | 查询IP所在城市天气 |
lng | 否 | String | 经度 | 如: 119.545023 (需额外开通lbs权限) |
lat | 否 | String | 纬度 | 如: 36.044254 |
point | 否 | String | 坐标体系 | 默认百度坐标, 如使用高德坐标, 请传参: gaode |
callback | 否 | string | jsonp参数 | 如: jQuery.Callbacks |
vue | 否 | string | 跨域参数 | 如果您使用的是react、vue、angular请填写值: 1 |
vue axios实战,请求天气预报接口相关推荐
- vue ajax如何设置同步,vue axios同步请求解决方案
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配 ...
- Vue+Axios同步请求
axios本身是没有同步请求的,要实现同步请求,用到的是ES7的async和await ES7的异步特性async / await async用于声明一个函数是异步的,await用于声明在一个异步函数 ...
- vue axios POST请求中参数以form data和request payload形式的原因
HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value& ...
- vue 同步加载_vue axios同步请求解决方案
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求 ...
- 【VUE项目实战】17、通过接口获取菜单并渲染
接上篇<16.主页Header和左侧菜单栏布局> 上一篇我们编写了头部Header和左侧菜单栏的布局样式,本篇我们来通过接口获取菜单数据,并重新加载菜单至左侧菜单栏. 一.获取菜单数据的权 ...
- vue如何封装请求接口方法
vue如何封装请求接口方法 方法一 首先创建一个server.js文件 引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs fr ...
- vue+axios请求时设置request header请求头(带上token)
vue+axios请求时设置请求头(带上token) 1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,wind ...
- axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
- axios vue 回调函数_VUE使用axios调用后台API接口的方法
VUE使用axios调用后台API接口的方法 引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可 ...
- vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...
最新文章
- eclipse 源码设置UTF-8 (eclipse可以为JSP HTML 等各种文件不同编码格式设置) 在windows - preference- general-workspace
- 保守的机器学习如何拯救日新月异的我们
- Eddy的难题_JAVA
- JAVA JDBC详解
- 网页小图标Favicon
- 洛谷 P3367 【模板】并查集
- Python笔记四之操作文件
- tomcat如何进入管理页面 manager/html 配置方法
- 记录下帮助一位网友解决的关于android子控件的onTouch或onClick和父OnTouch 冲突的问题。
- 好搜独立,三分天下成历史
- 文字识别成语音_广东人专属!微信语音转文字可以识别粤语了!
- Java性能优化的35个细节(珍藏版)
- 汽车软件通信中间件iceoryx和它的零拷贝技术
- jmeter录制 过滤_Jmeter(二)-使用代理录制脚本
- 获取网页中的视频下载地址(利用抓包)
- 利用python进行数据分析-数据聚合与分组运算2
- (软件工程)-- 总体设计报告
- crc生成多项式java_CRC 生成多项式
- 嫦娥奔月(神话,非航天器)
- C++版本OpenCv教程(四十三)直线拟合