04- Vue基础之前后端交互通信

最新推荐文章于 2024-08-31 08:00:00 发布
最新推荐文章于 2024-08-31 08:00:00 发布
阅读量2.2k 收藏 17
点赞数 4
分类专栏： 前端相关技术 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583303/article/details/118340529
版权

文章目录

Vue基础之前后端交互通信

  • 在前面我们所看的数据都是前端自己提供的数据——假的数据
  • 接下来我们学习如何进行前后端交互，从后台拿到真正的数据，填充到前端页面，替代假数据

01.接口的调用方式

  • 原生ajax：老了
  • 基于jQuery的ajax：老了
  • fetch：ajax升级版
  • axios：第三库（重要）

Axios ：前端通信框架，因为Vue边界很明确，就是为了处理DOM，所以不具备通信能力，此时需要额外使用一个通信框架与服务器进行交互，也可以使用JQuery提供的AJAX通信功能。

1.1.URL地址格式

1.1.1.传统形式的URL

格式：schema://host:port/path?query#fragment

  • schema：协议，例如：http，https
  • host：域名或者IP地址
  • port：端口，http默认80端口，可以省略
  • path：路径
  • query：查询参数，例如：usernameaismall&age=18
  • fragment：锚点，用于定位页面的某个位置
1.1.2.Restful形式的URL

HTTP请求的方式

  • GET：查询
  • POST：添加
  • PUT：修改
  • DELETE：删除

符合规则的URL地址

  • http://www.hello.com/books GET
  • http://www.hello.com/books POST
  • http://www.hello.com/books PUT
  • http://www.hello.com/books DELETE

02.异步

2.1.简介

  • JavaScript的执行环境是「单线程」

  • 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程

  • 异步模式可以一起执行多个任务

  • JS中常见的异步调用

    • 定时任何
    • ajax
    • 事件函数

  • 多次异步调用依赖分析

    • 多次异步调用的结果顺序不确定

      因为是异步调用，并不是你按照什么顺序调用，就会按照什么顺序返回，要看哪个调用方法先占据线程，把数据返回：

      $ajax.(
    url:'http://localhost:8080/data1',
    success:function(data){
     console.log(data)
});
$ajax.(
    url:'http://localhost:8080/data2',
    success:function(data){
     console.log(data)
});
$ajax.(
    url:'http://localhost:8080/data3',
    success:function(data){
     console.log(data)
});

这样的调用在控制台打印的结果顺序不一定是data1，data2，data3

    • 如果调用结果中存在依赖关系，我们就只能进行嵌套调用（因为顺序调用的返回结果顺序无法确定）

      $ajax({
	success:function(data){
        if(data.status==200){
            $ajax({
                success:function(data){
                    if(data.status==200){
                        ......
                    }
                }
            });
        }
    }
});
使用上面的嵌套调用（回调地狱），解决方法：使用Promise

2.2.Promise用法

2.2.1.Promise概述

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获得异步操作多的消息

使用Promise的好处

  • 可以避免多层异步调用嵌套问题（回调地狱）
  • promise 提供了简洁的API 使得异步操作更加容易

查看Promise属性：console.log(typeof(Promise))

查看Promise的函数：console.dir(Promise)

2.2.2.Promise的基本用法
  • 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
  • resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果
var p=new Promise(function(resolve,reject){
	//成功时调用resolve
	//失败时调用reject
});
p.then(fucntion(ret){
	//从resolve获得正常的结果
},function(ret){
	//从reject获得错误消息
});

注意：resolve和reject都是方法（函数）
  • 示例：
<script type="text/javascript">
     //1.定义一个Promise对象
    var p = new Promise(function(resolve, reject){
      //2. 这里用于实现异步任务  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情况
          resolve('hello');
        }else{
          //4. 异常情况
          reject('出错了');
        }
      }, 100);
    });
    //  5 Promise实例生成以后，可以用then方法调用resolved状态或者reject状态的回调函数 
    //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
</script>
2.2.3.基于Promise发送Ajax请求(重要)

1.处理原生Ajax(了解即可)

