04Vue的前后端交互

最新推荐文章于 2024-03-26 00:00:00 发布

攻城老湿

最新推荐文章于 2024-03-26 00:00:00 发布

阅读量183

点赞数

文章标签： vue ajax restful javascript java

本文链接：https://blog.csdn.net/yorickjun/article/details/116645742

版权

Vue的前后端交互

Promise用法

异步调用

触发异步调用的方式
- 定时任务
- Ajax
- 事件函数
多次异步调用的依赖分析
- 多次异步调用由于不同接口相应时间的差异，导致返回结果的顺序不确定。
- 若想得到确定顺序的异步调用结果，则需要进行嵌套调用。造成回调地狱。

Promise概述

避免了多层异步调用的嵌套问题
提供更简洁的API，使得对异步的操作更容易

Promise基本用法

1.实例化Promise对象，构造函数中传递函数，用于处理异步任务
2.resolve和reject分别处理成功和失败两种情况，并通过p.then获取处理结果

实例：通过Promise对象实现模拟正常和错误的结果异步调用

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        var p = new Promise(function(resolve,reject){
            //用于实现异步任务
            setTimeout(function(){
                var flag = false;
                if(flag){
                    resolve("success");
                }else{
                    reject("error");
                }
            },1000);
        });
        p.then(function(data){
            console.log(data);
        },function(info){
            console.log(info);
        });
    </script>
</body>

</html>

Promise处理Ajax请求

处理原生Ajax，通过Promise对象的方式发送Ajax请求

服务器端代码

//引入express框架
const express = require("express");
//路径处理模块
const path = require("path");
//创建web服务
const app = express();
const bodyParser = require("body-parser");
const formidable = require("formidable");
//静态资源访问服务功能
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname,"public")));
//解决非同源请求问题
app.use((req,res,next)=>{
    res.header("Access-Control-Allow-Origin","*");
    res.header("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Headers","*");
    next();
});
//get请求
app.get("/data1",(req,res)=>{
    res.send("Hello 1");
});
app.get("/data2",(req,res)=>{
    //定时调用
    setTimeout(function(){
        res.send("Hello 2");
    },1000); 
});
app.get("/data3",(req,res)=>{
    res.send("Hello 3");
});

//监听端口
app.listen(3000);
//控制台提示输出
console.log("服务器启动成功");

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        function queryData(url){
            var p = new Promise(function(resolve,reject){
                var xhr = new XMLHttpRequest();
                xhr.open("get",url);
                xhr.onreadystatechange = function(){
                    if(this.readyState !=4) return;
                    if(this.readyState == 4 && this.status == 200){
                        resolve(this.responseText);
                    }else{
                        reject("Error!");
                    }
                };
                xhr.send();
            });
            return p;
        }
        //处理原生Ajax
        queryData("http://62.234.149.220:3000/data1")
        .then(function(data){
            console.log(data);
        },function(info){
            console.log(info);
        });
    </script>
</body>

</html>

发送多次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 src="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        function queryData(url){
            var p = new Promise(function(resolve,reject){
                var xhr = new XMLHttpRequest();
                xhr.open("get",url);
                xhr.onreadystatechange = function(){
                    if(this.readyState !=4) return;
                    if(this.readyState == 4 && this.status == 200){
                        resolve(this.responseText);
                    }else{
                        reject("Error!");
                    }
                };
                xhr.send();
            });
            return p;
        }

        //多次Ajax请求
        queryData("http://62.234.149.220:3000/data1")
        .then(function(data){
            console.log(data);
            return queryData("http://62.234.149.220:3000/data2");
        })
        .then(function(data){
            console.log(data);
            return queryData("http://62.234.149.220:3000/data3");
        })
        .then(function(data){
            console.log(data);
        });
    </script>
</body>

</html>

then参数中的函数返回值

返回Promise实例对象：返回的该实例对象会调用下一个then
返回普通值：返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值。此时Vue会通过一个默认的Promise实例对象进行该操作。

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        function queryData(url){
            return new Promise(function(resolve,reject){
                var xhr = new XMLHttpRequest();
                xhr.open("get",url);
                xhr.onreadystatechange = function(){
                    if(this.readyState !=4) return;
                    if(this.readyState == 4 && this.status == 200){
                        resolve(this.responseText);
                    }else{
                        reject("Error!");
                    }
                };
                xhr.send();
            });
        }

        queryData("http://62.234.149.220:3000/data1")
        .then(function(data){
            console.log(data);
            //返回Promise实例对象
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(123);
                },1000);
            });
        })
        .then(function(data){
            console.log(data);
            //返回普通值
            return "hello";
        })
        .then(function(data){
            console.log(data);
        });
        
    </script>
