Sample code for implementing background data storage using Vue and Firebase

Preface

In modern web application development, seamless collaboration between the front-end and the back-end is crucial. With cloud computing solutions such as Firebase, front-end developers can easily implement data storage and real-time updates, reducing the complexity of traditional server management. This article will introduce in detail how to use Vue 3's Composition API and Firebase to implement backend data storage, and provide relevant sample code to help you better understand this process.

What is Firebase?

Firebase is a development platform provided by Google, aiming to help developers quickly build high-quality applications. It provides many features, including real-time databases, authentication, cloud storage, hosting, etc., which can support the performance needs of large applications. And through Firebase's real-time database, we can write or read data directly from it without storing relevant backend logic.

Project preparation

Before you start, you need the following environment:

• and npm
• Vue 3 CLI
• Firebase Account

Create a Vue project

First, run the following command in your terminal to create a new Vue project:

vue create vue-firebase-demo

Select the settings that suit you. After creation is completed, enter the project directory.

cd vue-firebase-demo

Install Firebase

We need to install the Firebase SDK to interact with Firebase. Install Firebase using the following command:

npm install firebase

Configure Firebase

Next, create a new Firebase project in the Firebase console.

• Log in to the Firebase console
• Create a new project
• In the Project panel, find Add App and select Web
• Copy the provided configuration to your project. The configuration should be similar to the following:

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",
};

In yoursrcCreate a new file in the directory, and paste the configuration into the file, the code is as follows:

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 };

Create Vue Components

Now let's create a Vue component to store and read data. You cansrc/componentsCreate a directory calledcomponents. Here is a simple example that allows users to enter data and store it in a Firebase real-time database.

<template>
  <div>
    <h2>Vue and Firebase Implement backend data storage</h2>
    <input v-model="item" placeholder="Input Data" />
    <button @click="addItem">save</button>
    <hr />
    <h3>已save数据</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 () {
        const newItemRef = dbRef(db, 'items/' + ());
        set(newItemRef, );
         = '';
      }
    };

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

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

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

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

Code parsing

• Template section (<template>): Here a input box and button are created, and the user can enter data and click the button to save it. Below is an unordered list (<ul>) is used to display saved data.

• Script section (<script>):

  • userefCreate responsive variablesitemanditems。
  • addItemMethod is used to save the input data to Firebase.
  • fetchItemsMethod is used to obtain stored data from Firebase and assign it toitems。
  • When component mounts (onMounted), callfetchItemsFunction to obtain and display saved data.

Complete and test

Now, bring the components into your, make it part of the application:

<template>
  <div >
    <DataManager />
  </div>
</template>

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

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

Finally, run the following command to start your Vue application:

npm run serve

Open in the browserhttp://localhost:8080, you should now see an input box, button and a list of saved data. Try entering some data and saving it, and they will be stored in the Firebase real-time database.

summary

This article shows how to implement backend data storage using Vue 3's Composition API and Firebase. By combining the power of Firebase and Vue’s responsive interface, you can quickly build high-quality web applications without worrying about complex server management.

You are welcome to make more extensions based on this, such as implementing user authentication, data update and deletion functions. Future web applications will rely more on serverless architectures and cloud platforms, and Firebase, as part of this, has provided great convenience and flexibility for developers.

The above is the detailed content of the sample code for implementing background data storage using Vue and Firebase. For more information about Vue Firebase backend data storage, please follow my other related articles!