<script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    //定义一个独立的函数
    function queryData(url) {
     #   1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            # 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
            # 1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
	# 注意：这里需要开启一个服务 
    # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
    #执行完queryData函数之后会返回一个Promise对象，然后紧接着调用then方法，处理这个对象
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        # 1.4 想要继续链式编程下去 需要 return  
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>
2.3.4.then参数的函数返回值

1.返回Promise实例对象

  • 返回该实例对象会调用下一个then，将实例对象中的参数传递给then中的函数的参数
<script type="text/javascript">
    /*
      then参数中的函数返回值
    */
    function queryData(url) {
      return new Promise(function(resolve, reject){
      	 var flag=true;
      	 if(flag){
      	 	// 处理正常的情况
            resolve("服务器正常");
          }else{
            // 处理异常情况
            reject('服务器错误');
      	 }
          });
    }
    queryData('url')
      .then(function(data){
        console.log(data);
      })
 </script>

2.返回普通值

  • 返回普通值会直接传递给下一个then，通过then参数中函数的参数接收该值
<script type="text/javascript">
    /*
      then参数中的函数返回值
    */
    function queryData(url) {
      return new Promise(function(resolve, reject){
      	 var flag=true;
      	 if(flag){
      	 	// 处理正常的情况
            resolve("服务器正常");
          }else{
            // 处理异常情况
            reject('服务器错误');
      	 }
          });
    }
    queryData('url')
      .then(function(data){
        console.log(data);
        return "我是普通值";
      }).then(function(data){
        console.log(data);
    })
 </script>

2.3.Promise基本API

2.3.1.实例方法

  • p.then()：得到异步任务正确的结果

  • p.catch()：获取异常信息

  • p.finally()：成功与否都会执行（不是正式标准）

<script type="text/javascript">
    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')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行（不是正式标准） 
      .finally(function(){
        console.log('finished')
      });
</script>
2.3.2.静态方法(可以直接使用对象调用)
  • Promise.all()：并发处理多个异步任务，所有任务都执行完才能得到结果

Promise.all()方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为Promise实例（如果不是一个Promise，该项会被用Promise.resolve转换为一个Promise)，它的状态由这三个Promise实例决定

Promise.all([p1,p2,p3]).then(result=>{
	console.log(result);
})
  • Promise.race()：并发处理多个异步任务，只要有一个任务执行完就能得到结果

Promise.race()方法同样接受一个数组作参数，当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），Promise的状态就跟着改变，并把第一个改变状态的Promise的返回值，传给Promise的回调函数

Promise.race([p1,p2,p3]).then(result=>{
    console.log(result);
})
  • 实例：
<script type="text/javascript">
    function queryData1(url) {
      return new Promise(function(resolve, reject){
          var flag=true;
          if(flag){
              resolve("服务器正常1");
          }else{
              reject('服务器错误1');
          }
      });
    }
    
    function queryData2(url) {
      return new Promise(function(resolve, reject){
          var flag=true;
          if(flag){
              resolve("服务器正常2");
          }else{
              reject('服务器错误2');
          }
      });
    }
    
    function queryData3(url) {
      return new Promise(function(resolve, reject){
          var flag=true;
          if(flag){
              resolve("服务器正常3");
          }else{
              reject('服务器错误3');
          }
      });
    }

    var p1 = queryData1('http://localhost:3000/a1');
    var p2 = queryData2('http://localhost:3000/a2');
    var p3 = queryData3('http://localhost:3000/a3');
    Promise.all([p1,p2,p3]).then(function(result){
       console.log(result) //["服务器正常1", "服务器正常2", "服务器正常3"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      //由于p1执行较快，Promise的then()将获得结果'P1',p2,p3仍在继续执行，但执行结果将被丢弃。
      console.log(result) // 服务器正常1
    })
</script>

03.接口调用fetch用法(了解)

3.1.fetch概述

基本特性：

  • 更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr(传统ajax)的升级版。
  • 基于Promise实现

语法结构：

fetch(url).then(fun1)
          .then(fun2)
          ...
          .catch(fun)

3.2.fetch的基本用法

fetch('/abc').then(data=>{
	return data.text();
	}).then(ret=>{
	//注意这里才是最终得到的数据
	console.log(ret)
	});

3.3.fetch基本API

  • Fetch API是新的ajax解决方案 Fetch会返回Promise
  • fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
  • Fetch API 基本用法

fetch(url).then()：第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果

<script type="text/javascript">
    fetch('http://localhost:3000/data').then(function(data){
      //text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      //在这个then里面我们能拿到最终的数据  
      console.log(data);
    })
</script>

3.4.fetch请求参数

3.4.1.概述

