前端系列--vue组件化开发及前后端交互(2)

已于 2023-05-11 17:55:24 修改
阅读量1.1k 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
于 2020-06-16 15:42:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44427572/article/details/106769557
版权

前面我们已经介绍了vue的基础内容，下面介绍vue中一个十分重要的内容–vue的组件化开发及前后端交互：

1、组件

1.1组件基本概念

  • 组件 (Component) 是 Vue.js 最强大的功能之一；
  • 组件可以扩展 HTML 元素，封装可重用的代码；
    在这里插入图片描述
    总的来说组件化开发就是将软件的功能拆分成多个组件然后分别进行实现；

1.2组件注册

注册分为全局注册以及局部注册，同理全局注册是在所有的vue实例中使用，局部组件只能在当前vue实例中使用：

<div id="example">
  <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  
  <my-component></my-component>
</div>
<script>
    //   注册组件 
    // 1、 my-component 就是组件中自定义的标签名
	Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

    // 创建根实例
    new Vue({
      el: '#example'
    })

</script>

如上在全局中注册的则是全局组件，但是上面的是最简单的组件形式，不存在参数，下面介绍在组件中带数据以及方法的情况：

<div id="app">
     <!-- 
		4、  组件可以重复使用多次 
	      因为data中返回的是一个对象所以每个组件中的数据是私有的
		  即每个实例可以维护一份被返回对象的独立的拷贝   
	--> 
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
      <!-- 8、必须使用短横线的方式使用组件 -->
     <hello-world></hello-world>
  </div>

