Vue前后端交互~非常详细哦~

最新推荐文章于 2024-03-26 00:00:00 发布
最新推荐文章于 2024-03-26 00:00:00 发布
阅读量5.8k 收藏 64
点赞数 13
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46370867/article/details/113135924
版权

下面是对Vue前后端交互模式整理，希望可以帮助到有需要的小伙伴~

文章目录

目标

  • 能够说出什么是前后端交互模式
  • 能够说出Promise的相关概念和用法
  • 能够使用fetch进行接口调用
  • 能够使用axios进行接口调用
  • 能够使用async/await方式调用接口
  • 能够基于后台接口实现案例

目录

  • 前后端交互模式
  • Promise用法
  • 接口调用-fetch用法
  • 接口调用-axios用法
  • 接口调用async/await用法
  • 基于接口的案例

前后端交互模式

接口调用方式

  • 原生Ajax
  • 基于jQuery的Ajax
  • fetch　（API）
  • axios　 （第三方库）

在这里插入图片描述

URL地址格式

传统形式的URL
  • 格式：schema://host:port/path?query#fragment
    1. schema:协议。例如http、https、ftp等
    2. host:域名或IP地址
    3. port:端口，http默认端口80，可以省略
    4. path:路径，例如/abc/a/b/c
    5. query:查询参数，例如uname=lisi&age=12
    6. fragment: 锚点 （哈希Hash），用于定位页面的某个位置 #
  • 符合规则的URL:
    1. http://www.baidu.com
    2. http://www.baidu.com/java/web
    3. http://www.baidu.com/java/web?flag=1
    4. http://www.baidu.com/java/web?flag=1#function
Result形式的URL
  • HTTP请求方式
    1. GET 查询
    2. POST 添加
    3. PUT 修改
    4. DELETE 删除
  • 符合规则的URL地址（通过/传递请求参数）
    1. http://www.baidu.com/books GET
    2. http://www.baidu.com/books POST
    3. http://www.baidu.com/books/123 PUT
    4. http://www.baidu.com/books/123 DELETE

Promise用法（处理异步编程）

官方文档：https://developer.mozilla.org/en-Us/docs/Web/JavaScript/Reference/Global_objects/Promise

异步调用

  • 异步调用效果分析

    • 定时任务
    • Ajax
    • 事件函数

  • 多次异步调用的依赖分析

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

    • 异步调用结果如果存在依赖需要嵌套　（缺点：回调地狱）

在这里插入图片描述

Promise概述

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
使用Promise的优点：

  • 可以避免多层异步调用嵌套问题（回调地狱）
  • Promise对象提供了简洁的API，使得控制异步操作更加容易
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise概述</title>
</head>
<body>
    <script>
        console.log(typeof Promise);
        // console.dir()可以显示一个对象的所有属性和方法
        console.dir(Promise)
    </script>
</body>
</html>

在这里插入图片描述

Promise的基本用法

先规定好正常和异常的处理办法，然后根据条件来确定执行正常的处理办法还是异常的处理办法

resolve和reject两个参数用于处理成功和失败的两种情况，并通过p.then获取处理结果

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

var p = new Promise(function(resolve,reject){
            // 成功时调用 resolve()
    		// 失败时调用 reject()
        });

        // 接收异步任务的结果
        p.then(function(ret){
           // 从resolve得到正常的结果
        },function(ret){
            // 从reject得到错误信息
        });

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise用法</title>
</head>
<body>
    <script>
        // 实例化一个Promise对象
        // resolve,reject 这两个参数都是方法
        var p = new Promise(function(resolve,reject){
            // 实现异步任务
            setTimeout(function(){
                // 条件错误
                // var flag = false; // 出错了
                var flag = true; // hello
                if (flag) {
                    // 正常情况
                    resolve("hello")
                } else {
                    // 异常情况
                    reject("出错了")
                }
            },100);
        });

        // 接收异步任务的结果
        p.then(function(data){
            console.log(data)
        },function(info){
            console.log(info)
        });
    </script>
</body>
</html>

在这里插入图片描述

基于Promise处理Ajax请求
处理原生Ajax
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*  */
        function queryData(url) {
            var p = new Promise(function(resolve,reject){
                // XMLHttpRequest 对象用于在后台与服务器交换数据。
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    // 异常
                    if (xhr.readyState !== 4) return;
                    // 正常
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常情况
                        resolve(xhr.responseText);
                    }else{
                        // 处理异常情况
                        reject("服务器错误")
                    }
                };
                xhr.open('get',url);
                xhr.send(null)
            });
            return p;
        }

        queryData('http://localhost:3000/data')
            .then(function(data){
                console.log(data)
            },function(info){
                console.log(info)
            })
    </script>
