160.Vue实现个人博客（八）【Vue2.0-post数据到firebase数据库】 2019.03.15

0、知识点

• firebase数据库

1、firebase数据库

• 如何将数据post自己的数据库当中，而不是post到jsonplaceholder，因为jsonplaceholder我们无法改变里面的数据，无论是post还是get都不行，这些数据都是jsonplaceholder设置好的，我们无法变动。
  所以，我们可以使用firebase数据库，来操作数据。

• firebase数据库链接地址：
  https://firebase.google.cn

• 点击开始使用
  

• 点击添加项目
  

• 配置数据库是否可读可写 ，完成后，点击发布即可

• read：true

• write：true
  

• 拷贝文件路径
  

• 添加博客数据后，在fireblog当中会显示刚才添加的数据信息
  

2、AddBlog.vue

 methods:{
    post:function(){
      // 把数据post到firebase数据库当中去，然后需要创建一个post.json文件，vue会自动帮我们创建好这样的一个文件
      //我们使用this.blog，将当前的信息全部传递到这个对象中来
      this.$http.post("https://vuedemo-b1233.firebaseio.com/posts.json",this.blog)
          
          // post成功后，返回数据
          .then(function(data){
            console.log(data);
            this.submmited = true;  // 当点击添加博客时，submmited会被触发
          });
    }
  }

3、ShowBlog.vue

created(){
   // 请求firebase当中的地址
  	this.$http.get('https://vuedemo-b1233.firebaseio.com/posts.json')
      
    // 注意：若想请求当前本地的json文件，需要把json文件放在static文件下，主这样才能够访问成功
    // this.$http.get('./../static/posts.json') 

      // get数据成功后，返回数据信息
      .then(function(data){
        return data.json()
  			// console.log(data.json());
  			// this.blogs = data.body.slice(0,10); // 输出10条数据信息
  			// console.log(this.blogs);
  		})

4、下一步将每个对象对应的标识截取出来，作为我们的id，然后进行传入