Day21 vue.js网站删除特定文章

延续昨日
今天来完善我们的 我的专案的功能吧!
首先这是目前的我的专案
再来新增2个按钮

嘟嘟噜新增了2个按钮


再来先从删除文章开始
先观察我们的db.json

进入postman

发现是怎麽接取并删除特定文章的资料之後
先在 methods创立function deleteArticles(val)

   methods:{
         async GetSession(){
          let user=sessionStorage.getItem('user-info');
       if(!user){
         alert("请先登入")
         this.$router.push({name:'Login'})
       }
      
      this.useraccount=JSON.parse(user).id
      this.username=JSON.parse(user).username
      let articles =await axios.get(`${this.db_api}`+"articles?useraccount="+`${this.useraccount}`)
      this.projects=articles.data

      },  

         async deleteArticles(val){
         let result =await axios.delete(`${this.db_api}`+"articles/"+val);
         console.warn(result)
     
       },

然後在 v-btn 里面设定 这个funcition并且接值(值的内容是project.id)

再来就是打开console看看

Status是200 并且已经成功删除文章了
但是网页并没有马上更新 这时候就使用我们的 get session重新抓
忘记GetSession的参考day20

  methods:{
         async GetSession(){
          let user=sessionStorage.getItem('user-info');
       if(!user){
         alert("请先登入")
         this.$router.push({name:'Login'})
       }
      
      this.useraccount=JSON.parse(user).id
      this.username=JSON.parse(user).username
      let articles =await axios.get(`${this.db_api}`+"articles?useraccount="+`${this.useraccount}`)
      this.projects=articles.data

      },  

         async deleteArticles(val){
         let result =await axios.delete(`${this.db_api}`+"articles/"+val);
         console.warn(result)
        if(result.status==200){
          alert('已删除')
          this.GetSession();
        }
       },
    }

所以这就是现在的function
这样一来删除後就会直接渲染画面
p.s.为什麽有2个day17的文章 纯粹我懒 复制day17的资料後改了id就上

目前测试下来不会有不能删除的问题 所以也不用设定删除失败的告示
至於我没有设定一个确定删除吗的双重确认(我自己是觉得没必要啦等之後有空再来加)

最後帮我自己做一个小补充
Q:为什麽我按删除的时候 能正确删除我要删除的那笔文章
A:我用v-for把所有我的文章列印出来 我在删除文章的按妞中有接值 而值的内容是project.id 也就是 db.json里面的id这样一来即使两篇文章的title都一样
但是projcect.id也不一样 只是project.id并没有秀出来而已

明天就从修改文章开始吧
我们明天见!