一: 注册天气查询帐号,获取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 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 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 80%; 46 height: 90%; 47 48 font-size: 25px; 49 text-align: center; 50 color: red; 51 } 52 53 .ssan { 54 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 1600px; 70 text-align: center; 71 72 } 73 74 .city { 75 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 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 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>
效果图
