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

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

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

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

ok，步入正题

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

  1. {
  2.     key1:{k1:val1},
  3.     key2:{k2:val2},
  4.     key3:{k3:val3},
  5.     key4:{k4:val4}
  6. }
  8. 转为
  10. [
  11.     {k1:val1}
  12.     {k2:val2}
  13.     {k3:val3}
  14.     {k4:val4}
  15. ]

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

  1. data(){
  2.           return {
  3.             blogs:[]
  4.           }
  5.       },     
  6.      created(){
  7.           axios.get("https://wd2977814978jcnbar.wilddogio.com/posts.json")
  8.             .then((data)=>{
  9.               var blogArray = []
  10.               for(let key in data.data){
  11.                 blogArray.push(data.data[key])
  12.                 this.blogs = blogArray
  13.               }
  14.             })
  15.       }

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

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

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

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

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

小知识点总结：

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

跳转到某一个页面中：除了，还可以this.$router.push({path:’/‘})

发表评论

表情：
评论列表 （有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读

    相关 基于vue的个人博客

    第一章 引言 1.1系统开发背景 信息时代的今天，网络已经成为人们工作、学习的一部分，不断充实和改变着人们的生活。在网络中，构建一个个性化的个人博客，可以充分地表达

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 82 阅读