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,然后进行传入