04Vue的前后端交互

Vue的前后端交互


Promise用法

  1. 异步调用
  • 触发异步调用的方式
    • 定时任务
    • Ajax
    • 事件函数
  • 多次异步调用的依赖分析
    • 多次异步调用由于不同接口相应时间的差异,导致返回结果的顺序不确定。
    • 若想得到确定顺序的异步调用结果,则需要进行嵌套调用。造成回调地狱。
  1. Promise概述
  • 避免了多层异步调用的嵌套问题
  • 提供更简洁的API,使得对异步的操作更容易
  1. 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>
  1. 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>
  1. 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>
  1. 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用法

  1. 概述

语法结构

fetch(url).then(fn2)
         .then(fn3) 
         ...
          .catch(fn)
  1. 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>
  1. 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>
  1. 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用法

  1. 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>
  1. 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>
  1. 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>
  1. 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>
  1. 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用法

  1. 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>
  1. 处理多个异步请求

服务器端代码片段

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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

攻城老湿

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

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

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

打赏作者

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

抵扣说明:

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

余额充值