时间戳

首页 > 解决方案 > 如何使用 vue.js 将简单数据保存在 firebase 中？

firebase - 如何使用 vue.js 将简单数据保存在 firebase 中？

问题描述

假设有两个字段包含一些文本，例如第一个文本字段包含字符串“Apple”，下一个文本字段将包含 Apple 的计数，假设计数的值为 10，然后单击提交按钮如何将数据发送到firebase数据库我用于保存电子邮件的代码和密码是：-

 <template>
  <div class="container">
   <div class= "row">
    <div class= "col-xs-12 co-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
     <h1>Http</h1>
      <div class="form-group">
      <label>Username</label>
      <input type="text" class="form-control" v-model="username">
    </div>
    <div class="form-group">
      <label>Mail</label>
      <input type="text" class="form-control" v-model="email">
    </div>
    <button class="btn btn-primary" @click="submit">Submit</button>
    </div>
   </div>
  </div>
 </template>

 <script>
   import firebase from 'firebase'
   var config = {
       apiKey: "]api_key",
       authDomain: "vuejs-http-11c9f.firebaseapp.com",
       databaseURL: "https://vuejs-http-11c9f.firebaseio.com",
       projectId: "vuejs-http-11c9f",
       storageBucket: "vuejs-http-11c9f.appspot.com",
       messagingSenderId: "Messaging_id"
    };
    firebase.initializeApp(config);
    export default {
    data() {
     return{
        username:'',
        email:''
     };
   },
   methods:{
    submit(){
      // console.log(this.user.email)
      firebase.auth().createUserWithEmailAndPassword(this.username, this.email)
     .then((result) => {
      console.log(result);
      }).catch((err) => {
         console.log(err)
      });
    }
  }
 }
</ script>

在上面的程序中应该应用什么更改，它将我的两个文本字段数据保存到 firebase 的数据库中。

Firebase 我正在使用我们 5.3.1 。

标签： firebasefirebase-realtime-databasevue.js

解决方案

要在 firebase 数据库中保存数据，您通常有两种选择。

1) cloud Firestore（目前为测试版）

2) 实时数据库

由于云 Firestore 处于测试阶段，如果您的应用即将投入生产，我建议您使用实时数据库。

因此，要使用实时数据库将其存储在 firebase 中，您首先需要创建 firebase 数据库的引用，如下所示

const databaseRef = firebase.database();

之后使用此参考设置数据，如下所示

databaseRef.ref('fruitDetails/').set({
  fruitName: 'name of the fruit from text field',
  count: 'count from count text field'
});

如果您不想创建多个数据库，请确保在整个应用程序中使用相同的数据库引用。

推荐阅读