【15】Vue：04-接口调用方式、异步、promise、基于Promise发送Ajax请求、Promise基本API、fetch、axios、async和await、图书列表后台案例、

最新推荐文章于 2021-08-27 14:30:43 发布
最新推荐文章于 2021-08-27 14:30:43 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： axios fetch promise 异步 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Satan_Devil/article/details/108156612
版权

文章目录

day04

接口调用方式

  • 原生ajax
  • 基于jQuery的ajax
  • fetch
  • axios
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 处理静态资源
app.use(express.static('public'))
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});
app.get('/async1', (req, res) => {
  res.send('hello1')
})
app.get('/async2', (req, res) => {
  if(req.query.info == 'hello') {
    res.send('world')
  }else{
    res.send('error')
  }
})

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 12
  });
})


app.get('/fdata', (req, res) => {
  res.send('Hello Fetch!')
})
app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.delete('/books/:id', (req, res) => {
  res.send('DELETE请求传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})
app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
})

app.get('/a1', (req, res) => {
  setTimeout(function(){
    res.send('Hello TOM!')
  },1000);
})
app.get('/a2', (req, res) => {
  setTimeout(function(){
    res.send('Hello JERRY!')
  },2000);
})
app.get('/a3', (req, res) => {
  setTimeout(function(){
    res.send('Hello SPIKE!')
  },3000);
})

// 路由
app.get('/data', (req, res) => {
  res.send('Hello World!')
})
app.get('/data1', (req, res) => {
  setTimeout(function(){
    res.send('Hello TOM!')
  },1000);
})
app.get('/data2', (req, res) => {
  res.send('Hello JERRY!')
})

// 启动监听
app.listen(3000, () => {
  console.log('running...')
})

异步

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>前后端交互</div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    /*
      前后端交互-异步编程与Promise概述
    */
    // var ret = '---';
    // $.ajax({
    //   url: 'http://localhost:3000/data',
    //   success: function(data) {
    //     ret = data;
    //     console.log(ret)
    //   }
    // });
    // console.log(ret)

    // ----------------------------
    // $.ajax({
    //   url: 'http://localhost:3000/data',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // $.ajax({
    //   url: 'http://localhost:3000/data1',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // $.ajax({
    //   url: 'http://localhost:3000/data2',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // -----------------------------------
    $.ajax({
      url: 'http://localhost:3000/data',
      success: function(data) {
        console.log(data)
        $.ajax({
          url: 'http://localhost:3000/data1',
          success: function(data) {
            console.log(data)
            $.ajax({
              url: 'http://localhost:3000/data2',
              success: function(data) {
                console.log(data)
              }
            });
          }
        });
      }
    });
  </script>
</body>
</html>

promise

  • 主要解决异步深层嵌套的问题
  • promise 提供了简洁的API 使得异步操作更加容易
 
  <script type="text/javascript">
    /*
     1. Promise基本使用
           我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：		   resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
    */


    var p = new Promise(function(resolve, reject){
      //2. 这里用于实现异步任务  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情况
          resolve('hello');
        }else{
          //4. 异常情况
          reject('出错了');
        }
      }, 100);
    });
    //  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
    //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
  </script>

基于Promise发送Ajax请求

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

Promise 基本API

实例方法
.then()
  • 得到异步任务正确的结果
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      then参数中的函数返回值
    */
    function queryData(url) {
      return new Promise(function(resolve, reject){
        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);
      });
    }
    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){
        return 'hello';
      })
      .then(function(data){
        console.log(data)
      })

  </script>
</body>
</html>
.catch()
  • 获取异常信息
.finally()
  • 成功与否都会执行（不是正式标准）
  
  <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行（不是正式标准） 
      .finally(function(){
        console.log('finished')
      });
  </script>
静态方法
.all()
  • Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
.race()
  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

​

  <script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        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([p1,p2,p3]).then(function(result){
       //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
      console.log(result) // "HELLO TOM"
    })
  </script>

fetch

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

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

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

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

       # POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        # PUT请求传参     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });
    </script>
fetchAPI 中 响应格式
  • 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等
    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  将获取到的数据使用 json 转换对象
      return data.text(); //  //  将获取到的数据 转换成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

axios

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据
axios基础用法
  • get和 delete请求传递参数
    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数
  • post 和 put 请求传递参数
    • 通过选项传递参数
    • 通过 URLSearchParams 传递参数
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
  axios.get('http://localhost:3000/adata').then(function(ret){
    // 注意data属性是固定的用法，用于获取后台的实际数据
    // console.log(ret.data)
    console.log(ret)
  })
