Axios交互

懒洋洋大魔王2024-11-20 10:31

一、什么是交互？

交互就是交流互动
根据人的输入，让程序或应用去根据输入选择执行流程，提供给我们需要的信息

**1.**前端与后端

任何一个应用程序都有前端和后端

  • 前端：客户端，就是浏览器
  1. 控制页面的样式
  2. 数据的展示
  3. 接收用户输入，与用户交互
  • 后端：服务器
  1. 执行业务处理
  2. 操作数据库，返回给我们需要的数据
**2.**前后端交互原理
  1. 前台接收用户的信息，发送到后台
  2. 后台获得信息后进行数据处理，到数据库取一些数据
  3. 后台拿到数据库数据返回给前台页面进行显示

二**.什么是axios****？**

axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

**1.**作用
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
**2.**相关网址

三**. axios****安装使用**

使用 npm

复制代码 
$ npm install axios

使用 cdn

复制代码 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.发送get****请求
html 复制代码 
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>{{name}}</h1>
        <button @click="get()">GET</button>
    </div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            msg : 'Hello',
            name : 'none'
        },
        methods : {
            get : function(){
                axios.get('./a.txt', {
                    params : {
                        id : 1000
                    },
                    headers : {
                    token : 'HHHHHHHHHHHHHHH'
                    }
                }).then(res => {
                    this.msg = res.data;
                    this.name = res.data.name;
                }).catch(err =>{
                this.msg = err;
                });
            }
        }
    })
</script>
</body>

a.txt

html 复制代码 
{
"name":"Tom",
"age":13
}
2.发送post****请求
html 复制代码 
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>post方法</title>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <button @click="post"> post方法 </button>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
            data: {
                msg: "hello",
                postUrl: "http://route.showapi.com/90-87?
                showapi_appid=45300&showapi_sign=c28de9d6f79e44369a9abcd40fa3e277",
            },
            methods: {
                post() {
                    axios.post(this.postUrl, {
                        userId: "01",
                        userName: "MT"
                    }, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then( //仍然支持promise语法
                        res => {
                            // 这里我们把返回值赋值给msg显示到页面
                            this.msg = res.data;
                        }).catch(err => {
                            // 没有成功获得数据的时候，把错误打印出来
                            console.log(err)
                          })
                }
            }
        });
</script>

注意：在不同服务器下的项目需要解决跨域问题， java 中可在方法或类中添加 @CrossOrigin 注解 ， 当然也有其他方法，模板都一样上网搜粘一粘

四**. Vue.js****实例的生命周期**

**1.**什么是实例的生命周期？

生命周期： 是指实例对象从构造函数开始执行（被创建）到被 GC （ Garbage Collection ：垃圾回收）
回收销毁的整个存在的时期

**2.**什么是生命周期钩子？

在生命周期中被自动调用的函数 叫做生命周期函数，也被形象的称为 钩子函数 。
在对象从创建到被回收的整个过程中会在不同的时期有不同的钩子函数，我们可以利用不同时期的钩子
函数去完成不同的操作。

