前端笔记Vue项目day4(九）

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

• 导入axios   用来发送ajax

• 把获取到的数据渲染到页面上

• [mw_shl_code=applescript,true]
  
          

  
              
                 
                      
                          
                          
                          
                          
                      
                 
                 
                      
                      
                          
                          
                          
                          
                      
                 
              

  编号	名称	时间	操作
  {{item.id}}	{{item.name}}	{{item.date }}	修改                             |                             删除

  
          

  
     
  
     
          1.  导入axios   
     
      [/mw_shl_code]
• 2   添加图书

  • 获取用户输入的数据   发送到后台

  • 渲染最新的数据到页面上

  • [mw_shl_code=applescript,true]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 = '';
            },        
    }         [/mw_shl_code]