Home > Article > Web Front-end > A brief analysis of how to use axios and vue to implement simple weather query

A brief analysis of how to use axios and vue to implement simple weather query

青灯夜游forward: 2023-02-22 19:34:002022browse

How to use axios and vue to implement simple weather query? The following article will introduce to you how to implement simple weather query in vue axios. I hope it will be helpful to you!

Let’s take a look at the renderings first. The principle is very simple, just the calling of the interface, the presentation of data, and the layout of the interface.

A brief analysis of how to use axios and vue to implement simple weather query

As shown above, we can see that after entering the correct city name, the weather for the next four days and a total of six days yesterday and today will be queried. When an incorrect name is entered, a prompt will be displayed and cleared. Input field [Related recommendations: vuejs video tutorial, web front-end development]

1. Resource introduction:

1. Because it is a vue project, we need to introduce vue, official website: vue official website, we use cdn method to introduce:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. Use axios for data request Send, axios official website axios, we will also use the cdn method to import:

<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3. We need the elementUI part to complete the interface style and prompt part, official website: elementUI We are using the vue2.x version:

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. Implementation:

1.HTML:

First we lay out the interface, with the search bar at the top and the result display part below:

 <div id="app">
        <div class="head">
            <el-input v-model="city" style="width: 60%;" placeholder="请输入城市名"></el-input>
            <el-button type="primary" @click="btn">查询</el-button>
            <p v-if="show" style="display: block;margin-top: -50x;">您查找的城市为:<span>{{nowcity}}</span> ,现在温度为:<span>{{wendu}}<sup>。</sup></span>,感冒情况:<span>{{ganmao}}</span></p>
        </div>
        <div class="bottom">
            <div v-if="show" class="seeday">
            </div>
        </div>
 </div>

2.CSS:

As we all know, css is the style layer. In order to beautify the interface, we carry out the following style design:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}ul>li {
    list-style: none;}#app {
    width: 900px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 1px 1px 15px #dfdfdf;}.head {
    width: 100%;
    height: 20%;
    line-height: 70px;
    text-align: center;}.head p span {
    font-weight: 400;
    font-size: 18px;}.bottom {
    width: 100%;
    height: 80%;
    overflow: auto;}.seeday {
    width: 300px;
    height: 200px;
    box-shadow: 1px 1px 15px #dfdfdf;
    display: inline-block;
    margin-left: 70px;
    margin-top: 20px;
    margin-bottom: 20px;}.seeday span {
    display: inline-block;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #000;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 50px;}.seeday ul {
    margin-left: 10px;}.seeday ul>li {
    width: 100%;
    height: 30px;}

3.js:

After the interface layout is completed, we should proceed with the js logic part. :

1. First build vue, which requires mounting points and data storage we need:

var vue = new Vue({
    // 挂载点
    el: '#app',
    data() {
        return {
            // 收入框
            city: '',
            // 存储近几天以及今天的天气
            list: [],
            // 昨天的天气
            yesterday: [],
            // 是否显示
            show: false,
            // 当前搜索的城市
            nowcity: '',
            // 现在的温度
            wendu: '',
            // 感冒情况
            ganmao: ''
        }
    },
    })

2. Operations performed when clicking the query button:

      btn() {
      //判断输入框是否为空
            if (this.city == &#39;&#39;) {
                this.$message({
                    message: &#39;请输入城市名&#39;,
                    type: &#39;error&#39;
                });
            } else {
            //axios进行请求的擦擦送
                axios.get(&#39;http://wthrcdn.etouch.cn/weather_mini?city=&#39; + this.city).then(res => {
                //返回状态正常
                    if (res.status == 200) {
                        console.log(res.data)
                        //如果查询城市状态异常
                        if (res.data.desc == "invilad-citykey") {
                            this.$message({
                                message: &#39;请输入正确的城市名&#39;,
                                type: &#39;error&#39;
                            });
                            //输入框置空
                            this.city = &#39;&#39;
                        } else {
                            this.$message({
                                message: `共查找到 ${(res.data.data.forecast).length+1} 条数据`,
                                type: &#39;success&#39;
                            });
                            //成功时候显示查询到的数值
                            this.show = true
                            this.nowcity = res.data.data.city
                            this.wendu = res.data.data.wendu
                            this.ganmao = res.data.data.ganmao
                            this.yesterday = res.data.data.yesterday
                            this.list = res.data.data.forecast
                        }
                    }
                    //请求发送异常
                }).catch(err => {
                    this.$message({
                        message: &#39;服务异常,请稍后重试&#39;,
                        type: &#39;error&#39;
                    });
                })
            }
        }

