使用Vue和Firebase实现后台数据存储的示例代码

vue create vue-firebase-demo

cd vue-firebase-demo

npm install firebase

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  databaseURL: "your-database-url",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  databaseURL: "your-database-url",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

export { db };

<template>
  <div>
    <h2>Vue 和 Firebase 实现后台数据存储</h2>
    <input v-model="item" placeholder="输入数据" />
    <button @click="addItem">保存</button>
    <hr />
    <h3>已保存数据</h3>
    <ul>
      <li v-for="(data, index) in items" :key="index">{{ data }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { db } from '../firebase';
import { getDatabase, ref as dbRef, set, onValue } from 'firebase/database';

export default {
  setup() {
    const item = ref('');
    const items = ref([]);

    const addItem = () => {
      if (item.value) {
        const newItemRef = dbRef(db, 'items/' + Date.now());
        set(newItemRef, item.value);
        item.value = '';
      }
    };

    const fetchItems = () => {
      const itemsRef = dbRef(db, 'items/');
      onValue(itemsRef, (snapshot) => {
        const data = snapshot.val();
        items.value = data ? Object.values(data) : [];
      });
    };

    onMounted(() => {
      fetchItems();
    });

    return { item, items, addItem };
  }
};
</script>

<style>
input {
  margin-right: 8px;
}
</style>

<template>
  <div id="app">
    <DataManager />
  </div>
</template>

<script>
import DataManager from './components/DataManager.vue';

export default {
  components: {
    DataManager,
  },
};
</script>

npm run serve