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

最新推荐文章于 2025-07-15 09:43:21 发布

冰雪为融

最新推荐文章于 2025-07-15 09:43:21 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/81364429

vue 专栏收录该内容

81 篇文章

订阅专栏

本文介绍了如何将从后端获取的特定格式数据转换为数组形式，并提供了利用axios请求数据时需要注意的this指向问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先推荐一个个人认为不错的课程吧（声明，不是宣传目的哦，本人秉持着好的东西就要分享出来让更多的人知道，也希望真正的能够帮到需要的朋友）: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:'/'})