</script>

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

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

 	#5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
axios 全局配置
#  配置请求的基准URL地址
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios 拦截器
  • 请求拦截器
    • 请求拦截器的作用是在请求发送前进行一些操作
      • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
  • 响应拦截器
    • 响应拦截器的作用是在接收到响应后进行一些操作
      • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
	# 1. 请求拦截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
      # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       #1.3 对请求错误做点什么    
      console.log(err)
    })
	#2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
      #2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })

async 和 await

  • async作为一个关键字放到函数前面
    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用
    • ​ await后面可以直接跟一个 Promise实例对象
    • ​ await函数不能单独使用
  • async/await 让异步代码看起来、表现起来更像同步代码
    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象
    */
 	# 1.  async 基础用法
    # 1.1 async作为一个关键字放到函数前面
	async function queryData() {
      # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

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

    async function queryData() {
      # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      #2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

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

图书列表案例

图书管理后台接口文档

基准路径： http://localhost:3000/

获取图书列表数据
  • 路径：books
  • 请求参数：无
  • 响应结果
[{
  "id": "4",
  "name": "红楼梦",
  "date": 2525609975000
}, {
  "name": "三国演义",
  "date": 2525609975000,
  "id": 5
}, {
  "name": "水浒传",
  "date": 2525609975000,
  "id": 6
}, {
  "name": "西游记",
  "date": 2525609975000,
  "id": 7
}]
添加图书-提交图书信息
  • 路径：books
  • 请求参数
    • name : 图书名称
  • 响应结果
{
    "status": 200  // (200表示成功；500表示失败)
}
编辑图书-根据ID查询图书信息
  • 路径：books/:id
  • 请求参数：无
  • 响应结果
{
    "name":"西游记",
    "date":2525609975000,
    "id":7
}
编辑图书-提交图书信息
  • 路径：books/:id
  • 请求参数
    • name : 图书名称
  • 响应结果
{
    "status": 200  // (200表示成功；500表示失败)
}
删除图书信息
  • 路径：books/:id
  • 请求参数: 无
  • 响应结果
{
    "status": 200  // (200表示成功；500表示失败)
}
验证图书名称是否存在
  • 路径：books/book/:name
  • 请求参数:无
  • 响应结果
{
    "status": 1  // (1表示存在；2表示不存在)
}
1. 基于接口案例-获取图书列表
  • 导入axios 用来发送ajax
  • 把获取到的数据渲染到页面上
  <div id="app">
        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 5.  把books  中的数据渲染到页面上   -->
                    <tr :key='item.id' v-for='item in books'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date }}</td>
                        <td>
                            <a href="">修改</a>
                            <span>|</span>
                            <a href="">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
	1.  导入axios   
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        /*
             图书管理-添加图书
         */
        # 2   配置公共的url地址  简化后面的调用方式
        axios.defaults.baseURL = 'http://localhost:3000/';
        axios.interceptors.response.use(function(res) {
            return res.data;
        }, function(error) {
            console.log(error)
        });

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

            mounted: function() {
				#  4 mounted  里面 DOM已经加载完毕  在这里调用函数  
                this.queryData();
            }
        });
    </script>
