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