vue实现个人博客项目【问题总结】

╰半夏微凉° 2022-05-18 10:43 339阅读 0赞

首先推荐一个个人认为不错的课程吧（声明，不是宣传目的哦，本人秉持着好的东西就要分享出来让更多的人知道，也希望真正的能够帮到需要的朋友）:[https://ke.qq.com/course/279663][https_ke.qq.com_course_279663]

推荐原因：讲的好是肯定的，主要的原因是因为我学习前端很久，（还在学习阶段）一直苦于没有后端数据库支持，想了很多办法，嗯，这个视频可以很好的解决哦

ok，步入正题

总结1：处理从后端获取的数据格式：看下面的代码

{
        key1:{k1:val1},
        key2:{k2:val2},
        key3:{k3:val3},
        key4:{k4:val4}
    }
    
    转为
    
    [
        {k1:val1}
        {k2:val2}
        {k3:val3}
        {k4:val4}
    ]

处理方式：如下（axios方式获取的数据都是在data中）

data(){
              return {
                blogs:[]
              }
          },     
         created(){
              axios.get("https://wd2977814978jcnbar.wilddogio.com/posts.json")
                .then((data)=>{
                  var blogArray = []
                  for(let key in data.data){
                    blogArray.push(data.data[key])
                    this.blogs = blogArray
                  }
                })
          }

总结一下：先遍历对象，获取对象中的每一项，将其push到我们新创建的数组中，之后再将这个新的数组赋值给我们的对象

注意：很多时候我们想要对获取到的数据，添加一项新的值，比如添加一个id，也是在这个阶段进行处理哦

总结2：axios中的this指向不是我们的vue实例

解决办法：1、在axios先存储一下this，然后再使用，比如var \_this = this

2、在axios中使用箭头函数，因为箭头函数的指向并不指向promise实例，而是指向它创建时候的实例（比较推荐哦）

小知识点总结：

在组件中获取动态路由参数（比如动态参数id）：this.$route.params.id

跳转到某一个页面中：除了<router-link>，还可以this.$router.push(\{path:'/'\})

[https_ke.qq.com_course_279663]: https://ke.qq.com/course/279663