2 添加图书
  • 获取用户输入的数据 发送到后台
  • 渲染最新的数据到页面上
 methods: {
    handle: async function(){
          if(this.flag) {
            // 编辑图书
            // 就是根据当前的ID去更新数组中对应的数据
            this.books.some((item) => {
              if(item.id == this.id) {
                item.name = this.name;
                // 完成更新操作之后，需要终止循环
                return true;
              }
            });
            this.flag = false;
          }else{
            # 1.1  在前面封装好的 handle 方法中  发送ajax请求  
            # 1.2  使用async  和 await 简化操作 需要在 function 前面添加 async   
            var ret = await axios.post('books', {
              name: this.name
            })
            # 1.3  根据后台返回的状态码判断是否加载数据 
            if(ret.status == 200) {
             # 1.4  调用 queryData 这个方法  渲染最新的数据 
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },        
 }
3 验证图书名称是否存在
  • 添加图书之前发送请求验证图示是否已经存在
  • 如果不存在 往后台里面添加图书名称
    • 图书存在与否只需要修改submitFlag的值即可
 watch: {
        name: async function(val) {
          // 验证图书名称是否已经存在
          // var flag = this.books.some(function(item){
          //   return item.name == val;
          // });
          var ret = await axios.get('/books/book/' + this.name);
          if(ret.status == 1) {
            // 图书名称存在
            this.submitFlag = true;
          }else{
            // 图书名称不存在
            this.submitFlag = false;
          }
        }
},
4. 编辑图书
  • 根据当前书的id 查询需要编辑的书籍
  • 需要根据状态位判断是添加还是编辑
 methods: {
        handle: async function(){
          if(this.flag) {
            #4.3 编辑图书   把用户输入的信息提交到后台
            var ret = await axios.put('books/' + this.id, {
              name: this.name
            });
            if(ret.status == 200){
              #4.4  完成添加后 重新加载列表数据
              this.queryData();
            }
            this.flag = false;
          }else{
            // 添加图书
            var ret = await axios.post('books', {
              name: this.name
            })
            if(ret.status == 200) {
              // 重新加载列表数据
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },
        toEdit: async function(id){
          #4.1  flag状态位用于区分编辑和添加操作
          this.flag = true;
          #4.2  根据id查询出对应的图书信息  页面中可以加载出来最新的信息
          # 调用接口发送ajax 请求  
          var ret = await axios.get('books/' + id);
          this.id = ret.id;
          this.name = ret.name;
        },
5 删除图书
  • 把需要删除的id书籍 通过参数的形式传递到后台
   deleteBook: async function(id){
          // 删除图书
          var ret = await axios.delete('books/' + id);
          if(ret.status == 200) {
            // 重新加载列表数据
            this.queryData();
          }
   }
6 代码
<!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>

const express = require('express');
const path = require('path');
const router = require('./router.js');
const bodyParser = require('body-parser');
const app = express();

// 启动静态资源服务
app.use(express.static('public'));

// 处理请求参数
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

// 配置路由
app.use(router);
// 监听端口
app.listen(3000, () => {
    console.log('running...');
});

/*
  路由模块
*/
const express = require('express');
const router = express.Router();
const service = require('./service.js');

// 查询图书列表
router.get('/books', service.getAllBooks);
// 添加图书(提交表单)
router.post('/books', service.addBook);
// 跳转到编辑图书信息页面
router.get('/books/:id', service.toEditBook);
// router.get('/toEditBook',service.toEditBook);
// 编辑图书提交表单
router.put('/books/:id', service.editBook);
// 删除图书信息
router.delete('/books/:id', service.deleteBook);
// 验证图书名称是否存在
router.get('/books/book/:name', service.checkName);

module.exports = router;

const data = require('./data.json');
const path = require('path');
const fs = require('fs');

// 自动生成图书编号（自增）
let maxBookCode = () => {
    let arr = [];
    data.forEach((item) => {
        arr.push(item.id);
    });
    return Math.max.apply(null, arr);
}
// 把内存数据写入文件
let writeDataToFile = (res) => {
    fs.writeFile(path.join(__dirname, 'data.json'), JSON.stringify(data, null, 4), (err) => {
        if (err) {
            res.json({
                status: 500
            });
        }
        res.json({
            status: 200
        });
    });
}
// 验证图书名称是否存在
exports.checkName = (req, res) => {
    let name = req.params.name;
    let flag = false;
    data.some(item => {
        if (name == item.name) {
            flag = true;
            return true;
        }
    })
    if (flag) {
        res.json({
            status: 1
        })
    } else {
        res.json({
            status: 2
        })
    }
}

// 获取图书列表数据
exports.getAllBooks = (req, res) => {
    res.json(data);
}

// 添加图书保存数据
exports.addBook = (req, res) => {
    // 获取表单数据
    let info = req.body;
    let book = {};
    for (let key in info) {
        book[key] = info[key];
    }
    book.date = 2525609975000;
    book.id = maxBookCode() + 1;
    data.push(book);
    // 把内存中的数据写入文件
    writeDataToFile(res);
}
// 跳转编辑图书页面
exports.toEditBook = (req, res) => {
    let id = req.params.id;
    let book = {};
    data.some((item) => {
        if (id == item.id) {
            book = item;
            return true;
        }
    });
    res.json(book);
}
// 编辑图书更新数据
exports.editBook = (req, res) => {
    let info = req.body;
    info.id = req.params.id;
    data.some((item) => {
        if (info.id == item.id) {
            for (let key in info) {
                item[key] = info[key];
            }
            return true;
        }
    });
    // 把内存中的数据写入文件
    writeDataToFile(res);
}
// 删除图书信息
exports.deleteBook = (req, res) => {
    let id = req.params.id;
    data.some((item, index) => {
        if (id == item.id) {
            // 删除数组的一项数据
            data.splice(index, 1);
            return true;
        }
    });
    // 把内存中的数据写入文件
    writeDataToFile(res);
}

每日作业-Vue第04天

todos案例-组件化抽离
  • 题目描述
    • 当在输入框中输入完内容的按回车键 当前内容展示到页面上
    • 点击三角 实现全选和全不选功能
    • 点击叉号实现删除功能
    • 双击标题实现编辑功能
    • 如 点击 SECTION 1 则 内容区域显示 对应 SECTION 1 的内容 同时当前 SECTION的字体颜色变成蓝色
  • 训练目标
    • axios使用
    • 增删改查
  • 训练提示
    • 1 请求后台接口list 获取 数据展示到页面上
      • 发送ajax请求

  • 在mounted 钩子中将数据渲染到页面上

    • 2 增加内容
      • 在回车事件中发送ajax请求
        • 我们已经封装好的 addTodo 方法中发送ajax请求
      • 将用户输入的内容添加到后台
        • 把用户输入的内容传递给后台
      • 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
    • 3 双击修改列表信息
      • 按回车键或者失去焦点的时候获取到用户信息
        • 这里需要把当前列表信息的id获取到
      • 把收集到的用户信息发送到后台
    • 4 删除列表信息
      • 点击按钮 删除当前列表信息
        • 需要把当前列表的id传递过去
      • 发送ajax请求 根据id 删除当前信息
    • 5 删除全部完成
      • 在fotter 的Clear completed 的事件处理函数中发送ajax 请求删除所有complete 为true 的
    • 6 实现全选功能
      • 在toggleStat1 中发送ajax请求 根据当前复选框选中状态 修改后台数据中对应的 complete 值
    • 7 实现单选功能
      • 获取当前每一个CheckBox的选中状态 根据这个状态的修改 来发送对应的请求

每日作业-Vue第04天参考答案

todos接口案例

1 请求后台接口list 获取 数据展示到页面上
  • 发送ajax请求
  • 在mounted 钩子中将数据渲染到页面上
axios.defaults.baseURL = 'http://localhost:3001/';

new Vue({
     data: {
                currentEditing: null,
                todos: []
     },	
	  mounted() {
          		# 1.2 在mounted  钩子中将数据渲染到页面上
                this.getList()
            },
      methods: {
          		# 1.1 发送ajax请求
                getList() {
                    axios.get('list').then(res => {
                        console.log(res.data)
                        this.todos = res.data
                    })
                }
       }          

})
2 增加内容
  • 在回车事件中发送ajax请求
    • 我们已经封装好的 addTodo 方法中发送ajax请求
  • 将用户输入的内容添加到后台
    • 把用户输入的内容传递给后台
  • 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
addTodo(todoText) {
                    axios.post('add', {
                            title: todoText,
                        }).then(res => {
                        	#  在请求成功之后重新渲染页面
                            this.getList()
                        })
                    // 清空文本框
                    event.target.value = ''
 },
3 双击修改列表信息
  • 按回车键或者失去焦点的时候获取到用户信息
    • 这里需要把当前列表信息的id获取到
  • 把收集到的用户信息发送到后台
##  子组件中   需要把当前id 传递过去
<input class="edit" 
    @keyup.enter="$event.target.blur" 
    @blur="saveEdit(item,  $event)" 
     :value="item.title" 
    @keyup.esc="currentediting = null">   
         
 saveEdit(item, event) {
                    var editText = event.target.value.trim()
                    console.log(item, '--------')
                    this.$emit("save-edit", editText, item)
 },

### 父组件方法
### 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
// 保存编辑项
         saveEdit(editText, item) {
				axios.put(`list/${item.id}`, {
						title: editText,
                    }).then(res => {
                        this.getList()
                         // 3. 去除 editing 样式
                          this.currentEditing = null
                    })

                   
                }
4 删除当前列表信息
  • 点击按钮 删除当前列表信息
    • 需要把当前列表的id传递过去
  • 发送ajax请求 根据id 删除当前信息
# 4.1  需要把删除按钮的id 传递过去 
<button class="destroy" @click="removeTodoParent(item.id, $event)"></button>




# 父组件
### 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送

  // 删除任务项
  removeTodo(delIndex) {
      axios.delete(`list/${delIndex}`).then(res => {
          this.getList()
      })
  },
5 删除全部完成
  • 在fotter 的Clear completed 的事件处理函数中发送ajax 请求删除所有complete 为true 的 删除掉
# 父组件
### 因为我们所有的数据增删改查都是在父组件中修改 所有ajax也在父组件的 方法中发送
 removeAllDone() {
                    axios('deletecompeted').then(res => {
                        console.log(res,'--deletecompeted--')
                        this.getList()
                    })

   }
6 实现全选功能
  • 在toggleStat1 中发送ajax请求 根据当前复选框选中状态 修改后台数据中对应的 complete 值
  #2  把数据更新放在父组件中 
 <mylist @get-list="getList()" ></mylist>

computed: {
                toggleStat1: {
                    get() {
                        return this.todos.every(item => item.completed)
                    },
                    set(val) {
                        axios.get(`all/${Number(val)}`).then(res => {
                            #1 子组件通知父组件更新数据
                            this.$emit('get-list')
                        })

                    }
                }
  }
7 实现单选功能
  • 获取当前CheckBox的选中状态 根据这个状态的修改 来发送对应的请求
#  1  获取当前复选框的选中状态
  <input type="checkbox"   @click="getCheckboxStatus(item.id,$event)" class="toggle" :value="item.completed" v-model="item.completed">
      
# 2  发送对应的请求
 getCheckboxStatus(id, e) {
    let status = e.target.checked;
     axios.get(`setcheckboxstatus/${id}/${Number(status)}`).then(res => {
                        console.log(res)
         })
      }
忘尘 丶莫负
关注
专栏目录
promise封装ajax
qq_45910045的博客
11-12 130
promise封装ajax var baseUrl = "http://120.76.31.111/app/XhlGetSubjectTypeList"; function getData(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.open("GET",url); xhr.send(); xhr.addEv
vue 第四天 Promise用户；then参数；fetch接口调用方法；axios插件；async/await 用法
m0_55170432的博客
05-07 1218
1.1 接口调用方式 原生 ajax 基于 jQuery 的ajax fetch axios 这里可以返回一个完整的HTML页面；也可以只返回特定格式的数据，比如json 1.2 URL 地址格式 1. 传统形式的 URL 格式：schema://host:port/path?query#fragment schema：协议。例如http、https、ftp等 host：域名或者IP地址 port：端口, http默认端口80，可以省略 path：路径, 例如/abc/a/b/c query ：查
promise封装的ajax
weixin_33727510的博客
04-03 88
var myNewAjax=function(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); xhr.open('get',url); xhr.send(data); xhr.onreadystatechange=fu...
vue 的promise使用
hugejihu9的专栏
01-07 4612
文章来自：源码在线https://www.shengli.me/css/540.html    
Promise封装ajax
limingxiaojie的博客
09-03 128
var url = '/路径'; var params = { id: '123', name: 'Paul' }; //封装一个get请求方法 function getJson(url) { return new Promise(function(resolve,reject){ var XH...
vue-cli3:vue-cli3脚手架 vue+typescript+vue-property-decorator+vue-class-component+axios
04-08
本篇文章将详细介绍使用Vue CLI 3搭建基于Vue.js、TypeScript、vue-property-decorator和vue-class-component的项目，并集成axios库进行API请求。 首先，让我们从Vue CLI 3开始。Vue CLI 3 提供了一个直观的命令行...
vue-async-function:Vue异步功能
03-14
总的来说，Vue 3.0的异步功能通过组合API和`async/await`语法，为开发者提供了更优雅的方式来处理异步数据获取和组件的生命周期，提升了开发体验和应用性能。在实际项目中，利用这些新特性可以更好地构建复杂、高...
Vue 接口异步 Promise fetch axios
qq_38232003的博客
08-26 337
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容
Vue第三天学习总结—— Vue全家桶之前后端交互(前后的交互模式、Promise用法、接口调用-fetch用法、接口调用-axios用法、接口调用-async/await用法 )
weixin_52819925的博客
08-27 610
(一) 前后的交互模式 之前处理的案例都是静态数据，而真正的项目都是需要后台提供真正的数据的 那么前台就需要通过后台提供的数据接口获取数据 1. 接口调用方式 原生ajax：比较麻烦，一般不用 基于jQuery的ajax：这个会简单点，但jquery侧重DOM操作，而Vue很少涉及DOM操作 fetch：ajax升级版，标准化组织制定的一套新规范 axios：第三方的库，比fetch更加强大 客户端与服务器通信方式 左侧为客户端，右侧为服务器 客户端通过互联网向服务器发起请求（寻求页面，数据）
使用Promise来封装ajax的操作
weixin_48196628的博客
10-05 124
// Promise 封装 ajax function fetch(method, url, data){ return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); var method = method || "GET"; var data = data || null; xhr.open(method, url, true);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值