vue笔记——网络应用

最新推荐文章于 2024-04-26 16:47:03 发布

sadnessdry

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量113

点赞数

文章标签： vue.js html5 前端 vue

本文链接：https://blog.csdn.net/weixin_44266163/article/details/108042054

版权

网络应用

文章目录

- 网络应用

axios使用

结合网络数据开发应用，axios（网络请求库）是功能强大的网络请求库（js库），Axios 是一个基于 promise 的 HTTP 库，可以发送get、post请求

两种请求方法（get，post）

<!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    axios.get(addr?key=value&key2=value2).then(function(response){},function(err){})
    axios.post(addr,{key:value,key2=value2}).then(function(response){},function(err){})

then中的回调函数会在请求成功（response）或失败（err）时触发，根据回调函数形参获取信息

什么是回调函数

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。（百度百科）

当程序跑起来时，一般情况下，应用程序（application program）会时常通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数（callback function）。（作者：no.body 链接)

区别：选择信息前一个是字符串，后一个是对象

<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
    <!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
          //获取文档中 class="get" 的第一个元素:
         document.querySelector(".get").onclick = function(){
             //axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){
                axios.get("https://autumnfish.cn/api/joke/list12?num=3").then(function(response){
                 console.log(response);
             },function(err){
                 console.log(err);
             })
         }
         document.querySelector(".post").onclick = function(){
             axios.post("https://autumnfish.cn/api/user/reg",
             {username:"jack"})
             .then(function(response){
                 console.log(response);
             },function(err){
                 console.log(err);
             })
            }
    </script>

get请求到的数据，data是主要使用的数据

修改成不存在的网址后，得到返回的err

Network中所有分类都是XHR

xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象，jquery中的ajax就是对 xhr的封装

可知，返回对象全是xhr，axios是基于ajax的

axios+vue

随机获得joke

两个地址都包括

<!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        var app = new Vue({
            el:"#app",
            data:{
                joke:"不咋好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    console.log(this.joke);
                axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        // console.log(response);
                        console.log(response.data);
                        console.log(this.joke);
                    },function(err){

                    })
                }
            }
        })
    </script>

在这里插入图片描述

内外层this改变

在vue中，this都指向vue，然而匿名函数下，在axios中，this却指向axios。axios中回调函数的this已经改变，无法访问到data中的数据。所以this需要提前保存

修改代码：

getJoke:function(){
                    console.log(this.joke);
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        // console.log(response);
                        //console.log(response.data);
                        //console.log(this.joke);
                        that.joke=response.data;
                    },function(err){

                    })
                }

在这里插入图片描述

也可以这么改：

getJoke:function(){
                    //console.log(this.joke);
                    axios.get("https://autumnfish.cn/api/joke").then((response)=>{
                        // console.log(response);
                        console.log(response.data);
                        this.joke=response.data;
                    },function(err){

                    })
                }
            }

箭头函数

因为箭头函数是没有定义this，当在箭头函数内部用到this后会从他的父级作用域（vue）寻找。

天知道应用（查询天气）

1.回车查询

（1）按下回车（v-on，enter）

（2）查询数据（axios接口，v-model）

（3）渲染数据（v-for，that）

逻辑代码写入js文件

html文件

<div class="wrap" id="app">
         <div class="search_form">
             <div class="form_group">
                 <input type="text" v-model="city" @keyup.enter="searchWeather"
                 class="input_text" placeholder="请输入查询城市">
                 <button class="input_sub" @click="searchWeather">
                     搜 索
                 </button>
             </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_temptu">
                     <b>{{ item.low }}</b>
                     ~
                     <b>{{ item.high }}</b>
                 </div>
                 <div class="info_data"><span>{{ item.date }}</span></div>

             </li>
         </ul>
     </div>
    <!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--导入main.js文件-->
    <script src="main.js"></script>

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);
                //console.log(response.data.data.forecast);
                that.weatherList=response.data.data.forecast
            })
            .catch(function(err){
                
            })
        }
    }
})

输入查询

知识点：

.then和.catch中只会执行一个

DIV标签称为区隔标记。作用：设定字、画、表格等的摆放位置。当把文字，图象，或其他的放在DIV中，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。

2.点击查询（点击预设的城市，显示数据）

（1）点击城市（v-on 自定义参数）

（2）查询数据（this.function()）

（3）渲染数据

里添加

<div class="hotkey">
                 <a href="javascript:;" @click="changeCity('北京')">北京</a>
                 <a href="javascript:;" @click="changeCity('达州')">达州</a>
                 <a href="javascript:;" @click="changeCity('上海')">上海</a>
                 <a href="javascript:;" @click="changeCity('青岛')">青岛</a>
             </div>

methods里添加

changeCity:function(city){
            this.city=city;
            this.searchWeather();
        }

[ 点击查询

可以调用其他方法

func自定义参数使代码复用性更高

sadnessdry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue笔记——网络应用

网络应用文章目录网络应用axios使用两种请求方法（get，post）axios+vue随机获得joke内外层this改变箭头函数天知道应用（查询天气）1.回车查询2.点击查询（点击预设的城市，显示数据）axios使用结合网络数据开发应用，axios（网络请求库）是功能强大的网络请求库（js库），Axios 是一个基于 promise 的 HTTP 库，可以发送get、post请求两种请求方法（get，post） <script
复制链接

扫一扫