</body>
</html>
发送多次ajax请求
queryData()
	.then(function(data){
    return queryData();
	})

	.then(function(data){
    return queryData();
	})

	.then(function(data){
    return queryData();
	})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*  */
        function queryData(url) {
            var p = new Promise(function(resolve,reject){
                // XMLHttpRequest 对象用于在后台与服务器交换数据。
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    // 异常
                    if (xhr.readyState !== 4) return;
                    // 正常
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常情况
                        resolve(xhr.responseText);
                    }else{
                        // 处理异常情况
                        reject("服务器错误")
                    }
                };
                xhr.open('get',url);
                xhr.send(null)
            });
            return p;
        }

        // 发送一个aiax请求
        /* queryData('http://localhost:3000/data')
            .then(function(data){
                console.log(data)
            },function(info){
                console.log(info)
            }) */

        // 发送多次ajax请求并保证顺序
        queryData('http://localhost:3000/data')
            .then(function(data){
                console.log(data)
                return queryData('http://localhost:3000/data1')
            })

            .then(function(data){
                console.log(data)
                return queryData('http://localhost:3000/data2')
            })

            .then(function(data){
                console.log(data)
            })
        	/*
        
            Hello World !
            Hello Tom !
            Hello Jerry !
        */ 
    </script>
</body>
</html>

在这里插入图片描述

then参数中的函数返回值
返回Promise实例对象

返回的该实例对象会调用下一个then

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>then参数中的函数返回值</title>
</head>
<body>
    <script>
        function queryData(url) {
            return new Promise(function(resolve,reject){
                // XMLHttpRequest 对象用于在后台与服务器交换数据。
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    // 异常
                    if (xhr.readyState !== 4) return;
                    // 正常
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常情况
                        resolve(xhr.responseText);
                    }else{
                        // 处理异常情况
                        reject("服务器错误")
                    }
                };
                xhr.open('get',url);
                xhr.send(null)
            });
        }
        // Promise返回的该实例对象会调用下一个then
        queryData('http://localhost:3000/data')
            .then(function(data){
                return queryData('http://localhost:3000/data1');
            })

            .then(function(data){
                return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        resolve(123);
                    },1000)
                })
            })

            .then(function(data){
                console.log(data)
            })
    </script>
</body>
</html>

在这里插入图片描述

返回普通值

返回普通值的话，回生成一个默认的Promise对象，便于下面的then对其进行调用

返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>then参数中的函数返回值</title>
</head>
<body>
    <script>
        function queryData(url) {
            return new Promise(function(resolve,reject){
                // XMLHttpRequest 对象用于在后台与服务器交换数据。
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    // 异常
                    if (xhr.readyState !== 4) return;
                    // 正常
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常情况
                        resolve(xhr.responseText);
                    }else{
                        // 处理异常情况
                        reject("服务器错误")
                    }
                };
                xhr.open('get',url);
                xhr.send(null)
            });
        }
        
            // 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值
            .then(function(data){
                return 'hello'
            })
            .then(function(data){
                console.log(data)
            }
            )
    </script>
</body>
</html>

在这里插入图片描述

Promise常用的API
实例方法
  • p.then() 得到异步任务的正确结果
  • p.catch() 获取异常信息
  • p.finally() 成功与否都会执行（尚且不是正式标准）

除了第一个 then ，以后的所有的 then 都是上一个 then 中的返回结果
then 接收到结果一共有三种情况：

  • . 上一个 then 没有返回值，则就是 undefined

  • 上一个 then 有普通返回值：数组、数字、字符串、对象

  • 上一个 then 又返回了一个新的 Promise 对象

    如果是上一个 then 里面返回了一个 Promise 对象，则这个 then 的回调处理函数就指向了上一个 then 中返回的 Promise 对象中的 resolve