<script type="text/javascript">
	//5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
    // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    });
    
    
    
    Vue.component('button-counter', {
      // 1、组件参数的data值必须是函数 
      // 同时这个函数要求返回一个对象  
      data: function(){
        return {
          count: 0
        }
      },
      //  2、组件模板必须是单个根元素
      //  3、组件模板的内容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">点击了{{count}}次</button>
          <button>测试123</button>
			#  6 在字符串模板中可以使用驼峰的方式使用组件	
		   <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

上面的组件都是在vue实例外的所以都是全局组件，下面介绍局部组件：

 <div id="app">
      <my-component></my-component>
  </div>


<script>
    // 定义组件的模板
    var Child = {
      template: '<div>A custom component!</div>'
    }
    new Vue({
      //局部注册组件  
      components: {
        // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
        'my-component': Child
      }
    })
 </script>

注意，组件是可以多次调用的，且每次调用的数据是互不相通的：
在这里插入图片描述
在这里插入图片描述
此外，还要注意其命名规则：
在这里插入图片描述
推荐使用短横线命名法，使用驼峰命名法的话在普通标签中仍要将其改成短横线调用；


1.2vue调试工具

我们使用组件后在浏览器的调试工具中只能看到dom元素（因为组件最终都会被渲染成dom元素），由于无法直接看到组件来源这样不利于我们开发调试，所以这里引入vue调试工具进行辅助，安装使用步骤如下：
在这里插入图片描述
此时再于控制台中可以看到：
在这里插入图片描述

1.3组件中传值

组件中的传值分为父子组件之间以及兄弟组件之间的传值：


1.3.1父组件向子组件传值

这里包括向孙辈组件的传值，如下：

  • 父组件发送的形式是以属性的形式绑定值到子组件身上；
  • 然后子组件用属性props接收；
  • 在props中使用驼峰形式，模板中需要使用短横线的形式，字符串形式的模板中没有这个限制；
    在这里插入图片描述
<div id="app">
    <div>{{pmsg}}</div>
     <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
     <!-- 给子组件传入一个静态的值 -->
    <menu-item title='来自父组件的值'></menu-item>
    <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置（而上面传静态值时不用冒号） 此时 ptitle  来自父组件data 中的数据 . 
		  传的值可以是数字、对象、数组等等
	-->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>

  <script type="text/javascript">
    Vue.component('menu-item', {
      // 3、 子组件用属性props接收父组件传递过来的数据  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>

注意上面的父组件是vue实例，因为vue实例也属于组件，子组件中的ptitle是父组件data中传来的数据；


1.3.2子组件向父组件传值

子组件向父组件传值是通过在子组件中传递自定义事件然后在父组件中对其进行监听实现的，主要如下：

  • 子组件用$emit()触发事件
  • $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
  • 父组件用v-on 监听子组件的事件

单纯触发事件不传值时如下所示：
在这里插入图片描述
若要传值则如下所示，值通过$event进行接收：
在这里插入图片描述
但如果处理函数复杂我们是要将其写到父组件的methods中的，如下所示：

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父组件用v-on 监听子组件的事件
		这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
	-->	
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-携带参数
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
			###  1、子组件用$emit()触发事件
			### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });
  </script>

1.3.3兄弟组件中传值

  • 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
    • 提供事件中心 var hub = new Vue()
  • 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
  • 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
  • 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
    在这里插入图片描述
<div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    //1、 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

则上面代码实现了点击一个组件按钮另外一个组件加1或者2的操作；


1.4组件插槽

之前是父组件向子组件中传递数据，现在介绍父组件向子组件中传递内容模板（html）：
在这里插入图片描述
插槽分为匿名插槽与具名插槽：

1.4.1匿名插槽

 <div id="app">
    <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
		# 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
		# 插槽内可以包含任何模板代码，包括 HTML
		#上面的有bug发送、有一个警告则会代替默认内容进行显示
          <slot>默认内容</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

1.4.2具名插槽

具名插槽即是slot带有name属性绑定元素的插槽，其插槽的配对是有要求的：

 <div id="app">
    <base-layout>
       <!-- 2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上
				如果没有匹配到 则放到匿名的插槽中   --> 
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

    <base-layout>
      <!-- 注意点：template临时的包裹标签最终不会渲染到页面上     -->  
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
			###	1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
			###  注意点： 
			###  具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

显示结果分别如下：
在这里插入图片描述
可见在调用组件时根据名称进行匹配，没有匹配到的则放入普通slot插槽中；
在这里插入图片描述
template只是临时包裹一下内容并不会渲染到页面中，用template可以把多对标签填入；

1.4.3作用域插槽

上面的只是在父组件中使用子组件的内容，但有时需求是拿到子组件的内容后对其进行加工处理，这时要用到作用域插槽：

  • 父组件对子组件加工处理
  • 既可以复用子组件的slot，又可以使slot内容不一致
<div id="app">
    <!-- 
		1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
		但样式希望不一样 这个时候我们需要使用作用域插槽 
		
	-->  
    <fruit-list :list='list'>
       <!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
			slotProps在这里只是临时变量   
		---> 	
      <template slot-scope='slotProps'>
      #对子组件中的内容进行加工如果满足条件进行高亮显示
        <strong v-if='slotProps.info.id==3' class="current">
            {{slotProps.info.name}}		         
         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
			###  3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
			###   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
					如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>


2、前后端交互

关于前后端交互之前我们之前学过原生ajax、jquery中的ajax，在vue中其给我们提供了fetch api以及axios第三方库供我们使用；

在介绍正式的内容之前先复习一下之前学过的url地址知识：

传统的url地址组成如下：
在这里插入图片描述
在这里插入图片描述
下面介绍restful风格的url地址，其主要是通过不同的请求方式来实现不同的请求效果：
在这里插入图片描述
在这里插入图片描述

再复习一下异步的概念：

  • JavaScript的执行环境是「单线程」
  • 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
  • 异步模式可以一起执行多个任务
  • JS中常见的异步调用
    • 定时任何
    • ajax
    • 事件函数

2.1promise相关

promise是异步编程的一种解决方案，其本质上是一个对象（也是函数，因为函数也是对象），从它可以获取异步操作的消息；
在这里插入图片描述
下面介绍其基本用法：
在这里插入图片描述
其实例对象常用方法如下：

.then()
  • 得到异步任务正确的结果
.catch()
  • 获取异常信息
.finally()
  • 成功与否都会执行（不是正式标准）

如下：

<script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的（即可以在then中写两个函数或者将捕获异常放在catch中也可以）
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行（不是正式标准） 
      .finally(function(){
        console.log('finished')
      });
  </script>

上面只是通过设置定时来模仿promise的使用，下面介绍其在ajax中的使用，由于使用原生的ajax函数在多次调用且有顺序要求时则会造成回调地狱，而通过promise的then方法则：
在这里插入图片描述
这里每次都return回了一个新的promise对象（queryData函数返回的是promise对象），然后下面的then就是该对象的实例方法，实现了顺序的控制；

下面详细介绍promise对象中then方法在返回不同值时的不同：
在这里插入图片描述
第一种情况我们在上面已经介绍了；
第二种情况，如下，在后面的then中function的形参data就是hello字符串（上面的then会生成一个默认的promise对象去调用第二个then）：
在这里插入图片描述

此外，promise还有其他方法，下面再介绍两个常用方法：

.all()
  • Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定； 即并发处理多个任务，所有任务执行完才会返回结果；
.race()
  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数；并发处理多个任务只要一个任务处理完就会返回结果；

如下，先定义多个实例对象，然后使用两种方法，前者打印出来所有的返回值，而后者只打印出请求最快的结果：
在这里插入图片描述


2.2 fetch API

  • Fetch API是新的ajax解决方案 Fetch会返回Promise
  • fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
  • fetch(url, options).then(）

基本使用如下，返回的data.text是一个promise对象，然后在then中拿到结果：
在这里插入图片描述

 <script type="text/javascript">
    /*
      Fetch API 基本用法
      	fetch(url).then()
     	第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      //   在这个then里面我们能拿到最终的数据  
      console.log(data);
    })
  </script>

上面是不带参数的传参，下面介绍附加上不同的请求参数、请求方式、请求头等情况：

  • fetch(url, options).then(）
  • HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
    • 默认的是 GET 请求
    • 需要在 options 对象中 指定对应的 method method:请求使用的方法
    • post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
<script type="text/javascript">
        /*
              Fetch API 调用接口传递参数
        */
       #1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 
        fetch('http://localhost:3000/books?id=123', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一个Promise实例对象，用于获取后台返回的数据
                return data.text();
            }).then(function(data) {
            	# 在这个then里面我们能拿到最终的数据  
                console.log(data)
            });

      #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
        fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #2.1  DELETE请求方式参数传递      删除id  是  id=789
        fetch('http://localhost:3000/books/789', {
                method: 'delete'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #3 POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
            	# 3.1  传递数据 
                body: 'uname=lisi&pwd=123',
            	#  3.2  设置请求头 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       # POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
                #注意这里的json对象类型要将其转成json字符串
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
                #这里写明json数据类型，注意post请求其实也可以使用原本的url数据类型（相应的这里请求头也要进行改变）
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        # PUT请求传参     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });
    </script>

下面介绍fetch的响应结果：

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等…

   /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  将获取到的数据使用 json 转换对象
      return data.text(); //  //  将获取到的数据 转换成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      //可以在上面将数据转换成对象，也可以在这里转
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

2.3 axios第三方库

其功能相比fetch则更加强大，主要特点如下：

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据

在使用时我们只需下载器相应的js文件并将其引入到项目中即可使用，同理其也多种请求方式，下面分别进行解释说明：

  • get和 delete请求传递参数
    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数
  • post 和 put 请求传递参数
    • 通过选项传递参数
    • 通过 URLSearchParams 传递参数
 # 1. 发送get 请求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })
	# 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	#3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# 4  axios 的 post 请求
    # 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	#5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

相应的，下面介绍axios的响应结果：之前fetch请求的结果需要手动将其转换成对象，而axios拿回来已经自动将其处理成了对象不再需要我们手动转换；

下面介绍axios的全局配置：我们可以在进行一些设置在简便自己发送请求时的填写功能等，如下：

#  配置公共的请求头（设置了以后就不用再于下面的请求中写完整的url，而只写具体地址即可） 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头（这个在登录功能中有应用）
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type（这个在下面同类请求多时可以使用）
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

最后介绍axios的拦截器：

  • 请求拦截器
    • 请求拦截器的作用是在请求发送前进行一些操作
      • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
  • 响应拦截器
    • 响应拦截器的作用是在接收到响应后进行一些操作
      • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
# 1. 请求拦截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
      # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       #1.3 对请求错误做点什么    
      console.log(err)
    })
	#2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
      #2.1  在接收响应做些什么  （对数据进行相应处理，在axios中拿到的就直接是处理过的数据了）
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })

2.4 async与await

上面的方法在需要链式调用then，这样还是不够简洁，这里介绍async以及await的概念，其可以将异步直接按同步的写法：，其特点如下：

# 1.  async 基础用法
    # 1.1 async作为一个关键字放到函数前面
	async function queryData() {
      # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

	#2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      #2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      #其实也可以不返回，直接在函数中修改数据以达到相应效果（如果返回就是在then中拿到的形参）
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })
黄家琛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyplayer--基于Vue框架、组件化开发的第三方网易云音乐播放器
09-02
本文将深入探讨"easyplayer"，这是一个利用Vue.js框架和Element-UI库进行组件化开发的第三方网易云音乐播放器。该播放器具备丰富的功能，包括网易云音乐账号登录、MV播放以及歌词显示等，为用户提供了便捷且个性化的...
VUE前后端分离之数据交互（简单项目作为演示）
weixin_45928161的博客
03-11 2万+
文章目录一、添加后端访问依赖二、建立后端三、配置前端 提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点 一、添加后端访问依赖 进入前端vue项目，进入内部或外部终端 输入如下代码并安装 cnpm install axios --save cnpm install qs --save 安装好之后可以在package.json中看到添加的依赖 在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖） 引入
VUE进行前后端交互
young_man2的博客
03-22 8172
vue前后端访问
Vue前后端交互
淘小欣的博客
04-30 1万+
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
Springboot+Vue实现简单的前端后分离数据交互
热门推荐
Young_深情不及里子的博客
09-02 6万+
学习前后端分离的同学看过来，一篇文章带你了解一下当前一个简单前后端分离的后台系统的数据交互实现过程，告别传统JSP，模板引擎式的系统开发。
vue前端和后端交互实现（最简单）
qq_63656102的博客
06-25 1710
后端接收的话其实也很简单，后端目前比较热门的是springboot，在springboot里面的接收也比较简单，大家感兴趣可以自行去查看资料，我这里举例的是node后端接收，相信这个能看懂那么springboot也问题不大。以上所举的例子都是最简单的网络请求，但是在实际情况中，一般都是对网络请求进行封装到一个js文件里面的，这里就不举例了，大家先把最基础的学会，后面在加深了解就可以了。知道的前端和后端的基础之后，那么我们就得先知道前端该如何去请求，在前端中，最原始的请求就是去。当然大家也可以用异步的。
renren.zip_diseaseiwf_renren-_vue_前后端分离_管理系统前端
09-23
标题中的"renren.zip_diseaseiwf_renren-_vue_前后端分离_管理系统前端"表明这是一个关于人人网(diseaseiwf可能是一个错误拼写，应该是"renren")的项目，使用了Vue.js技术实现前后端分离的管理系统前端。这个项目...
前端开发-基于Vue开发的商城前端实现.zip
04-02
1. **组件化开发**：Vue的核心特性之一是组件化，它允许我们将UI拆分为可复用的组件，每个组件都有自己的视图和数据逻辑。在商城开发中，如商品列表、购物车、个人中心等都可以抽象为独立的组件。 2. **虚拟DOM**：...
前端开发-电影智能推荐系统的前端实现-基于vue实现.zip
最新发布
04-02
2. **组件化开发**： - **组件定义**：Vue中的组件是可复用的代码块，可以封装HTML、CSS和JavaScript。 - **组件通信**：组件间通信主要通过props（属性）传递数据，使用自定义事件（event bus）或Vuex进行复杂...
第3章 Vue前端定义实现与后端数据交互访问
zhoujian_911的专栏
09-22 2675
4、通过'axios'内置包，把从后端获取的数据导出绑定到RoleView.vue视图中 4.1 关于 'axios'内置包的导入 在vue3中'axios'内置包是可以直接在指定的js文件或vue文件中被导入为局部变量，且可以被javascript方法正常调用并执行。 注意：'axios'内置包也是可以被导入在main.js文件中配置全局变量，但是如果想要在js文件或vue文件中正常调用并执行'axios'内置包，依赖需要在js文件或vue文件中定义'axios'内置包的导入，即在vue3中'axio
三、vue前后端交互（轻松入门vue）
莫安逸无风雪
06-12 3万+
Vue前后端交互六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法**then参数中的函数返回值**基于Promise处理多个Ajax请求demoPromise常用API3. fetch进行接口调用fetch基本用法fetch请求参数fetch响应结果4. axios进行接口调用axios基本用法axios的常用API（参数传递）5. asyns/await接口调用async/await的基本用法多个异步请求的场景 六、Vue前后端交互 项目中一般结合asyn
Vue3学习(三)前后端数据交互
m0_64393446的博客
06-26 2590
pom配置阿里云仓库启动成功创建数据库表t_user实现增删改查sql语句SQL语句打印：Mybatis开启下划线自动转驼峰统一包装类Result。
Vue-components封装组件
Mr.小灰狼_随笔
05-01 4991
Vue-components封装组件 整理一下自己在 Vue2 项目中常用到的一些封装组件 ： 大部分是结合 element-ui 组件库 进行的二次封装 ： 目录 1、Input 输入框 2、Table 表格 3、Tree 树形控件 4、Pagination 分页 5、Dialog 对话框 6、ECharts 图表 7、wangEditor 富文本编辑器...
使用vue实现前后端交互
m0_72713521的博客
01-05 1954
------------------------------------以上配置均为SpringBoot+Vue----------------------------------------------------后端属于是（Tomcat服务器 端口号为：8080），要想实现前后端数据交互，需要配置跨域（注解跨域---只有当前类或当前方法进行跨域）；前端：(注册全局axios)定义axios.js全局变量；后端：因为前后端使用的是两个不同的服务器，前端属于是（Node服务器，端口号为：9999）
spring boot与VUE的前后端交互
yi742891270的博客
08-11 4万+
一、准备 默认认为会了简单的spring boot知识和vue知识 1、前端 先安装好vue cli，没有的点这里 2、后端 后端IDEA安装vue.js插件就OK了 二、创建前端VUE项目 就进入CMD，挑个好路径，输入vue ui 然后打开IDEA，导入文件就可以 三、IDEA打开VUE与操作 1、打开 上面我们是通过vue cli 来创建一个VUE项目而已，其他的可以关闭了 在IDEA中，Terminal控制台输入npm run serve就可运行VUE 2、VUE的结构 先看下App.v
vue使用axios进行前后端数据交互(简单、详细教程)
weixin_44738322的博客
12-13 3882
vue使用axios进行前后端数据交互(简单、详细教程)
vue项目引入element组件，实现前后端交互和数据的传递
li-zhang-yu的博客
12-16 1万+
一：vue项目引入element组件 1：element官网地址：http://element.eleme.io/#/zh-CN/component/installation 2：element组件安装 然后直接引入相关组件的代码即可。 二：实现前后端交互和数据的传递 1：在build文件夹下的index.js中加入与后端交互的路径。 2：在Test.vue页面中引入a...
vue 前后端交互(解决新手的尴尬)
唯心所现，唯识所变
11-30 2758
前后端交互 一、请求时，要求携带参数或者请求头怎么写 二、获取后端数据，如何按照格式获取 一、 1.1 每个请求都要求携带上token， 位置：请求头 那么可以进行全局配置，在上次的博客中有详细说到如何配置。 1.2 某些请求要求携带userId， 位置：请求头 一般来说，userId都是在登录成功的时候，存放在localStorage中，那么我们去那里提取就好啦~ let userId = localStorage.getItem('userId') let config = {
外卖项目-前后端分离-前端vue-后端springboot
07-16
综上所述，外卖项目采用前后端分离的架构，前端使用Vue.js框架进行开发，后端使用Spring Boot框架进行开发，能够提高开发效率和代码的可维护性，同时还能够满足用户对于界面交互和数据操作的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值