Axios交互

server/2024/11/20 9:42:39/

一、什么是交互?

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

任何一个应用程序都有前端和后端
  • 前端:客户端,就是浏览器
  1. 控制页面的样式
  2.  数据的展示
  3. 接收用户输入,与用户交互
  • 后端:服务器
  1. 执行业务处理
  2. 操作数据库,返回给我们需要的数据
2. 前后端交互原理

1. 前台接收用户的信息,发送到后台
2. 后台获得信息后进行数据处理,到数据库取一些数据
3. 后台拿到数据库数据返回给前台页面进行显示

 

 . 什么是 axios

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

1.作用

  • 从浏览器中创建 XMLHttpRequests
  • node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
2.相关网址
  • 官方地址:https://github.com/axios/axios
  • 中文地址:http://www.axios-js.com/
  • 中文文档:https://www.kancloud.cn/yunye/axios/234845

. axios安装使用

使用 npm

$ npm install axios
使用 cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.发送 get 请求
<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
{
"name":"Tom",
"age":13
}
2.发送 post 请求
<!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.生命周期示例
<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); //undefinedconsole.log("data: " + this.$data); //undefinedconsole.log("message: " + this.message) //undefined// 在这个时期 ,说明 el 和 data 并未初始化// 这个时候做的操作,例如:加一些loading事件},created: function () {console.group('------created创建完毕状态------');console.log("el: " + this.$el); //undefinedconsole.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. 发送前与响应后拦截示例
<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 中。
<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.2return fmt + res;},discount : function(res, dis){console.log("res=="+res); //9999999console.log("dis=="+dis); //8return res * dis / 10;}}});
</script>
</body>


http://www.ppmy.cn/server/143442.html

相关文章

计算机网络(12)介质访问控制

ok通过前面的学习我们已经知道数据链路层提供的服务有帧封装&#xff0c;物理地址&#xff0c;流量控制&#xff0c;错误控制&#xff0c;访问控制。今天就来记录最后的访问控制。 介质访问控制 (MAC)详解 介质访问控制&#xff08;Media Access Control&#xff0c;简称 MAC&…

springboot-事务失效以及排查过程

排查了好久&#xff0c;终于解决&#xff0c;希望这次的排查过程对大家也有帮助&#xff0c;废话少说&#xff0c;上源码 开发环境 springboot 2.3.11 jdk8 gradle6.4 HikariDataSource ps: 本环节使用双数据源&#xff0c;在service层做切面拦截&#xff0c;切换具体的数据源…

linux配置动态ip

在CentOS中配置动态IP 找到你的网络接口名称&#xff0c;通常是eth0或ens33等&#xff0c;编辑对应的配置文件。这些文件通常位于/etc/sysconfig/network-scripts/目录下&#xff0c;并以ifcfg-开头。 例如&#xff0c;如果你的接口名称是eth0&#xff0c;配置文件将是ifcfg-…

【爬虫】Firecrawl对京东热卖网信息爬取(仅供学习)

项目地址 GitHub - mendableai/firecrawl: &#x1f525; Turn entire websites into LLM-ready markdown or structured data. Scrape, crawl and extract with a single API. Firecrawl更多是使用在LLM大模型知识库的构建&#xff0c;是大模型数据准备中的一环&#xff08;在…

C++系列之继承

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注再收藏 &#x1f31e; 继承的概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段&#xf…

面向服务的软件工程——业务流程合规性(Business Process Compliance)(week12)

文章目录 一、前言二、重点概念商业流程合规性概览什么是合规性?确保合规性合规生态系统基于设计的合规性方法合规性要求的来源示例:合同片段合规性的形式化义务逻辑标准义务逻辑违规悖论模型规范使规范显性化规则合并删除冗余检测冲突正常的FCL形式义务逻辑(备注)义务逻辑…

Objective-C 1.0和2.0有什么区别?

Objective-C ObjC比较小众&#xff0c;在1980年左右由Stepstone公司的Brad Cox和Tom Love发明。后来NeXT公司获得ObjC语言使用权&#xff0c;再后来到1996年NeXT被苹果公司收购也变成苹果公司使用&#xff0c;Mac市场占有率本身就不高&#xff0c;ObjC没有太多程序员。在移动互…

Mysql 数据库架构

1. 概念 数据库架构是指数据库的总体设计结构&#xff0c;它描述了数据库的组织方式、数据存储方式、数据访问方式以及各个组件之间的关系。一个良好的数据库架构能够有效地存储和管理数据&#xff0c;支持高效的数据访问和操作&#xff0c;并且能够适应业务需求的变化。 2. …