fetch(url, options).then(）

1.常用配置选项

  • method(String)：HTTP请求方法。默认GET（GET，POST，PUT，DELETE）
  • body(String)：HTTP的请求参数
  • heads(Object)：HTTP的请求头，默认为{}
  • 除了GET请求，需要在options 中 设置 请求头headers 和 body
fetch('/abc', {
       method: 'get',
      }).then(function(data) {
       return data.text();
      }).then(function(data) {
       //在这个then里面我们能拿到最终的数据  
       console.log(data)
       });
3.4.2.fetchAPI中的HTTP请求
<script type="text/javascript">
       #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',
            	# 3.1 传递数据 
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
            	#  3.2 设置请求头 
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        # 4 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>

3.5.fetch响应结果

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

数据响应格式：

  • text()：将返回体处理成字符串类型
  • json()：返回结果和JSON.parse(responseText)一样
fetch(url).then(function(data){
    return data.json();   //将获取到的数据使用 json 转换对象
}).then(function(data){
     console.log(data.uname)
     console.log(typeof data)
})

fetch(url).then(function(data){
    return data.text();   //  将获取到的数据 转换成字符串 
}).then(function(data){
    var obj = JSON.parse(data);
    console.log(obj.uname,obj.age,obj.gender)
})

04.接口调用axios用法(重要)

4.1.axios的基本特性

  • 基于Promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据
axios.get(url).then(function(ret){ 
      //拿到ret(形参)是一个对象,所有的对象都存在ret的data属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      console.log(ret.data)
      console.log(ret)
    })

4.2.axios基础用法(参数传递)

  • get和 delete请求传递参数
    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数
  • post 和 put 请求传递参数
    • 通过选项传递参数
    • 通过URLSearchParams 传递参数
    # 1. 发送get请求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      // 注意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)
    })

4.3.axios的响应结果

响应结果的主要属性：

  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息

4.4.axios 全局配置

#  配置公共的请求头 
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';

4.5.axios 拦截器

  • 请求拦截器：请求拦截器的作用是在请求发送前进行一些操作
    • 例如：在每个请求体里加上token，统一做了处理如果以后要改也非常容易
# 1. 请求拦截器 ，形参config为包装请求的对象
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. 响应拦截器，形参res为包装返回的对象
axios.interceptors.response.use(function(res) {
    #2.1 在接收响应做些什么  
    var data = res.data;
    # 2.2  这里一定要return，我们只获取返回的data
    return data;
}, function(err){
    #2.2 对响应错误做点什么  
    console.log(err)
})

05.接口调用async和await

5.1.概述

1、async/await是ES7引入的新语法，可以更加方便进行异步操作

2、async作为一个关键字放到函数前面

  • 任何一个async函数都会隐式返回一个Promise

3、await关键字只能在使用async定义的函数中使用

  • await后面可以直接跟一个 Promise实例对象

  • await函数不能单独使用

4、async/await 让异步代码看起来、表现起来更像同步代码

async function queryData(id) {
    //可以直接通过await获得返回的Promise对象
  const ret=await axios.get('/data');
    return ret;
}
queryData.then(ret=>{
    console.log(ret);
})

5.2.接口调用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);
    return ret.data;
}

queryData().then(function(data){
    console.log(data)
})

06.图书列表案例

1. 基于接口案例-获取图书列表

  • 导入axios 用来发送ajax
  • 把获取到的数据渲染到页面上
  <div id="app">
        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.  把books  中的数据渲染到页面上   -->
                    <tr :key='item.id' v-for='item in books'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date }}</td>
                        <td>
                            <a href="">修改</a>
                            <span>|</span>
                            <a href="">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
	1.  导入axios   
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        /*
             图书管理-添加图书
         */
        # 2   配置公共的url地址  简化后面的调用方式
        axios.defaults.baseURL = 'http://localhost:3000/';
        axios.interceptors.response.use(function(res) {
            return res.data;
        }, function(error) {
            console.log(error)
        });

        var vm = new Vue({
            el: '#app',
            data: {
                flag: false,
                submitFlag: false,
                id: '',
                name: '',
                books: []
            },
            methods: {
                # 3 定义一个方法 用来发送 ajax 
                # 3.1  使用 async  来 让异步的代码  以同步的形式书写 
                queryData: async function() {
                    // 调用后台接口获取图书列表数据
                    // var ret = await axios.get('books');
                    // this.books = ret.data;
					# 3.2  发送ajax请求  把拿到的数据放在books 里面   
                    this.books = await axios.get('books');
                }
            },

            mounted: function() {
				#  4 mounted  里面 DOM已经加载完毕  在这里调用函数  
                this.queryData();
            }
        });
    </script>