</body>

</html>

Promise常用API

实例方法

1.p.then() 得到异步任务正确结果
2.p.catch() 得到异常信息
3.p.finally() 成功与否均会执行

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        function fun(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    // resolve("Hello World");
                    reject("Error");
                },1000);
            });
        }

        fun()
            .then(function(data){
                console.log(data);
            })
            .catch(function(data){
                console.log(data);
            })
            .finally(function(){
                console.log("finish");
            });    
    </script>
</body>

</html>

对象方法

1.Promise.all() 并发处理多个异步任务，所有任务均执行完毕才得到结果(结果为数组的形式)
2.Promise.race() 并发处理多个异步任务，只要有一个任务完成便会得到结果(结果为当个数值)

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        function queryData(url){
            return new Promise(function(resolve,reject){
                var xhr = new XMLHttpRequest();
                xhr.open("get",url);
                xhr.onreadystatechange = function(){
                    if(this.readyState !=4) return;
                    if(this.readyState == 4 && this.status == 200){
                        resolve(this.responseText);
                    }else{
                        reject("Error!");
                    }
                };
                xhr.send();
            });
        }

        var p1 = queryData("http://62.234.149.220:3000/data1");
        var p2 = queryData("http://62.234.149.220:3000/data2");
        var p3 = queryData("http://62.234.149.220:3000/data3");

        // Promise.all([p1,p2,p3]).then(function(result){
        //     console.log(result);
        // });

        Promise.race([p1,p2,p3]).then(function(result){
            console.log(result);
        });    
    </script>
</body>

</html>

fetch用法

概述

语法结构

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

fetch基本用法

fetch("/fdata").then(function(data){
    //需要调用fetch的text() API获取一个Promise实例对象
    return data.text();
}).then(function(data){
    //获取最终的数据
    console.log(data);
});

服务器端新增代码片段

app.get("/fdata",(req,res)=>{
    res.send("Hello Fetch");
});

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        fetch("http://62.234.149.220:3000/fdata")
            .then(function(data){
                return data.text();
            })
            .then(function(data){
                console.log(data);
            });
        
    </script>
</body>

</html>

fetch请求参数的传递

Get请求方式传参(传统?的方式，Restful的方式)

服务器端代码片段

app.get("/get",(req,res)=>{
    res.send("传统Get请求方式，参数："+ req.query.id);
});
app.get("/get/:id",(req,res)=>{
    res.send("Restful风格的Get请求方式，参数："+ req.params.id);
});

<!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="js/jquery-3.4.1.js"></script>
    <script src="js/vue.js"></script>
    <script>
        //传统Get请求传参
        // fetch("http://62.234.149.220:3000/get?id=1",{
        //     method:"get"
        // }).then(function(data){
        //     return data.text();
        // }).then(function(data){
        //     console.log(data);
        // });

        //Restful风格的Get请求传参
        fetch("http://62.234.149.220:3000/get/2",{
            method:"get"
        }).then(function(data){
            return data.text();
        }).then(function(data){
            console.log(data);
        });
        
    </script>
</body>

</html>

Delete请求方式传参

服务器端代码片段

app.delete("/delete/:id",(req,res)=>{
    res.send("Restful风格的Delete请求方式，参数："+ req.params.id);
});

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script>
            // Restful风格的Delete请求方式
     fetch("http://62.234.149.220:3000/delete/3",{
                method:"delete"
            }).then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data);
            });
            
        </script>
    </body>

    </html>

Post请求方式传参(表单格式，json格式)

服务器端代码片段

app.post("/post",(req,res)=>{
    res.send("Post的请求方式，参数："+ req.body.uname + "---" + req.body.pwd);
});

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script>
            // Post的表单请求方式
            // fetch("http://62.234.149.220:3000/post",{
            //     method: "post",
            //     body: "uname='yorick'&pwd='123'",
            //     headers:{
            //         "Content-Type": "application/x-www-form-urlencoded"
            //     }
            // }).then(function(data){
            //     return data.text();
            // }).then(function(data){
            //     console.log(data);
            // });

            //Post的json请求方式
            fetch("http://62.234.149.220:3000/post",{
                method: "post",
                body: JSON.stringify({
                    uname: "alice",
                    pwd: "233"
                }),
                headers:{
                    "Content-Type": "application/json"
                }
            }).then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data);
            });

            
        </script>
    </body>

    </html>

Put请求方式传参(表单格式，json格式)

服务器端代码片段

