我不是他i 发表于 2019-11-24 02:24:53

基于vue和axios的天气查询

本帖最后由 我不是他i 于 2019-11-24 02:27 编辑

**** Hidden Message *****基于vue.js和axios.js制作的天气查询，是个学习vue.js非常时候拿来练手的小项目
这是html的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气查询</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app" class="wrap">
      <div class="search_form">
            <div class="logo">天气查询</div>
            <div class="form_group">
                <input type="text" @keyup.enter="searchweather" class="input_text" placeholder="请输入查询的天气" v-model="city">
                <button class="input_sub">
                  搜索
                </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;">北京</a>
                <a href="javascript:;">上海</a>
                <a href="javascript:;">广州</a>
                <a href="javascript:;">深圳</a>         
            </div>
      </div>
      <ul class="weather_list">
            <li v-for="item in weatherList">
                <div class="info_type"><span class="iconfont">{{ item.type }}</span></div>
                <div class="info_temp">
                  <b>{{ item.low }}</b>
                  ~
                  <b>{{ item.high }}</b>
                </div>
                <div class="info_date"><span>{{ item.date }}</span></div>
            </li>
      </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./main.js"></script>
</body>
</html>

注意：这里的vue和axios的引用是没有先后关系的
这里是css的代码
/*style.css*/
*{
    padding: 0px;
    margin: 0px;
}
#app {
    text-align: center;
    margin: 100px 0px;
}
.logo {
    font-size: 20px;
    font-family: "宋体";
}
.form_group {
    margin-top: 10px;
}
.input_text {
    height: 30px;
    width: 500px;
}
.input_sub {
    height: 34px;
    border: none;
    width: 50px;
    margin-left: -5px;
    vertical-align: middle;
    background-color: skyblue;
}
.hotkey>a {
    color: black;
    text-decoration: none;
}
.hotkey {
    margin-top: 10px;
    margin-left: -400px;
}
.weather_list>li {
    height: 100px;
    display: inline-block;
    list-style: none;
    border-right: 3px salmon solid;
    margin-right: 30px;
    padding-right: 30px;
    margin-top: 10px;
    line-height: 35px;
}
这里是js的代码了
//main.js
var app = new Vue({
    el:"#app",
    data:{
      city:"",
      weatherList:[],
    },
    methods: {
      searchweather:function(){
            // console.log("查询天气");
            // console.log(this.city);
            var that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){
                console.log(response.data.data.forecast);
                that.weatherList = response.data.data.forecast;
            })
      }
    },
})
主要就是使用axios和vue的相互结合啦

v.逆天改命 发表于 2019-12-18 21:56:38

666666

F小冷 发表于 2020-7-7 15:31:46

np

cjw011 发表于 2020-7-7 17:12:21

学习一下

心驰神往 发表于 2021-11-5 14:05:53

恢复

旺旺仔小馒头 发表于 2021-11-5 19:35:02

不错
页: [1]
查看完整版本: 基于vue和axios的天气查询