2 添加图书

  • 获取用户输入的数据 发送到后台
  • 渲染最新的数据到页面上
 methods: {
    handle: async function(){
          if(this.flag) {
            // 编辑图书
            // 就是根据当前的ID去更新数组中对应的数据
            this.books.some((item) => {
              if(item.id == this.id) {
                item.name = this.name;
                // 完成更新操作之后，需要终止循环
                return true;
              }
            });
            this.flag = false;
          }else{
            # 1.1  在前面封装好的 handle 方法中  发送ajax请求  
            # 1.2  使用async  和 await 简化操作 需要在 function 前面添加 async   
            var ret = await axios.post('books', {
              name: this.name
            })
            # 1.3  根据后台返回的状态码判断是否加载数据 
            if(ret.status == 200) {
             # 1.4  调用 queryData 这个方法  渲染最新的数据 
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },        
 }

3 验证图书名称是否存在

  • 添加图书之前发送请求验证图示是否已经存在
  • 如果不存在 往后台里面添加图书名称
    • 图书存在与否只需要修改submitFlag的值即可
 watch: {
        name: async function(val) {
          // 验证图书名称是否已经存在
          // var flag = this.books.some(function(item){
          //   return item.name == val;
          // });
          var ret = await axios.get('/books/book/' + this.name);
          if(ret.status == 1) {
            // 图书名称存在
            this.submitFlag = true;
          }else{
            // 图书名称不存在
            this.submitFlag = false;
          }
        }
},

4. 编辑图书

  • 根据当前书的id 查询需要编辑的书籍
  • 需要根据状态位判断是添加还是编辑
 methods: {
        handle: async function(){
          if(this.flag) {
            #4.3 编辑图书   把用户输入的信息提交到后台
            var ret = await axios.put('books/' + this.id, {
              name: this.name
            });
            if(ret.status == 200){
              #4.4  完成添加后 重新加载列表数据
              this.queryData();
            }
            this.flag = false;
          }else{
            // 添加图书
            var ret = await axios.post('books', {
              name: this.name
            })
            if(ret.status == 200) {
              // 重新加载列表数据
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },
        toEdit: async function(id){
          #4.1  flag状态位用于区分编辑和添加操作
          this.flag = true;
          #4.2  根据id查询出对应的图书信息  页面中可以加载出来最新的信息
          # 调用接口发送ajax 请求  
          var ret = await axios.get('books/' + id);
          this.id = ret.id;
          this.name = ret.name;
        },

5 删除图书

  • 把需要删除的id书籍 通过参数的形式传递到后台
   deleteBook: async function(id){
          // 删除图书
          var ret = await axios.delete('books/' + id);
          if(ret.status == 200) {
            // 重新加载列表数据
            this.queryData();
          }
   }
彤彤的小跟班
关注
专栏目录
vue怎么和python后端交互_Vue - 与后端交互
weixin_30956665的博客
02-05 6618
零：与后端交互 - ajax版本1 - 出现了跨域问题前端：index.htmlhtml>Vue与后端交互-出现了跨域问题加载数据letvm=newVue({el:'#box',data:{},methods:{handleClick(){$.ajax({url:'http://127.0.0.1:5000/',//发送请求的url，本地的5000端口，是flask的...
vue后台管理系统-前端vue+后端springboot开发的图书馆后台管理系统.zip
04-04
这个“vue后台管理系统_前端vue+后端springboot开发的图书馆后台管理系统”项目，是一个完整的全栈解决方案，涵盖了前端界面设计、后端服务开发、数据存储和交互等多个环节，对于学习和实践 Web 开发技术具有很高的...
详解vue与后端数据交互(ajax)：vue-resource
08-31
本篇文章主要介绍了详解vue与后端数据交互(ajax)：vue-resource，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
04Vue的前后端交互
攻城老湿的博客
02-01 205
Vue的前后端交互 Promise用法 异步调用 触发异步调用的方式 定时任务 Ajax 事件函数 多次异步调用的依赖分析 多次异步调用由于不同接口相应时间的差异，导致返回结果的顺序不确定。 若想得到确定顺序的异步调用结果，则需要进行嵌套调用。造成回调地狱。 Promise概述 避免了多层异步调用的嵌套问题 提供更简洁的API，使得对异步的操作更容易 Promise...
vue+SpringBoot前后端通信
最新发布
qq_33063699的博客
08-31 660
vue+SpringBoot项目前后端通信
Vue前后台交互
翎羽飘的小分享
07-11 9266
一直在文档什么的看到的都是静态页面的制作，终于搞明白怎么做交互了。 1. 引入vue.js, vue-resource.js; 2.这就可以开始交互了。 注意：一定要运行在服务器里面，否则输出的是php代码，而非返回值。 有三种交互方式：get、post、jsonp get：会将请求的参数附在最后 post：不会显示在url中 get、post用来请求某个php文件的参数。 jso
Vue前后端交互
尧子陌
10-09 1803
接口调用方式 原生ajax 基于JQuery的ajax fetch axios 传统的URL RestFul形式的URL
VUE基础学习笔记——04前后端交互
ZJia_X的博客
10-09 2131
一、URL 地址格式 1、传统形式的 URL 格式：schema://host:port/path?query#fragment (1) schema：协议（http、https、ftp等） (2) host：域名或IP地址 (3) port：端口，http 默认端口80，可以省略 (4) path：路径 (5) query：查询参数。例如 uname=lisi&age=12 (6) fragment：锚点（哈希Hash）用于定位页面的某个位置 2、Restful 形式的 URL HTTP请
Python-vueadmin和后端flask分离结合的例子
08-10
3. 前后端分离：在前后端分离的架构中，前端和后端通过API进行通信，前端负责展示和用户交互，后端专注于数据处理和业务逻辑。这种模式有利于团队协作，提高开发效率，同时降低了维护成本。 4. RESTful API：...
详解vue-Resource（与后端数据交互）
08-31
在与后端进行数据交互时，Vue 提供了多种方法，其中一个常用的库是 `vue-resource`。本文将深入解析如何使用 `vue-resource` 进行 Vue 与后端的数据交互。 `vue-resource` 类似于 jQuery 的 `$.ajax` 函数，它提供...
vue axios前后端数据通信
CallMe_CrabXie的博客
06-20 383
1、安装依赖 npm install axios –save 2、上代码 请求的地址改为你自己的地址 <template> <div class="edit_container"> <el-button type="primary" icon="el-icon-edit" @click="release">发布</el-button> </div> </template> <script> impor
初识 vue —— 最简单的前后端交互示例
weixin_30384031的博客
10-11 1万+
一、初识 vue 时的困惑 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue...
Vue - 与后端交互
wuzeipero的博客
12-16 4596
Vue - 与后端交互零：与后端交互 - ajax版本1 - 出现了跨域问题版本2 - 解决了跨域问题版本3 - 后端读取json文件传到前端一：fetch1.简介2.实例二：Axios1.简介2.实例三：计算属性1.通过计算属性实现名字首字母大写2.通过计算属性重写过滤案例四：虚拟DOM 与diff算法 key的作用1.Vue2.0 v-for 中 :key 有什么用呢？2.虚拟DOM的diff算法3.具体实现思考：什么是跨域问题？如何解决？ 零：与后端交互 - ajax 版本1 - 出现了跨域问题 前端
vue调用后端接口实现和后端通信（axios）
雨声学java
04-03 4669
vue实现和后端通信
深入浅出学Vue(五) | Vue与后端进行交互
热门推荐
super1223的博客
07-09 1万+
目录PromiseaxiosAxios语法格式Axios过滤器async-await用法Vue与后端交互案例 Promise ajax作为一种运用广泛异步请求方式，在特殊的业务逻辑时会出现某种问题。比如：ajax成功回调后调用另外一个ajax，这样的ajax将会让逻辑十分复杂和混乱，而且一步出错，步步出错。 而Promise则用另一种语法方式则可以解决这种ajax的嵌套问题。 并且Promise对象提供了简洁的API 用法简单 使用方法： 1.then 异步调用正确时返回 2.catch 获取异
Vue前后端交互2
Mia的博客
04-26 254
axios用法（接口调用方法） 是专门的js库，用来实现接口调用，比fetch API更加强大 是一个基于Promise基于Promise用于浏览器和node.js的HTTP客户端 它有以下特性： 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 axios的基本用法 通过get发送请求，通过then获取数据 axios.get('http://localh...
外卖项目-前后端分离-前端vue-后端springboot
07-16
综上所述，外卖项目采用前后端分离的架构，前端使用Vue.js框架进行开发，后端使用Spring Boot框架进行开发，能够提高开发效率和代码的可维护性，同时还能够满足用户对于界面交互和数据操作的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彤彤的小跟班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值