vue（5）（网络应用，axios，天气预报实例）

最新推荐文章于 2023-07-26 10:58:01 发布

MIMO. mimo

最新推荐文章于 2023-07-26 10:58:01 发布

阅读量329

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/mimo_mimo/article/details/129539388

版权

网络应用

vue结合网络数据进行开发应用

一、axios基本使用

axios是功能强大的网络请求库

需要先导包

 <Script src="https://unpkg.com/axios/dist/axios.min.js"></Script>

导入后会在页面上注册一个全局的axios对象，可以通过它来发送请求

常见的请求方法

get请求

地址==就是文档提供的接口地址

.then方法内部传递的第一个回调函数会在请求反应完成后触发，第二个回调函数会在请求失败时候触发

他们的形参可以用来获取信息：服务器的响应内容，错误的信息

axios.get(地址).then(function(response){},function(err){})

如果需要查询参数，就在地址的后边加上查询字符串

查询字符串格式：key=value&key=value2

axios.get(地址?查询字符串).then(function(response){},function(err){})

post请求

数据是以对象的形式写在post方法的第二个参数位置

axios.post(地址,参数对象).then(function(response){},function(err){})

参数对象格式：key:value,key:value2

axios.post(地址,{key:value,key:value2}).then(function(response){},function(err){})

key由接口文档提供，value是具体要传输的数据

例子：get请求获得六条笑话

<body>
    <button class="get">get请求</button>
    <button class="post">post请求</button>

    <!-- AXIOS -->
    <Script src="https://unpkg.com/axios/dist/axios.min.js"></Script>
    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>

在这里插入图片描述

二、axios和vue结合使用

我们可以看到获取到的笑话在data中

获取笑话后this的指向不是Vue，而是windows，它没有data属性了，需要赋值给临时变量
that=this，进行引用传递

<!DOCTYPE html>
<html lang="en">
<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>axios+vue</title>
    <!-- 官方提供的axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{joke}}</p>
    </div>
    <script>
       var app=new Vue({
           el:"#app",
           data:{
               joke:"笑话"
           },
           methods:{
               getJoke:function(){
                //this在刷新之后指向不是vue实例了，需要赋值给临时变量
                //获取笑话后this的指向不是Vue，而是windows，它没有data属性了
                // that=this，进行引用传递
                var that=this;
                   axios.get("https://autumnfish.cn/api/joke")
                   .then(function(response){
                       console.log(response);
                       //可以看到笑话在data中
                       console.log(response.data);
                       
                       that.joke=response.data;
                       //也可以直接app.joke=response.data;
                   },function(error){
                       console.log(error);
                   })
               }
           }
       })
    </script>
</body>
</html>

和本地应用的区别在于改变了数据来源

天气预报实例

回车查询
点击查询

查询注意：
渲染数据时需要做引用传递that=this

vue中proxyTable配置方法

proxyTable:{
 '/api': {
    
        target: 'http:172.168.0.1:8081',  //目标接口域
        changeOrigin: true,  //是否跨域
        secure: false,//当是https的时候改成false
        pathRewrite: {   //当有统一path此处可不写，效果一样
          '^/api': '/api'   //重写接口
        }
}

引入到config文件下的index.js中的proxyTable：{ }之中

令 target: ‘接口域名’

用/api来替代js项目中获取接口位置的域名