vue---数据增删查改，野狗存储数据

学习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