学习vue系列课程时,涉及到前端页面数据的存储与读取,原本想使google的firebase,可是网址访问不了o(╥﹏╥)o,还好,有野狗。
野狗的“实时通信引擎”功能有效地解决了我的需求。(*^▽^*) 可以这么说吧,野狗是一个具有实时同步数据功能的云端数据库。
写下笔记,备忘~
(1)打开野狗通信云网址:https://www.wilddog.com/,注册个人账号,即可看到【所有应用】
点击进入【实时通信引擎】
【数据预览】处的网址是数据存储的地址,在vue中,使用vue-resource或者axios可以实现http请求。以下只介绍vue-resource方法
提交(增加)数据:
通过post方法提交数据到野狗,代码如下:post中的地址就是【数据预览】处的网址,数据格式为json,实现将json对象blog提交到野狗【实时通信引擎】中,查看【posts】,每条数据生成一个唯一标识id,可通过该id实现数据的删、查、改。
methods: {
post: function() {
this.$http
.post("https://wd*******hatwni.wilddogio.com/posts.json", this.blog)
.then(data => {
console.log(data)
});
}
}
查询指定的数据:
在vue中,通用get从野狗云获取数据,需要结合钩子函数完成该功能,使用【created】钩子函数==在组件实例化完毕,但页面还未显示前进行查询,代码如下
created() {
this.$http
.get("https://wd*******hatwni.wilddogio.com/posts/" + this.id + ".json")
.then(data => {
return data.json();
})
.then(data => {
this.blog = data;
});
}
删除指定的数据:
删除数据需要在删除按钮处定义点击事件,通过delete方法实现数据删除功能。
<button v-on:click="deleteBlog()">删除</button>
methods: {
deleteBlog() {
var msg = confirm("真的要删除吗?");
if (msg) {
this.$http
.delete( "https://wd******hatwni.wilddogio.com/posts/" + this.id +".json")
.then(response => {
this.$router.push({ path: "/" });
});
}
}
},
修改指定的数据:
修改数据相对增。查、删要复杂些,涉及到数据的回显,因此得先get指定的数据信息,这里我用一个vue组件来实现数据的修改功能,
对数据修改编辑后进行再次提交。注意,这里不能使用post提交了,需要用put将野狗上的数据进行更新。
在编辑按钮处使用router-link标签绑定路由路径,路径中需要包含id
<router-link v-bind:to="'/edit/'+id">
<button>编辑</button>
</router-link>
当然,少不了要在router.js路由配置文件中导入组件,定义路由路径
import ShowBlogs from './components/ShowBlogs.vue'
import AddBlog from './components/AddBlog.vue'
import SingleBlog from './components/SingleBlog.vue'
import EditBlog from './components/EditBlog.vue'
export default [
{ path: "/", component: ShowBlogs },
{ path: "/add", component: AddBlog },
{ path: "/blog/:id", component: SingleBlog },
{ path: "/edit/:id", component: EditBlog }
]
之后,在组件EditBlog.vue中操作,包括 数据回显,数据提交
数据回显:get数据,结合钩子函数。数据提交:put
created() {
this.fetchData();
},
methods: {
//编辑数据回显
fetchData() {
this.$http
.get(
"https://wd*******hatwni.wilddogio.com/posts/" + this.id + ".json"
)
.then(response => {
this.blog = response.body;
});
},
//数据更新提交
post: function() {
this.$http
.put(
"https://wd*********hatwni.wilddogio.com/posts/" + this.id + ".json",
this.blog
)
.then(data => {
//console.log(data);
// this.submmited = true;
});
}
},
更完整的说明,下一篇见~o(* ̄▽ ̄*)o