Vue vue+axios实现天气查询

一:　　注册天气查询帐号,获取API

　　　　网址:　　http://www.tianqiapi.com/index/doc?version=v1

　　　　注册登录后,复制请求示例,七天和一天API自由选择(示例包含了你的验证信息)

 

二:　　引入Vue 和 axios js文件

　　　　Vue　　  https://cdn.jsdelivr.net/npm/vue/dist/vue.js

　　　　axios　　https://unpkg.com/axios@0.21.1/dist/axios.min.js

 

三:　　将复制的请求示例,粘贴到axios.get('')括号内,与city拼接

 

 1 axios.get('请求示例复制到这里&city=' + this.city).then
 2                         (function (res) { 
 3                             that.alllist = res.data.data 
 4                         }, function (err) {
 6                             console.log(err);
 6                         })
 7                 }

 

 

 

复制代码
 1 <body>
 2     <h1>天气预报</h1>
 3     <div id="box">
 4         <img src="../HTML/img/太阳.gif" alt="" class="sun">
 5         <header>
 6             <input type="text" class="sousuokuang" @keyup.enter='searchWeather' v-model='city' placeholder="请输入城市名称">
 7             <button class="ssan" @click='searchWeather'>查询</button>
 8         </header>
 9         <section>
10             <div class="city" v-show="city!='' ">
11                 {{city+' 天气预报如下'}}
12             </div>
13             <table border="0" class="table">
14                 <tr v-show=" city!='' ">
15                     <th>日期 </th>
16                     <th>星期几</th>
17                     <th>天气</th>
18                     <th>风</th>
19                     <th>风速</th>
20                     <th>实际温度</th>
21                     <th>最高温度</th>
22                     <th>最低温度</th>
23                     <th>空气质量</th>
24                     <th>空质等级</th>
25                     <th>小贴士</th>
26                 </tr>
27 
28                 <tr v-for='item in alllist'>
29                     <td> {{item.date}} </td>
30                     <td> {{item.week}} </td>
31                     <td> {{item.wea}} </td>
32                     <td> {{item.win}} </td>
33                     <td> {{item.win_speed}} </td>
34                     <td> {{item.tem}} </td>
35                     <td> {{item.tem1}} </td>
36                     <td> {{item.tem2}} </td>
37                     <td> {{item.air || '/'}} </td>
38                     <td> {{item.air_level || '/'}} </td>
39                     <td> {{item.air_tips || '/'}} </td>
40                 </tr>
41 
42             </table>
43         </section>
44     </div>
45 
46     <script>
47 
48         var app = new Vue({
49             el: '#box',
50             data: {
51                 city: '',
52                 alllist: [],
53             },
54             methods: {
55                 searchWeather: function () {
56                     var that = this
57                     axios.get('请求示例粘贴到这&city=' + this.city).then
58                         (function (res) {
59                             //获取数据
60                             console.log(res.data);
61                             that.alllist = res.data.data
62                             console.log(that.alllist);
63                         }, function (err) {
64                             console.log(err);
65                         })
66                 }
67             },
68         })
69     </script>
70     
71 </body>
核心代码
复制代码

 

复制代码
  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>七日天气预报查询</title>
  8 
  9     <!-- 引入 axios库 -->
 10     <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
 11    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 13 
 14     <style>
 15         * {
 16             margin: 0;
 17             padding: 0;
 18         }
 19 
 20         h1 {
 21             width: 1600px;
 22             height: 50px;
 23             /* background: rgba(59, 59, 59,0.3); */
 24             font-family: '微软雅黑';
 25             color: rgba(255, 1, 1,0.5);
 26             margin: 10px auto;
 27             text-align: center;
 28         }
 29 
 30         #box {
 31             position: relative;
 32             width: 1600px;
 33             border: 1px solid rgb(253, 137, 4);
 34             margin: 50px auto;
 35         }
 36 
 37         header {
 38             display: flex;
 39             height: 50px;
 40             /* border: 1px solid red; */
 41         }
 42 
 43         .sousuokuang {
 44 
 45             width: 80%;
 46             height: 90%;
 47 
 48             font-size: 25px;
 49             text-align: center;
 50             color: red;
 51         }
 52 
 53         .ssan {
 54             width: 20%;
 55             font-size: 25px;
 56             background-color: rgb(171, 202, 32);
 57         }
 58 
 59         .ssan:hover {
 60             background: rgba(2, 69, 255, 0.1);
 61         }
 62 
 63 
 64         section {
 65             height: 600px;
 66         }
 67 
 68         .table {
 69             width: 1600px;
 70             text-align: center;
 71 
 72         }
 73 
 74         .city {
 75             width: 100%;
 76             margin: 10px auto;
 77             padding: 10px;
 78             text-align: center;
 79             font-family: '楷体';
 80             font-size: 30px;
 81             color: darkcyan;
 82         }
 83 
 84         .sun {
 85             position: absolute;
 86             width: 200px;
 87             height: 200px;
 88             top: -150px;
 89 
 90         }
 91 
 92         th {
 93             color: rgba(253, 13, 13, 0.7);
 94         }
 95 
 96         li {
 97             list-style: none;
 98         }
 99 
100         .title {
101             width: 1600px;
102         }
103         td{
104             height: 70px;
105         }
106     </style>
107 </head>
108 
109 <body>
110     <h1>天气预报</h1>
111     <div id="box">
112         <img src="../HTML/img/太阳.gif" alt="" class="sun">
113         <header>
114             <input type="text" class="sousuokuang" @keyup.enter='searchWeather' v-model='city' placeholder="请输入城市名称">
115             <button class="ssan" @click='searchWeather'>查询</button>
116         </header>
117         <section>
118             <div class="city" v-show="city!='' ">
119                 {{city+' 天气预报如下'}}
120             </div>
121             <table border="0" class="table">
122                 <tr v-show=" city!='' ">
123                     <th>日期 </th>
124                     <th>星期几</th>
125                     <th>天气</th>
126                     <th>风</th>
127                     <th>风速</th>
128                     <th>实际温度</th>
129                     <th>最高温度</th>
130                     <th>最低温度</th>
131                     <th>空气质量</th>
132                     <th>空质等级</th>
133                     <th>小贴士</th>
134                 </tr>
135 
136                 <tr v-for='item in alllist'>
137                     <td> {{item.date}} </td>
138                     <td> {{item.week}} </td>
139                     <td> {{item.wea}} </td>
140                     <td> {{item.win}} </td>
141                     <td> {{item.win_speed}} </td>
142                     <td> {{item.tem}} </td>
143                     <td> {{item.tem1}} </td>
144                     <td> {{item.tem2}} </td>
145                     <td> {{item.air || '/'}} </td>
146                     <td> {{item.air_level || '/'}} </td>
147                     <td> {{item.air_tips || '/'}} </td>
148                 </tr>
149 
150             </table>
151         </section>
152     </div>
153 
154     <script>
155 
156         var app = new Vue({
157             el: '#box',
158             data: {
159                 city: '',
160                 alllist: [],
161             },
162             methods: {
163                 searchWeather: function () {
164                     var that = this
165                     axios.get('请求示例粘贴到这&city=' + this.city).then
166                         (function (res) {
167                             //获取数据
168                             console.log(res.data);
169                             that.alllist = res.data.data
170                             console.log(that.alllist);
171                         }, function (err) {
172                             console.log(err);
173                         })
174                 }
175             },
176         })
177     </script>
178     
179 </body>
180 
181 </html>
完整代码
复制代码

 

 

效果图

 

posted @   伊凡晴天  阅读(1113)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