Vue框架学习-Vue网络应用

最新推荐文章于 2023-06-16 13:55:27 发布

极客不撩妹

最新推荐文章于 2023-06-16 13:55:27 发布

阅读量195

点赞数

分类专栏：前端学习 Vue 文章标签： vue js javascript vue.js 前端

本文链接：https://blog.csdn.net/u011708337/article/details/112548012

版权

前端学习同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

Vue

6 篇文章 0 订阅

订阅专栏

本文介绍Vue框架中使用axios进行网络应用的实践，包括axios的基本使用，如get和post请求，以及axios在Vue中的应用，解决回调函数中this指针问题。文章通过一个查询天气的应用案例，展示了如何在Vue中处理用户输入并利用axios获取数据，强调了代码组织和回调函数中this的管理。

摘要由CSDN通过智能技术生成

前言

本文是Vue框架学习的第三部分-Vue的网络应用，主要学习axios以及和Vue结合的使用。
学习资料来源是B站的一个教学视频，我在文末会附上链接。

axios基本使用

功能强大的网络请求库

<script src="http://unpkg.com/axios/dist/axios.min.js"></script>

axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

提供了两个预先准备好的接口

通过get请求获取笑话的接口
通过post请求注册用户的接口

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link rel="stylesheet" type="text/css" href=""/>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">

    <!-- 官方提供的axios在线地址 -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口1:随机笑话
            请求地址:https://autumnfish.cn/api/joke/list
            请求方法:get
            请求参数:num（笑话条数，数字）
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function (response) {
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
        /*
            接口2:用户注册
            请求地址:https://autumnfish.cn/api/user/reg
            请求方法:post
            请求参数:username（用户名，字符串）
            响应内容:注册成功或失败
        */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg",{username:"zxy"})
            .then(function (response) {
                console.log(response);
            },function(err){
                console.log(err);
            })
        }
    </script>    
</body>

</html>

axios小结

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法

axios+Vue

axios如何结合vue开发网络应用
axios+Vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios+Vue</title>
    <link rel="stylesheet" type="text/css" href=""/>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p>
            {{ joke }}
        </p>
    </div>
    <!-- 官方提供的axios在线地址 -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then
                    (function(response){
                        console.log(response);
                        that.joke = response.data;
                    },function(err) {

                    })
                }
            }
        })
    </script>

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

</html>

axios回调函数中的this已经改变，无法访问到data中的数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用最大的区别就是改变了数据来源

案例练习：天知道

查询天气的应用
天知道

回车查询
- 按下回车（v-on .enter）
- 查询数据（axios 接口 v-model）
- 渲染数据（v-for 数组 that）
点击查询
- 点击城市（v-on 自定义参数）
- 查询数据（this.方法()）
- 渲染数据（this.方法()）
  
  html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios+Vue</title>
    <link rel="stylesheet" type="text/css" href=""/>
</head>

<body>
    <div class="wrap" id="app">
        <div class="search-form">
            <div class="logo"></div>
            <div class="form-group">
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气">
                <button class="input_sub" @click="searchWeather">
                    搜 索
                </button>
            </div>
            <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>
        </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>

    <!-- 官方提供的axios在线地址 -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入自己的js -->
    <script src="./js/weather.js"></script>
</body>

</html>

JavaScript部分：


/*
    请求地址:https://wthrcdn.etouch.cn/weather_mini
    请求方法:get
    请求参数:city（城市名）
    响应内容:天气信息

    1. 点击回车
    2. 查询数据
    3. 渲染数据
*/

var app = new Vue({
    el:"#app",
    data:{
        city:'',
        weatherList:[]
    },
    methods: {
        searchWeather:function(){
            // console.log("天气查询");
            // 保存this
            var that = this;
            // 调用接口
            axios.get('https://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .then(function(response){
                that.weatherList = response.data.data.forecast;
            })
            .catch(function(err){})
        },
        changeCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

回车查询

应用的逻辑代码建议和页面分离，使用单独的js文件编写
axios回调函数中this指向改变了，需要额外的保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构

点击查询

自定义函数可以让代码复用性更高
methods中定义的方法内部，可以通过this关键字点出其他方法

极客不撩妹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue框架学习-Vue网络应用

前言本文是Vue框架学习的第三部分-Vue的网络应用。学习资料来源是B站的一个教学视频，我在文末会附上链接。axios基本使用功能强大的网络请求库<script src="http://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})axios.post(地址,{ke
复制链接

扫一扫