【郑州校区】前端笔记Vue项目 第4天 10

3  验证图书名称是否存在

• 添加图书之前发送请求验证图示是否已经存在

• 如果不存在 往后台里面添加图书名称

  
  

  • 图书存在与否只需要修改submitFlag的值即可

    
    

[AppleScript] 纯文本查看 复制代码

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 查询需要编辑的书籍

• 需要根据状态位判断是添加还是编辑

  
  

[AppleScript] 纯文本查看 复制代码

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书籍 通过参数的形式传递到后台

  
  

[AppleScript] 纯文本查看 复制代码

deleteBook: async function(id){
        // 删除图书
        var ret = await axios.delete('books/' + id);
        if(ret.status == 200) {
          // 重新加载列表数据
          this.queryData();
        }
 }

【郑州校区】前端笔记Vue项目 第4天 10

3  验证图书名称是否存在

• 添加图书之前发送请求验证图示是否已经存在

• 如果不存在 往后台里面添加图书名称

  
  

  • 图书存在与否只需要修改submitFlag的值即可

    
    

[AppleScript] 纯文本查看 复制代码

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 查询需要编辑的书籍

• 需要根据状态位判断是添加还是编辑

  
  

[AppleScript] 纯文本查看 复制代码

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书籍 通过参数的形式传递到后台

  
  

[AppleScript] 纯文本查看 复制代码

deleteBook: async function(id){
        // 删除图书
        var ret = await axios.delete('books/' + id);
        if(ret.status == 200) {
          // 重新加载列表数据
          this.queryData();
        }
 }