语法结构：

			// 处理正常结果
            .then(function(data){
               // 处理正常结果
            })
            // 处理异常结果
            .catch(function(data){
                // 处理异常结果
            })
            .finally(function(){
                // 成功与否都会执行
            })

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06_Promise常用的API.html</title>
</head>
<body>
    <script>
        /* Promise常用的API - 实例方法 */
        function foo(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    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>
</body>
</html>

在这里插入图片描述

对象方法

Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
Promise.race()并发处理多个任务，只要有一个任务完成就能得到结果

语法结构：

Promise.all([p1,p2,p3]).then((result) => {
    console.log(result)
})
Promise.race([p1,p2,p3]).then((result) => {
    console.log(result)
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象方法</title>
</head>
<body>
    <script>
        function queryData(url) {
            return new Promise(function(resolve,reject){
                // XMLHttpRequest 对象用于在后台与服务器交换数据。
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){
                    // 异常
                    if (xhr.readyState !== 4) return;
                    // 正常
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常情况
                        resolve(xhr.responseText);
                    }else{
                        // 处理异常情况
                        reject("服务器错误")
                    }
                };
                xhr.open('get',url);
                xhr.send(null)
            });
        }

        var p1 = queryData('http://localhost:3000/a1');
        var p2 = queryData('http://localhost:3000/a2');
        var p3 = queryData('http://localhost:3000/a3');
        // Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果
        Promise.all([p1,p2,p3]).then(function(result){
            console.log(result)
        })
        // Promise.race()并发处理多个任务，只要有一个任务完成就能得到结果
        Promise.race([p1,p2,p3]).then(function(result){
            console.log(result)
        })
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

fetch概述

基本特征

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

语法结构

fetchAPI官方文档说明：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

fetch(url).then(fn2)
              .then(fn3)
              ...
              .catch(fn)

fetch的基本用法

fetch('/abc').then(data => {
    //text()方法属于fetchAPI的一部分，它的返回值是一个Promise实例对象，用于获取后台返回的数据
    return data.text();
}).then(ret => {
    //注意：这里得到的才是最终的数据
    console.log(ret);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch</title>
</head>
<body>
    <script>
        /* Fetch API 基本用法 */
        fetch('http://localhost:3000/fdata').then(function(data){
            // text()方法属于fetchAPI的一部分，它的返回值是一个Promise实例对象，用于获取后台返回的数据
            return data.text();
        }).then(function(data){
            console.log(data);
        })
    </script>
</body>
</html>

在这里插入图片描述

fetch请求参数

常用配置选项

  • method(String):HTTP请求方法，默认为GET (GET, POST, PUT, DELETE)
  • body(String):HTTP的请求参数
  • headers(Onject):HTTP的请求头，默认为{}
fetch('/abc',{
    method:'get'
}).then(data => {
    return data.text();
}).then(ret => {
    //注意：这里得到的才是最终的数据
    console.log(ret);
})
GET请求方式的参数传递
  • 传统的URL
fetch('/abc?id=123').then(data => {
    return data.text();
}).then(ret => {
    //注意：这里得到的才是最终的数据
    console.log(ret)
})
  • Restful形式的URL
fetch('/abc/123',{
    method:'get'
}).then(data => {
    return data.text();
}).then(ret => {
//注意：这里得到的才是最终的数据
    console.log(ret);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch请求参数</title>
</head>
<body>
    <script>
        /* Fetch API 调用接口传递参数 */
        // 传统的URL传递参数
        // fetch('http://localhost:3000/books?id=123',{
        //     method: 'get'
        // })
        //     .then(function(data){
        //         return data.text();
        //     }).then(function(data){
        //         console.log(data)
        //     });

        // Restful形式的URL
        fetch('http://localhost:3000/books/456',{
            method: 'get'
        })
            .then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data)
            });
    </script>
</body>
</html>

对应的路由：

app.get('/books', (req, res) => {
    setTimeout(() => {
        // req.query.id 参数的值
        res.send('传统的URL传递参数' + req.query.id)
    })
})

app.get('/books/:id', (req, res) => {
    setTimeout(() => {
        res.send('Restful形式的URL传递参数' + req.params.id)
    })
})

在这里插入图片描述

在这里插入图片描述

DELETE请求方式的参数传递
fetch('/abc/123',{
    method:'delete'
}).then(data => {
    return data.text();
}).then(ret => {
//注意：这里得到的才是最终的数据
    console.log(ret);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>delete请求参数</title>
</head>
<body>
    <script>
        // Restful形式的URL
        fetch('http://localhost:3000/books/456',{
            method: 'delete'
        })
            .then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data)
            });
    </script>
</body>
</html>

路由：

app.delete('/books/:id', (req, res) => { // :id是自定义的
    setTimeout(() => {
        res.send('RDELETE请求传递参数' + req.params.id)
    })
})

在这里插入图片描述

POST请求方式的参数传递
字符串方式传递参数

[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gL4KmBkQ-1611575969659)

fetch('/books',{
    method:'post',
    body:'uname=lisi&pwd=123',
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
    }
}).then(data => {
    return data.text();
}).then(ret => {
//注意：这里得到的才是最终的数据
    console.log(ret);
})

实例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post请求传参</title>
</head>
<body>
    <script>
        fetch('http://localhost:3000/books',{
            method: 'post',
            body: 'uname=lisi&pwd=123',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data)
            })
    </script>
</body>
</html>

在这里插入图片描述