app.put("/put/:id",(req,res)=>{
    res.send("Put的请求方式，参数："+ req.body.uname + "---" + req.body.pwd + "---" + req.params.id);
});

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script>
            // Put的表单请求方式
            // fetch("http://62.234.149.220:3000/put/3",{
            //     method: "put",
            //     body: "uname='yorick'&pwd='123'",
            //     headers:{
            //         "Content-Type": "application/x-www-form-urlencoded"
            //     }
            // }).then(function(data){
            //     return data.text();
            // }).then(function(data){
            //     console.log(data);
            // });

            //Put的json请求方式
            fetch("http://62.234.149.220:3000/put/4",{
                method: "put",
                body: JSON.stringify({
                    uname: "bob",
                    pwd: "123"
                }),
                headers:{
                    "Content-Type": "application/json"
                }
            }).then(function(data){
                return data.text();
            }).then(function(data){
                console.log(data);
            });

            
        </script>
    </body>

    </html>

fetch的响应结果

text() 将返回结果处理为字符串类型
json() 将结果使用JSON.parse()的方式转换为json对象

服务器端代码片段

app.get("/json",(req,res)=>{
    res.json({
        uname: "jerry",
        age:18
    });
});

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script>
            fetch("http://62.234.149.220:3000/json")
            .then(function(data){
                // return data.text();
                return data.json();
            }).then(function(data){
                // var obj = JSON.parse(data);
                // console.log(obj.uname,obj.age);
                console.log(data.uname,data.age);
            });           
        </script>
    </body>

    </html>

axios用法

axios的基本用法

服务器端代码片段

app.get("/adata",(req,res)=>{
    res.send("Hello Axios");
});

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            axios.get("http://62.234.149.220:3000/adata")
            .then(function(ret){
                console.log(ret.data);
            });
        </script>
    </body>

    </html>

axios的参数传递

Get请求(传统的？方式，Restful方式，通过参数params的方式)

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            //1
            // axios.get("http://62.234.149.220:3000/get?id=1")
            // .then(function(ret){
            //     console.log(ret.data);
            // });

            //2
            // axios.get("http://62.234.149.220:3000/get/2")
            // .then(function(ret){
            //     console.log(ret.data);
            // });

            //3
            axios.get("http://62.234.149.220:3000/get",{
                params: {
                    id:3
                }
            })
            .then(function(ret){
                console.log(ret.data);
            });
        </script>
    </body>

    </html>

Delete请求(传统的？方式，Restful方式，通过参数params的方式)

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            //1
            axios.delete("http://62.234.149.220:3000/delete?id=1")
            .then(function(ret){
                console.log(ret.data);
            });

            //2
            // axios.delete("http://62.234.149.220:3000/delete/2")
            // .then(function(ret){
            //     console.log(ret.data);
            // });

            //3
            // axios.delete("http://62.234.149.220:3000/delete/3",{
            //     params:{
            //         id:3
            //     }
            // })
            // .then(function(ret){
            //     console.log(ret.data);
            // });
        </script>
    </body>

    </html>

Post请求(json格式，表单格式)

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            //1 json
            // axios.post("http://62.234.149.220:3000/post",{
            //     uname:"yorick",
            //     pwd:"123"
            // })
            // .then(function(ret){
            //     console.log(ret.data);
            // });

            //2 表单
            var params = new URLSearchParams();
            params.append("uname","alice");
            params.append("pwd","222");
            axios.post("http://62.234.149.220:3000/post",params)
            .then(function(ret){
                console.log(ret.data);
            });


            
        </script>
    </body>

    </html>

Put请求(json格式，表单格式)

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            //1 json
            axios.put("http://62.234.149.220:3000/put/2",{
                uname:"yorick",
                pwd:"123"
            })
            .then(function(ret){
                console.log(ret.data);
            });

            //2 表单
            // var params = new URLSearchParams();
            // params.append("uname","alice");
            // params.append("pwd","222");
            // axios.put("http://62.234.149.220:3000/put/3",params)
            // .then(function(ret){
            //     console.log(ret.data);
            // });


            
        </script>
    </body>

    </html>

axios的响应结果

data: 响应回来的实际数据(若返回json类型数据，则axios会帮助自动进行json类型的数据转换)
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>Document</title>
    </head>

    <body>
        
        <script src="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            axios.get("http://62.234.149.220:3000/json")
            .then(function(ret){
                console.log(ret.data.uname,ret.data.age);
            });
        </script>
    </body>

    </html>

axios的全局配置

//1.超时时间
axios.defaults.timeout=3000; 
//2.默认地址
axios.defaults.baseURL='http://62.234.149.220:3000';
//3.设置请求头
axios.defaults.headers['mytoken'] = "123";

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            axios.defaults.timeout=3000;
            axios.defaults.baseURL="http://62.234.149.220:3000/";
            axios.defaults.headers['mytoken'] = '123';
            axios.get("json")
            .then(function(ret){
                console.log(ret.data.uname,ret.data.age);
            });
        </script>
    </body>

    </html>

