Vue 网络应用 - 天知道（天气预报）

原创

已于 2023-06-26 17:39:59 修改 · 905 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2023-06-22 23:30:25 首次发布

该文展示了如何结合axios和Vue.js来实现网络请求，首先通过axios获取随机密码的API作为示例，接着演示了如何构建一个天气预报应用，用户可以输入城市名搜索未来三天的天气，或从预设的热门城市中选择。应用利用Seniverse的天气API，处理搜索及数据展示，并在请求失败时提供默认反馈。

网络应用 - 天知道（天气预报）

使用 axios 发送 ajax 请求

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

使用 Vue

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

axios 结合 vue

测试接口：获取随机密码

地址：https://v.api.aa1.cn/api/api-mima/mima.php?msg=10
方法：GET
参数：msg 密码长度

html 代码 </>

+ v-on:click 绑定点击事件

<div id="app">
    <input type="button" value="获取随机密码" v-on:click="getPass">
    <p>
        {
  
  { password }}
    </p>
</div>

javascript 代码 </>

+ getPass: function (){} 发送 ajax 请求方法

const app = new Vue({
   
   
    el: "#app",
    data: {
   
   
        password: "12345678"
    },
    methods: {
   
   
        getPass: function ()
        {
   
   
            let self = this;
            axios.get("https://v.api.aa1.cn/api/api-mima/mima.phmsg=10")
                .then(res =>
                {
   
   
                    console.log(res.data);
                    self.password = res.data;
                }, err =>
                {
   
   
                    console.warn(err);
                })
        }
    }