json方式传递参数
fetch('/books',{
    method:'post',
    body:JOSN.stringify({
        uname:'lisi',
        age:12
    }),
    headers:{
        'Content-Type':'application/json'
    }
}).then(data => {
    return data.text();
}).then(ret => {
	//注意：这里得到的才是最终的数据
    console.log(ret);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post请求传参json</title>
</head>
<body>
    <script>
        fetch('http://localhost:3000/books',{
            method: 'post',
            body: JSON.stringify({
                uname: '张三',
                pwd: '45'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data)
            })
    </script>
</body>
</html>

路由：

app.post('/books', (req, res) => {
    res.send('POST请求传递参数' + req.body.uname + '---' + req.body.pwd)
})

在这里插入图片描述

PUT请求方式的参数传递
fetch('/books/123',{
    method:'put',
    body:JOSN.stringify({
        uname:'lisi',
        age:12
    }),
    headers:{
        'Content-Type':'application/json'
    }
}).then(data => {
    return data.text();
}).then(ret => {
	//注意：这里得到的才是最终的数据
    console.log(ret);
})

实例1 ~ json参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>put请求方式的参数传递json</title>
</head>
<body>
    <script>
        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>
</body>
</html>

路由：

app.put('/books/:id', (req, res) => {
    res.send('PUT请求传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

在这里插入图片描述

实例2 ~ 一般方式传参：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>put请求方式的参数传递json</title>
</head>
<body>
    <script>
        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>
</body>
</html>

路由：

app.put('/books/:id', (req, res) => {
    res.send('PUT请求传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

在这里插入图片描述

总结：

1、GET请求会向数据库发索取数据的请求，从而来获取信息，该请求就像数据库的select操作一样，只是用来查询数据库中的数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产生副作用。无论进行多少次操作，结果都是一样的。

2、与GET不同的是，PUT请求是向服务器端发送数据的，从而改变信息，该请求就像数据库的update操作一样，用来修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次PUT操作，其结果并没有不同。

3、POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的insert操作一样，会创建新的内容。几乎目前所有的提交操作都是用POST请求的。

4、DELETE请求顾名思义，就是用来删除某一个资源的，该请求就像数据库的delete操作。

就像前面所讲的一样，既然PUT和POST操作都是向服务器端发送数据的，那么两者有什么区别呢。。。POST主要作用在一个集合资源之上的（url），而PUT主要作用在一个具体资源之上的（url/xxx），通俗一下讲就是，如URL可以在客户端确定，那么可使用PUT，否则用POST。

综上所述，我们可理解为以下：

1、POST /url 创建
2、DELETE /url/xxx 删除
3、PUT /url/xxx 更新

4、GET /url/xxx 查看

fetch响应结果
响应数据格式
  • text():将返回体处理成字符串类型，返回结果是字符串类型
  • json():返回结果和JSON.parse(responseText)一样，返回结果是对象类型
fetch ('/ abc' then(data=>{
	// return data.text ();
    return data.json();
}).then(ret=>{
	console.log (ret);
});

实例1 ~ json()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch响应结果1</title>
</head>
<body>
    <script>
        /* Fetch响应结果的数据格式 */
        fetch('http://localhost:3000/json').then(function(data){
            // json():返回结果和JSON.parse(responseText)一样，**返回结果是对象类型**
            return data.json()
        }).then(function(data){
            console.log(data)
            console.log(data.uname)
        })
    </script>
</body>
</html>

在这里插入图片描述

实例2 ~ text() ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch响应结果2</title>
</head>
<body>
    <script>
        /* Fetch响应结果的数据格式 */
        fetch('http://localhost:3000/json').then(function(data){
            // text():将返回体处理成字符串类型，**返回结果是字符串类型**
            return data.text();
        }).then(function(data){
            // console.log(data); // {"uname":"lisi","age":12,"gender":"male"} 返回结果是字符串类型的，就不能用data.uname了
            // console.log(typeof data); // string
            // console.log(data.uname);  // undefined
            // 把json的 string数据 转为 json对象
            var obj = JSON.parse(data);
            console.log(obj)
            console.log(obj.uname,obj.age,obj.gender)
        })
    </script>
</body>
</html>

在这里插入图片描述

接口调用-axios用法

axios的基本特性

axios(官网：https://github.com/axios/axios))是一个基于Promise用于浏览器和node.js的HTTP客户端。
它具有以下特征：

  • 支持浏览器和node.js
  • 支持Promise
  • 能拦截请求和响应
  • 自动转换json数据
axios的基本用法
axios.get('/data')
	.then(ret => {
    	//data属性名称是固定的，用于获取后台响应的数据
    	console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口调用axios</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        axios.get('http://localhost:3000/adata').then(function(ret){ // 形参 ret接收后台的所有数据 ，ret是一个对象
            console.log(ret.data);
            // 注意：data属性是固定的用法，用于获取后台的实际数据
            console.log(ret);
            
        })
    </script>
</body>
</html>

在这里插入图片描述

axios的常用API
  • get:查询数据
  • post:添加数据
  • put:修改数据
  • delete:删除数据
axios的参数传递
GET传递参数
  1. 通过url传递参数
    • 传统的URL （路由中使用 query 进行请求）
    • Restful的URL （路由中使用 params 进行请求）
  2. 通过params选项传递参数 （使用的是传统URL的路由）

通过url传递参数

  • 传统的url形式
axios.get('/adata?id=123').then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        // 传统的url方式
        axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
                console.log(ret.data);
        });
    </script>
</body>
</html>
  • Restful形式的URL
axios.get('/adata/123').then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        // 通过get传参
        // 方式1. 传统的url方式
        // axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
        //         console.log(ret.data);
        // });
        // 方式2. Restful方式
        axios.get('http://localhost:3000/axios/456').then(function (ret) {
                console.log(ret.data);
        });

    </script>
</body>
</html>

在这里插入图片描述

通过params选项传递参数

axios.get('/adata',{
    // 传参
    params:{
        id:789
    }
}).then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        // 通过URL传参
        // 方式1. 传统的url方式
        // axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
        //         console.log(ret.data);
        // });
        // 方式2. Restful方式
        // axios.get('http://localhost:3000/axios/456').then(function (ret) {
        //         console.log(ret.data);
        // });

        // 通过params传参 - 使用的是传统URL的路由
        axios.get('http://localhost:3000/axios',{
            // 传参
            params: {
                id: 789
            }
        }).then(ret => {
            console.log(ret.data);
        })
    </script>
</body>
</html>

在这里插入图片描述

DELETE传递参数

通过url传递参数 （注意：在后端使用Restful获取数据的时候，路由中获取的数据的不是query，而是params）

通过params选项传递参数

  • 传统的url形式
axios.delete('/adata?id=123').then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DELETE传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        // 传统URL
        axios.delete('http://localhost:3000/axios?id=222')
            .then(function(ret){
                console.log(ret.data);
        });

        

    </script>
</body>
</html>

路由：

// delete 传统的URL
app.delete('/axios',(req,res) => {
    res.send('axios delete (传统URL) 传递参数' + req.query.id);
})

在这里插入图片描述

  • Restful形式的URL

    在后端使用Restful获取数据的时候，路由中获取的数据的不是query，而是params

axios.delete('/adata/123').then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DELETE传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        
        // Restful的URL
        axios.delete('http://localhost:3000/axios/333')
            .then(function(ret){
                console.log(ret.data);
        });

    </script>
</body>
</html>

路由：

// delete Restful的URL
app.delete('/axios/:id',(req,res) => {
    res.send('axios delete (Restful)' + req.params.id);
})

在这里插入图片描述

  • params方式
axios.delete('/adata',{
    params:{
        id:111
    }
}).then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DELETE传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
        // params传参
        axios.delete('http://localhost:3000/axios',{
            // 传参
            params: {
                id: 111
            }
        }).then(ret => {
            console.log(ret.data);
        })

    </script>
</body>
</html>

路由：

// delete 传统的URL
app.delete('/axios',(req,res) => {
    res.send('axios delete (传统URL) 传递参数' + req.query.id);
})

在这里插入图片描述

POST传递参数
通过选项传递参数**（默认传递的是json格式的数据）**
axios.post('/adata',{
    uname:'tom',
    pwd:123
}).then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       
        // 通过选项传递参数
        axios.post('http://localhost:3000/axios',{
            // 传参
            uname: 'lisi',
            pwd: 123
        }).then(ret => {
            console.log(ret.data);
        })
    </script>
</body>
</html>

路由：

// POST传参
app.post('/axios',(req,res) => {
    res.send('axios post 传递参数' + req.body.uname + '----' + req.body.pwd);
})

在这里插入图片描述

在这里插入图片描述

通过URLSearchParams传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('params1','value1');
params.append('params2','value2');
axios.post('/adata',params}).then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       
        // 通过URLSearchParams传递参数
        // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
        // 我们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例
        var params = new URLSearchParams();
        params.append('uname','zhangsan');
        params.append('pwd','222');
        axios.post('http://localhost:3000/axios',params).then(function(ret){
            console.log(ret.data)
        })
    </script>
</body>
</html>

路由：

// POST传参
app.post('/axios',(req,res) => {
    res.send('axios post 传递参数' + req.body.uname + '----' + req.body.pwd);
})

在这里插入图片描述

在这里插入图片描述

POST的选项参数传值的情况

1- 在URL中加id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       
        // 通过选项传递参数
        axios.post('http://localhost:3000/axios/111111',{
            // 传参
            uname: 'lisi',
            pwd:123
        }).then(ret => {
            console.log(ret.data);
        })
    </script>
</body>
</html>

路由：

app.post('/axios/:id',(req,res) => {
    res.send('axios post----req.params.id----传递参数' + req.params.id + '----' + req.body.uname + '----' + req.body.pwd);
})

在这里插入图片描述

2- 在选项参数中加id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>

        axios.post('http://localhost:3000/axios',{
            // 传参
            id: '222222',
            uname: 'lisi',
            pwd:123
        }).then(ret => {
            console.log(ret.data);
        })
    </script>
</body>
</html>

路由：

app.post('/axios',(req,res) => {
    res.send('axios post 【req.body.id】 传递参数' + req.body.id + '----' + req.body.uname + '----' + req.body.pwd);
})

在这里插入图片描述

总结：

对于 POST选项参数 和 URLSearchParams 的方式：

使用 req.params.id的方式获取url中的信息

使用req.body.id的方式获取 POST选项参数 和 URLSearchParams 中的信息

POST的URLSearchParams传递参数的情况

1- 获取url中传递的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       
        // 通过URLSearchParams传递参数
        // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
        // 我们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例
        var params = new URLSearchParams();
        params.append('uname','zhangsan');
        params.append('pwd','123');
        
        axios.post('http://localhost:3000/axios/3333333',params).then(function(ret){
            console.log(ret.data)
        })
    </script>
</body>
</html>

路由：

app.post('/axios/:id',(req,res) => {
    res.send('axios post----req.params.id----传递参数' + req.params.id + '----' + req.body.uname + '----' + req.body.pwd);
})

在这里插入图片描述

2 - 在URLSearchParams传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       
        // 通过URLSearchParams传递参数
        // URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
        // 我们调用new URLSearchParams()会返回一个 URLSearchParams 对象实例
        // var params = new URLSearchParams();
        // params.append('uname','zhangsan');
        // params.append('pwd','123');
        // axios.post('http://localhost:3000/axios/333333',params).then(function(ret){
        //     console.log(ret.data)
        // })

        var params = new URLSearchParams();
        params.append('uname','zhangsan');
        params.append('pwd','123');
        params.append('id','444444');
        axios.post('http://localhost:3000/axios',params).then(function(ret){
            console.log(ret.data)
        })
    </script>
</body>
</html>

app.post('/axios',(req,res) => {
    res.send('axios post 【req.body.id】 传递参数' + req.body.id + '----' + req.body.uname + '----' + req.body.pwd);
})

在这里插入图片描述

总结：
PUT传递参数

参数传递方式与POST类似

通过选项传递参数**（默认传递的是json格式的数据）**
axios.put('/adata/123',{
    uname:'tom',
    pwd:123
}).then(ret => {
    console.log(ret.data);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PUT传参</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       
        axios.put('http://localhost:3000/axios/123',{
            // 传参
            uname: 'lisi',
            pwd: 123
        }).then(ret => {
            console.log(ret.data);
        })
    </script>
</body>
</html>

在这里插入图片描述

axios的响应结果

响应结果的主要属性
  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios的响应结果</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script>
       /* axios 响应结果与全局配置 */
       axios.get('http://localhost:3000/axios-json').then(function(ret){
           console.log(ret);
           console.log(ret.data);
           console.log(ret.data.uname);
       })
    </script>
</body>
</html>

路由：

// axios响应结果与全局配置
app.get('/axios-json',(req,res) => {
    res.json({
        uname: 'lisi',
        age: 12
    })
})

在这里插入图片描述

axios的全局配置
  • axios.default.timeout = 3000;//超时时间
  • axios.default.baseURL = ‘http://localhost:3000/app’;//默认地址
  • axios.default.headers[‘mytoken’] = ‘asddwefwefwefewfefwefwe’;//设置请求头
axios拦截器
请求拦截器

在请求发出之前设置一些信息
在这里插入图片描述

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
    //在请求发出之前进行一些信息设置
    return config;
},function(err){
    //处理响应的错误信息
    console.log(err);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求拦截器</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script type="text/javascript">
       axios.interceptors.request.use(function(config){
           console.log(config.url);
           config.headers.mytoken = 'nihao';
           return config;
       },function(err){
           console.log(err)
       })
       axios.get('http://localhost:3000/adata').then(function(data){
           console.log(data)
       })
    </script>
</body>
</html>

路由：

// 设置允许跨域访问该服务
app.all("*", function (req, res, next) {
    res.header('Access-Control-Allow-Headers', 'mytoken');
    next();
});
// axios响应结果与全局配置
app.get('/axios-json',(req,res) => {
    res.json({
        uname: 'lisi',
        age: 12
    })
})

在这里插入图片描述

在这里插入图片描述

响应拦截器

在获取数据之前对数据做一些加工处理
在这里插入图片描述

//添加一个响应拦截器
axios.interceptors.response.use(function(res){
    //在这里对返回的数据进行处理
    return res;
},function(err){
    //处理响应的错误信息
    console.log(err);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应拦截器</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script type="text/javascript">
    // 请求拦截器
    //    axios.interceptors.request.use(function(config){
    //        console.log(config.url);
    //        config.headers.mytoken = 'nihao';
    //        return config;
    //    },function(err){
    //        console.log(err)
    //    })
    //    axios.get('http://localhost:3000/adata').then(function(data){
    //        console.log(data)
    //    })

    // 响应拦截器
       axios.interceptors.response.use(function(res){
           var data = res.data;
           return data;
       },function(err){
           console.log(err)
       })
       axios.get('http://localhost:3000/adata').then(function(data){
           console.log(data)
       })

    </script>
</body>
</html>

路由：

// 设置允许跨域访问该服务
app.all("*", function (req, res, next) {
    res.header('Access-Control-Allow-Headers', 'mytoken');
    next();
});
// axios响应结果与全局配置
app.get('/axios-json',(req,res) => {
    res.json({
        uname: 'lisi',
        age: 12
    })
})

在这里插入图片描述

接口调用-async/await用法

async/await的基本用法

async/await是ES7引入的新语法，可以更加方便的进行异步操作
async关键字用于函数上（async函数的返回值是Promise实例对象）
await关键字用于async函数中（await可以得到异步的结果）

async function queryData(id){
    // await后面要加Promise实例对象 ，在Promise中可以处理异步任务 
    const ret = await axios.get('/data');
    return ret;
}
queryData.then(ret => {
    onsole.log(ret);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口调用</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script type="text/javascript">
    // 原来的方式进行接口调用
    /* axios.defaults.baseURL = 'http:localhost:3000';
    axios.get('adata').then(function(ret){
        console.log(ret.data);
    }) */

    // async/await调用接口
    // await后面要加Promise实例对象 ，在Promise中可以处理异步任务

    // axios.defaults.baseURL = 'http:localhost:3000';
    // async function queryData(){
    //     var ret = await axios.get('adata');
    //     return ret.data;
    // }
    // queryData().then(function(data){
    //     console.log(data);
    // })

    axios.defaults.baseURL = 'http:localhost:3000';
    async function queryData() {
        // await后面要加Promise实例对象 ，在Promise中可以处理异步任务
        var ret = await new Promise(function(resolve,reject){
            setTimeout(() => {
                // 返回数据 nihao 
                resolve('nihao')
            }, 1000);
        })
        return ret;
    }
    queryData().then(function(data){
        console.log(data);
    })



    </script>
</body>
</html>

在这里插入图片描述

async/await处理多个异步请求

多个异步请求的场景

async function queryData(id){
    const info = await axios.get('/async1');
    const ret = await axios.get('async2?info='+info.data);
    return ret;
}
queryData.then(ret=>{
    console.log(ret);
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async/await处理多个异步请求</title>
</head>
<body>
    <script src="axios-master/dist/axios.js"></script>
    <script type="text/javascript">
        axios.defaults.baseURL = 'http://localhost:3000';

        async function queryData(){
            // 使用await决定执行的顺序
            var info = await axios.get('async1');
            var ret = await axios.get('async2?info=' + info.data);
            return ret.data;
        }

        queryData().then(function(data){
            console.log(data);
        })
    </script>
</body>
</html>

路由：

// async/await处理多个异步请求 的 路由
app.get('/async1', (req, res) => {
    res.send('hello')
})

app.get('/async2', (req, res) => {
    if(req.query.info == 'hello') {
        res.send('world');
    }else{
        res.send('error');
    }
})

在这里插入图片描述

weixin_46370867
关注
  • 13
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue最简单的前后端交互示例详解
12-09
一、学习 vue 面临的问题 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue 的定位，只知道它是一个前端库，但是确实不知道它的优势是什么，还以为它是一个学会就能一劳永逸的万能的框架呢。官方教程一开始就讲怎么绑定页面上的元素和 JavaScript 中的数据，而且是双向绑定，
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
10-16
主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
基于SpringBoot+Vue实现前后端交互功能（详解Vue框架机制）
最新发布
a910247的博客
03-26 3605
Vue框架知多少？Vue.js（通常简称为Vue）是一种流行的JavaScript前端框架，用于构建交互式的用户界面和单页面应用（SPA）。Vue由尤雨溪（Evan You）于2014年创建，并于同年正式发布。它的设计目标是通过尽可能简单的API提供高效的响应式数据绑定和组件化的视图组织方式。
VUE前后端分离之数据交互（简单项目作为演示）
热门推荐
weixin_45928161的博客
03-11 2万+
文章目录一、添加后端访问依赖二、建立后端三、配置前端 提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点 一、添加后端访问依赖 进入前端vue项目，进入内部或外部终端 输入如下代码并安装 cnpm install axios --save cnpm install qs --save 安装好之后可以在package.json中看到添加的依赖 在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖） 引入
Vue前后台数据交互实例演示，使用axios传递json字符串、数组
小蓝枣的博客
03-25 1万+
Vue 前后台数据交互实例演示 第一章：后台实现 ① Python 启用 Flask 服务器 ② 后台启用成功验证 第二章：前台实现 ① Vue 使用 Axios 实现接收 json 字符串、数组数据 ② 前台接收数据演示
07-SpringBoot (七) --- SpringBoot+Vue 实现前后端数据交互
qq_54103767的博客
04-10 4365
​  前面刚学完，我们已经基本掌握了更加方便的数据库操作，那么我们也就该做一个web项目练练手了，按理来说，我们该学习学习thymeleafthymeleaf是Spring boot推荐使用的模版引擎。但是，现在更加流行的是 SpringBoot+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">
VUE进行前后端交互
young_man2的博客
03-22 7729
vue前后端访问
VUE基础学习笔记——04前后端交互
ZJia_X的博客
10-09 2103
一、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请
vue前端和后端交互实现（最简单）
qq_63656102的博客
06-25 1552
后端接收的话其实也很简单，后端目前比较热门的是springboot，在springboot里面的接收也比较简单，大家感兴趣可以自行去查看资料，我这里举例的是node后端接收，相信这个能看懂那么springboot也问题不大。以上所举的例子都是最简单的网络请求，但是在实际情况中，一般都是对网络请求进行封装到一个js文件里面的，这里就不举例了，大家先把最基础的学会，后面在加深了解就可以了。知道的前端和后端的基础之后，那么我们就得先知道前端该如何去请求，在前端中，最原始的请求就是去。当然大家也可以用异步的。
vue.js前后端数据交互之提交数据操作详解
10-18
主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
教师端+学生端+管理员 前后端管理系统,后端是springboot 前端是vue 实现前后端交互
05-25
此项目为一个基于Vue的前后端分离的在线考试系统项目 使用了 Vue 全家桶+ES5ES6ES7+Webpack 等前端新技术 后端基于SpringBoot搭建SSM框架 包括学生端、教师端和管理员端 采用模块化、组件化、工程化的模式开发 教师...
使用django和vue进行数据交互的方法步骤
09-18
主要介绍了使用django和vue进行数据交互的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue修改用户信息~不要错过哦
weixin_46370867的博客
01-30 3968
下面是对修改用户信息功能的整理，希望可以帮助到有需要的小伙伴~ 文章目录修改用户信息按钮的样式修改用户信息按钮的对话框修改用户信息所需的数据修改用户信息的方法接口根据 ID 查询用户信息编辑用户提交 修改用户信息按钮的样式 <!-- 修改按钮 --> <!-- scope.row 获取到 改行 的所有数据 --> <!-- scope.row.id 获取到 改行 的数据中的id --> <el-button type="primary" icon="el
Vue实现可折叠导航菜单~非常详细
weixin_46370867的博客
01-27 3671
通过Vue编写一个二级，并且是可以折叠的导航菜单 文章目录思路在main.js中 配置axios导入element样式Home.vue实现静态页面、样式及功能 思路 在侧边栏区域只写了一个二级导航，通过axios获取到侧边栏的数据，通过v-fot循环渲染该数据，形成多个二级菜单 使用elemen-ui进行样式的设置 在main.js中 配置axios 导入axios包 配置请求的根路径 把axios包挂载到vue原型对象上：这样每一个vue组件都可以通过this直接访问到$http，从而去发起ajax请求
Vue登录退出功能
weixin_46370867的博客
02-13 3330
Vue登录/退出功能 登录概述 1.登录业务流程 在登录页面输入用户名和密码 调用后台接口进行验证 通过验证之后，根据后台的响应状态跳转到项目主页 2.登录业务的相关技术点 http是无状态的 通过cookie在客户端记录状态 通过session在服务器端记录状态 通过token方式维持状态 如果前端与服务器端之间不存在跨域，可以使用cookie或session 如果前端与服务器端之间存在跨域，可以使用token 登录 - token原理分析 登录功能实现 1.登录页面的布局 通过El
Vue事件绑定（非常详细哦~）
weixin_46370867的博客
01-19 3262
下面是对Vue中事件绑定的整理，希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= ‘button”v-on:click="num++'/> v-on简写形式 <input type= ‘button'@click='num++/> 事件函数的调用方式 直接绑定函数名称 <button v-on :click（事件类型）='say（方法名）'>Hello</button>
vue前后端交互的流程
06-12
Vue.js 是一款前端框架，它主要负责视图层的渲染和交互处理，而与后端进行交互时，需要通过 Ajax 技术进行数据的异步请求和响应。下面是 Vue.js 前后端交互的一般流程： 1. 前端向后端发送请求：前端需要向后端发送请求，可以使用 Vue.js 内置的 Axios 库或其他的 Ajax 库来实现。 2. 后端处理请求：后端接收到请求后，根据请求的参数进行处理，例如查询数据库、生成数据等操作。 3. 后端向前端返回响应：后端处理完成后，将数据封装成 JSON 格式的数据返回给前端。 4. 前端接收响应：前端接收到后端返回的数据后，使用 Vue.js 提供的数据绑定和渲染技术将数据显示在页面上。 在实际开发中，前后端交互的流程可能会更加复杂，例如前端需要向后端进行多次请求、后端需要进行身份认证等等。但是无论是哪种情况，Vue.js 和后端的交互都是通过 Ajax 进行的。需要注意的是，为了保证前端和后端的数据传输安全，通常需要对数据进行加密和签名等处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值