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>
相关推荐
小皮侠2 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github
HalukiSan3 小时前
如何提交PR
git·gitlab·github
爱莉希雅&&&14 小时前
shell编程之awk命令详解
linux·服务器·git
baiyu3315 小时前
成为git砖家(12): 看懂git合并分支时冲突提示符
git
wu_aceo19 小时前
将本地项目提交到Gitee
git·gitee·提交·本地提交·上传git
随便取个六字1 天前
GIT操作 学习
git·学习
星源~2 天前
tree 命令集成到 Git Bash：可视化目录结构的指南
git·单片机·物联网·嵌入式·项目开发
zhaqonianzhu2 天前
git gerrit安装钩子
git·gerrit
这是个栗子2 天前
【问题解决】VSCode终端中看不到Git-Bash
ide·git·vscode
悲伤小伞2 天前
linux_git的使用
linux·c语言·c++·git
热门推荐
01集群聊天服务器---MySQL数据库的建立02GPU 进阶笔记（二）：华为昇腾 910B GPU03Coze扣子平台完整体验和实践（附国内和国际版对比）04使用Ruby接入实时行情API教程05Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Java学习第十五部分——MyBatis08扣子空间的使用教程与大模型技术思考09DeepSeek各版本说明与优缺点分析10基于odoo17的设计模式详解---装饰模式