【前端】Vue网络应用

最新推荐文章于 2024-10-11 14:17:40 发布

钥钥睡着了

最新推荐文章于 2024-10-11 14:17:40 发布

阅读量336

点赞数

分类专栏：前端黑马学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45764950/article/details/127858847

版权

前端黑马学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue应用中利用axios进行网络请求，包括GET和POST方法的实例，以及在Vue组件中处理回调函数的问题。内容涵盖了axios的基本用法和在Vue框架下的集成，适合前端开发者学习和实践.

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

一、网络应用

1.1axios

1.2axios+vue

一、网络应用

Vue结合网络数据开发应用

1.1axios

功能强大的网络请求库

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


    axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
    axios.post(地址{key1=value1，key2=value2}).then(function(response){},function(err){})

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或者失败时触发
通过回调函数的形参可以获取响应内容或错误信息

<!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>Document</title>
</head>

<body>
    <button class="get">get请求</button>
    <button class="post">post请求</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){}) -->
    <!-- axios.post(地址?key1=value1&key2=value2).then(function(response){},function(err){}) -->
    <script>
        /*  随机笑话
        请求地址:https//autumnfish.cn/api/joke/list
        请求方法:get
        请求参数：num
        响应内容：随机笑话 */
        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);
            })
        }

        /* 用户注册
        请求地址：https://autumnfish.cn/api/user/reg
        请求方法：post
        请求参数：username
        响应内容：注册成功或失败 */
        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>
</body>

</html>

文档传送门:GitHub - axios/axios: Promise based HTTP client for the browser and node.js

1.2axios+vue

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

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的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>Document</title>
</head>

<body>
    <div id="app">
        <button @click="getJoke">获取笑话</button>
        <p>{{joke}}</p>
    </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>
    <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) {
                        that.joke = response.data;
                    },
                        function (err) {
                            console.log(err);
                        })
                }
            }
        })
    </script>
</body>

</html>