axios拦截器

请求拦截器

可以在请求拦截器中根据不同的url地址添加不同的请求头信息。

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            axios.interceptors.request.use(function(req){
                req.headers['mytoken'] = "hello axios";
                return req;
            },function(err){
                console.log(err);
            });
            axios.get("http://62.234.149.220:3000/get")
            .then(function(ret){
                console.log(ret);
            });
        </script>
    </body>

    </html>

响应拦截器

可以在响应拦截器中将返回的结果进行处理，仅返回其中的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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            axios.interceptors.response.use(function(res){
                var data = res.data;
                return data;
            },function(err){
                console.log(err);
            });
            axios.get("http://62.234.149.220:3000/get")
            .then(function(ret){
                console.log(ret);
            });
        </script>
    </body>

    </html>

async/await用法

async/await基本用法

async 关键字用于函数上(返回的为Promise实例对象)
await 关键字用于async函数当中(可以得到异步的结果)

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            async function queryData(){
                var ret = await axios.get("http://62.234.149.220:3000/adata");
                console.log(ret.data);
                return ret.data;
            }
            //可以获取其返回值
            queryData().then(function(data){
                console.log(data);
            })
        </script>
    </body>

    </html>

处理多个异步请求

服务器端代码片段

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");
    }
});

<!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="js/jquery-3.4.1.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/axios.js"></script>
        <script>
            async function queryData(){
                var ret1 = await axios.get("http://62.234.149.220:3000/async1");
                var ret2 = await axios.get("http://62.234.149.220:3000/async2?info="+ ret1.data);
                return ret2.data;
            }

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

    </html>

案例

将购物车项目的假数据变为从后端获取的方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
  <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input type="text" id="id" v-model='id' disabled="false" v-focus>
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle' :disabled="submitFlag">提交</button>
          </div>
        </div>
      </div>
      <div class="total">
        <span>图书总数：</span>
        <span>{{total}}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td>
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      图书管理-添加图书
    */
    axios.defaults.baseURL = 'http://localhost:3000/';
    axios.interceptors.response.use(function(res){
      return res.data;
    }, function(error){
      console.log(error)
    });
    Vue.directive('focus', {
      inserted: function (el) {
        el.focus();
      }
    });
    Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份 
          "d": date.getDate(), //日 
          "h": date.getHours(), //小时 
          "m": date.getMinutes(), //分 
          "s": date.getSeconds(), //秒 
          "q": Math.floor((date.getMonth() + 3) / 3), //季度 
          "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        submitFlag: false,
        id: '',
        name: '',
        books: []
      },
      methods: {
        handle: async function(){
          if(this.flag) {
            // 编辑图书
            var ret = await axios.put('books/' + this.id, {
              name: this.name
            });
            if(ret.status == 200){
              // 重新加载列表数据
              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){
          // flag状态位用于区分编辑和添加操作
          this.flag = true;
          // 根据id查询出对应的图书信息
          var ret = await axios.get('books/' + id);
          this.id = ret.id;
          this.name = ret.name;
        },
        deleteBook: async function(id){
          // 删除图书
          var ret = await axios.delete('books/' + id);
          if(ret.status == 200) {
            // 重新加载列表数据
            this.queryData();
          }
        },
        queryData: async function(){
          // 调用后台接口获取图书列表数据
          // var ret = await axios.get('books');
          // this.books = ret.data;

          this.books = await axios.get('books');
        }
      },
      computed: {
        total: function(){
          // 计算图书的总数
          return this.books.length;
        }
      },
      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;
          }
        }
      },
      mounted: function(){
        // var that = this;
        // axios.get('books').then(function(data){
        //   console.log(data.data)
        //   that.books = data.data;
        // })

        // axios.get('books').then((data)=>{
        //   console.log(data.data)
        //   this.books = data.data;
        // })

        this.queryData();
      }
    });
  </script>
</body>
</html>

攻城老湿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
04Vue的前后端交互

Vue的前后端交互Promise用法异步调用触发异步调用的方式定时任务Ajax事件函数多次异步调用的依赖分析多次异步调用由于不同接口相应时间的差异，导致返回结果的顺序不确定。若想得到确定顺序的异步调用结果，则需要进行嵌套调用。造成回调地狱。Promise概述避免了多层异步调用的嵌套问题提供更简洁的API，使得对异步的操作更容易Promise...
复制链接

扫一扫