3. Detailed code:

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询</title>
    <!-- 引入自定义的css -->
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="app">
        <div>
            <el-input v-model="city" style="width: 60%;" placeholder="请输入城市名"></el-input>
            <el-button type="primary" @click="btn">查询</el-button>
            <p v-if="show" style="display: block;margin-top: -50x;">您查找的城市为:<span>{{nowcity}}</span> ,现在温度为:<span>{{wendu}}<sup>。</sup></span>,感冒情况:<span>{{ganmao}}</span></p>
        </div>
        <div>
            <div v-if="show">
                <span>{{yesterday.date}}</span>
                <ul>
                    <li>风力:{{yesterday.fl}}</li>
                    <li>风向:{{yesterday.fx}}</li>
                    <li>高温:{{yesterday.high}}</li>
                    <li>低温:{{yesterday.low}}</li>
                    <li>天气:{{yesterday.type}}</li>
                </ul>
            </div>
            <div v-for="(item,index) in list" :key="index">
                <span>{{item.date}}</span>
                <ul>
                    <li>风力:{{item.fengli}}</li>
                    <li>风向:{{item.fengxiang}}</li>
                    <li>高温:{{item.high}}</li>
                    <li>低温:{{item.low}}</li>
                    <li>天气:{{item.type}}</li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入自定义的js -->
    <script src="./index.js"></script>
</body>

</html>

index.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul>li {
    list-style: none;
}

#app {
    width: 900px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 1px 1px 15px #dfdfdf;
}

.head {
    width: 100%;
    height: 20%;
    line-height: 70px;
    text-align: center;
}

.head p span {
    font-weight: 400;
    font-size: 18px;
}

.bottom {
    width: 100%;
    height: 80%;
    overflow: auto;
}

.seeday {
    width: 300px;
    height: 200px;
    box-shadow: 1px 1px 15px #dfdfdf;
    display: inline-block;
    margin-left: 70px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.seeday span {
    display: inline-block;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #000;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 50px;
}

.seeday ul {
    margin-left: 10px;
}

.seeday ul>li {
    width: 100%;
    height: 30px;
}

index.js

var vue = new Vue({
    // 挂载点
    el: &#39;#app&#39;,
    data() {
        return {
            // 收入框
            city: &#39;&#39;,
            // 存储近几天以及今天的天气
            list: [],
            // 昨天的天气
            yesterday: [],
            // 是否显示
            show: false,
            // 当前搜索的城市
            nowcity: &#39;&#39;,
            // 现在的温度
            wendu: &#39;&#39;,
            // 感冒情况
            ganmao: &#39;&#39;
        }
    },
    methods: {
        btn() {
            if (this.city == &#39;&#39;) {
                this.$message({
                    message: &#39;请输入城市名&#39;,
                    type: &#39;error&#39;
                });
            } else {
                axios.get(&#39;http://wthrcdn.etouch.cn/weather_mini?city=&#39; + this.city).then(res => {
                    if (res.status == 200) {
                        console.log(res.data)
                        if (res.data.desc == "invilad-citykey") {
                            this.$message({
                                message: &#39;请输入正确的城市名&#39;,
                                type: &#39;error&#39;
                            });
                            this.city = &#39;&#39;
                        } else {
                            this.$message({
                                message: `共查找到 ${(res.data.data.forecast).length+1} 条数据`,
                                type: &#39;success&#39;
                            });
                            this.show = true
                            this.nowcity = res.data.data.city
                            this.wendu = res.data.data.wendu
                            this.ganmao = res.data.data.ganmao
                            this.yesterday = res.data.data.yesterday
                            this.list = res.data.data.forecast
                        }
                    }
                }).catch(err => {
                    this.$message({
                        message: &#39;服务异常,请稍后重试&#39;,
                        type: &#39;error&#39;
                    });
                })
            }
        }
    }
});

## Four. Example:

A brief analysis of how to use axios and vue to implement simple weather query (Learning video sharing:
vuejs introductory tutorial, Basic programming video)

The above is the detailed content of A brief analysis of how to use axios and vue to implement simple weather query. For more information, please follow other related articles on the PHP Chinese website!

css elementui html 接口 JS

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：An article to talk about global guards in VueNext article：An article to talk about global guards in Vue

See more

A brief analysis of how to use axios and vue to implement simple weather query

1. Resource introduction:

2. Implementation:

3. Detailed code:

## Four. Example:

Related articles