**3.**常用钩子函数
**4.**生命周期示例
html 复制代码 
<body>
    <div id='app'>
        <h1>{{message}}</h1>
        <input type="text" v-model="message" />
    </div>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        // 生命周期的写法需要注意，适合data在一个级别的
        beforeCreate: function () {
            console.group('------beforeCreate创建前状态------');
            console.log("el: " + this.$el); //undefined
            console.log("data: " + this.$data); //undefined
            console.log("message: " + this.message) //undefined
            // 在这个时期 ,说明 el 和 data 并未初始化
            // 这个时候做的操作,例如:加一些loading事件
        },
        created: function () {
            console.group('------created创建完毕状态------');
            console.log("el: " + this.$el); //undefined
            console.log("data: " + this.$data); //已被初始化
            console.log("message: " + this.message); //Vue的生命周期,说明已被初始化
            // 这个时期,data 数据已经初始化，但是 el没有
            // 这个时候可以做的操作例如:结束loading事件，还做一些初始化，实现函数自执行等
        },
        beforeMount: function () {
            console.group('------beforeMount挂载前状态------');
            console.log("el: " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("data: " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
            // 到这个时期,data 和 el 都已经 初始化
        },
        mounted: function () {
            console.group('------mounted 挂载后状态------');
            console.log("el: " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("data: " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化
            // 完成挂载，这个生命周期用的是比较多的
            // 最常见的就是:1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
         },
         beforeUpdate: function () {
            console.group('------beforeUpdate 更新前状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data : " + this.$data);
            console.log("message: " + this.message);
        },
        updated: function () {
            console.group('------updated 更新后状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用
            beforeUpdate和updated钩子函数。我们在console中输入 vm.message = '触发组件更新'
            // 这里就比较好理解了：当希望更新组件前做一些操作的时候，我们就可以调用
            beforeUpdate钩子函数，同理使用 updated 钩子函数
        },
        beforeDestroy: function () {
            console.group('------beforeDestroy 销毁前状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            // beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
        },
        destroyed: function () {
            console.group('------destroyed 销毁后状态------');
            console.log("el: " + this.$el);
            console.log(this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message);
            //destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
        }
    });
</script>
</body>

五**.在axios****中使用拦截器**

**1.**什么是全局拦截器

全局拦截器： 可在发送请求或响应请求被 then 或 catch 处理前拦截它们

  1. 发送请求之前拦截，可以对请求数据进行处理，比如给每一个请求都添加上 token 或者给请求统一
    添加一些内容
  2. 在响应请求之后拦截，我们可以对返回的数据进行二次的加工
**2.**发送前与响应后拦截示例
html 复制代码 
<body>
    <div id='app'>
        <h1>{{msg}}</h1>
        <button @click="post()">Post</button>
    </div>
<script src="js/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            msg : "Hello"
        },
        mounted : function(){
        // 在数据挂载时设置拦截器
        axios.interceptors.request.use(function(config){
            console.log("发送前...")
            return config;
        }, function(err){
            console.log(err);
            return Promise.reject(err);
        });
        axios.interceptors.response.use(function(config){
            console.log("响应后...")
            return config;
        }, function(err){
            console.log(err);
            return Promise.reject(err);
        });
    },
    methods : {
        post(){
            axios.post("http://route.showapi.com/90-87?
            showapi_appid=45300",{
                id : 1001
            },{
            headers : {
                'Content-Type' : 'application/x-www-form-urlencoded'
            }
        }).then(res => {
            this.msg = res.data;
        }).catch(err => {
            console.log(err);
        });
    }
}
})
</script>
</body>

六、Vue.js过滤器

**1.**什么是过滤器？

Vue.js 支持在 {{}} 插值的尾部添加一个管道符 " （ | ） " 对数据进行过滤，经常用于格式化文本，比如字母 的大写、货币的千位使用逗号分隔等
过滤器的本质： 就是一个有返回值的方法

**2.**过滤器的定义方法
  • 过滤的规则是自定义的，通过给Vue示例添加选项filters来设置
  • 过滤器是 JavaScript 函数，因此可以接收参数

{{ message | filterA('arg1', arg2) }}

  • 过滤器可以串联
  1. {{msg | filterA | filterB}}
  2. filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到filterB 中。
html 复制代码 
<body>
    <div id="app">
        <h1>{{bonus}}</h1>
        <h1>{{bonus | discount(8) | myCurrency('$')}}</h1>
    </div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el : '#app',
        data : {
            bonus : 9999999
        },
        filters : {
            myCurrency : function(res, fmt){
                console.log("fmt=="+fmt);//$
                console.log("res=="+res);//7999999.2
                return fmt + res;
            },
            discount : function(res, dis){
                console.log("res=="+res); //9999999
                console.log("dis=="+dis); //8
                return res * dis / 10;
            }
        }
    });
</script>
</body>
相关推荐
b1ng8 小时前
新人程序员 Git 一站式指南
git·github
程序员的世界你不懂9 小时前
IDE 关联 Git 操作
ide·git
weixin_4284984911 小时前
Git Submodule 介绍和使用指南
git
jingshaoqi_ccc1 天前
GitKraken最后一个免费版本和下载地址
git·github·gitkraken·版本管理工具
乌云暮年1 天前
Git简单命令
git·gitee·github·batch命令
用户1259265423201 天前
使用 Docker 搭建 Gitea 并实现 Git HTTP 自动登录
git
一只毛驴1 天前
谈谈对git stash的理解？
git
长风破浪会有时呀1 天前
Git 学习笔记
笔记·git·学习
中微子2 天前
Git Rebase 详解：概念、原理与实战示例
git
荔枝吻2 天前
【保姆级喂饭教程】Windows下安装Git Flow
windows·git·git flow
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径05KGG转MP3工具|非KGM文件|解密音频06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Java类变量（静态变量）08使用Ruby接入实时行情API教程09DeepSeek各版本说明与优缺点分析10基于uni-app的书法学习管理小程序的设计与实现