vue.js利用 接口 去访问 node.js 里的文件（图书列表的 增删改、存在）

1、添加图书 axios.post()

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

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

• handle: async function(){
                      if(this.flag){
                          // 编辑
                          // 编辑图名
                          // 就是根据当前的ID去更新数组中对应的数据
                          this.booksList.some((item)=>{
                              // console.log(item);
                              if(item.bid == this.id){
                                  item.name = this.name
                              }
                              // 完成更新操作之后 需要终止循环
                              return true
                          })
                      }else{
                          // 添加
                          // 发送异步请求
                          // 添加图书接口 /myadd
                          // http://127.0.0.1:4000/myadd
  
                          if(this.submitflag == false){
                                  await axios.post(`/myadd`,{
                                  name:this.name,
                                  addtime:this.getNowTime()
                              }).then((res)=>{
                                  // console.log(res);
                                  if(res.status === 200){
                                      alert(res.msg)
                                      // 重新加载列表数据(这一块其实是一个 异步操作)
                                      this.queryData()
                                  }
                              })
                          }else{
                              alert('图书已存在')
                          }
                         
                      }

  2、验证图书名字是否存在 axios.post()

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

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

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

// 侦听器
            watch:{
                // 当用户 在 文本框 输入值得时候 我们就在 watch中 对这个值name 进行 实时侦听 -- 我去库表里看  有没有 你输入的内容
                // 怎么样去库表里看？ 我们通过 异步 发送请求
                name: async function(val){
                    // 编写 验证图书名称是否已经 存在 接口 /books/book/name
                    // http://127.0.0.1:4000/books/book/小李子
                    
                    // 如果用户输入内容的时候 在把 输入的 内容 一个一个删掉 删到最后 没有内容的时候（文本框里没有内容发的时候）
                    // 我们要做个判断 在这个时候 我们不 发送 异步请求 啥也不做 程序结束掉
                    if(val === ''){
                        return false
                    }

                    // 异步发送请求
                    await axios.get(`/books/book/${val}`)
                                .then((res)=>{
                                    console.log(res);
                                    if(res.status == 1){
                                        this.submitflag = true
                                        console.log(this.submitflag);
                                    }else{
                                        // 图书 在库表里 不存在
                                        this.submitflag = false
                                        console.log(this.submitflag);
                                    }
                                })
                }
            },

 3、删除图书 axios.get 或者axios.delete()

把需要删除的id书籍 通过参数的形式传递到后台

deleteBook: async function(id){
                    console.log('获取到的id是:' +id);

                    if(window.confirm('你确定删除吗？')){
                        // 发送异步请求
                        // 删除图书接口 /del/id
                        // http://127.0.0.1:4000/del/id
                        await axios.get(`/del/${id}`)
                                    .then((res)=>{
                                        console.log(res);
                                        if(res.status === 200){
                                            // 弹窗
                                            window.alert(res.msg)
                                            // 重新加载列表数据(这一块其实是一个 异步操作)
                                            // 这一块写上后 你在点击弹窗的时候  它会自动刷新列表信息
                                            this.queryData();
                                        }else{
                                            console.log('删除失败');
                                        }
                                    })
                    }else{