Vue Firebase Cloud Firestore in action: steps and techniques for building a newsletter application

Vue Firebase Cloud Firestore in action: Steps and techniques for building newsletter applications

With the rapid development of the Internet, the way to obtain news information is also constantly changing. Today, people increasingly rely on mobile apps to browse news content. In this article, we will introduce how to use Vue.js and Firebase Cloud Firestore to build a newsletter application so that users can keep up to date with the latest news.

Step 1: Create a Vue project

First, we need to install the Vue CLI to create a Vue project. Run the following command in the command line:

npm install -g @vue/cli
vue create news-app
cd news-app
npm run serve

The above command will create a Vue project named news-app and start the development server.

Step 2: Install Firebase

In the project directory, run the following command to install Firebase:

npm install firebase

Step 3: Create a Firebase project

In Firebase On the website, create a new project. In the project settings, find "Add App" and select the Web option. Give your application a name and copy the provided configuration information into the Vue project's main.js file.

import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
}

firebase.initializeApp(firebaseConfig)

export const db = firebase.firestore()

Replace fields such as YOUR_API_KEY with your own configuration information.

Step 4: Create a Firestore collection

In order to store and manage news information data, we need to create a collection on Cloud Firestore. Add the following code to the main.js file to create a collection named "news":

db.collection("news").add({
  title: "Breaking News",
  content: "This is the latest news update",
  publishedAt: firebase.firestore.FieldValue.serverTimestamp()
})
.then((docRef) => {
  console.log("Document written with ID: ", docRef.id);
})
.catch((error) => {
  console.error("Error adding document: ", error);
});

The above code adds a new news document to the collection named "news". By setting the publishedAt field to a server timestamp, we can ensure that each news document has its own publication time.

Step 5: Obtain news data from Firestore

Use the Vue component to display the news data obtained from Firestore. Create a NewsList.vue component and add the following code in the template block:

<template>
  <div>
    <h2 id="News-List">News List</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <h3 id="news-title">{{ news.title }}</h3>
        <p>{{ news.content }}</p>
        <p>{{ news.publishedAt.toDate() }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    db.collection('news').orderBy('publishedAt', 'desc')
      .onSnapshot((snapshot) => {
        this.newsList = snapshot.docs.map(doc => {
          return { ...doc.data(), id: doc.id }
        })
      })
  }
}
</script>

The above code will get news data from Firestore in real time and display it on the page.

Step 6: Create the function of adding news

Add the function of adding news in the NewsList.vue component. Add the following code in the template block:

<template>
  <div>
    <!-- ...上述代码... -->
    <form @submit.prevent="addNews">
      <input type="text" v-model="newsTitle" placeholder="News Title">
      <textarea v-model="newsContent" placeholder="News Content"></textarea>
      <button type="submit">Add News</button>
    </form>
  </div>
</template>

<script>
import { db } from '@/main'

export default {
  data() {
    return {
      newsList: [],
      newsTitle: '',
      newsContent: ''
    }
  },
  mounted() {
    // ...上述代码...
  },
  methods: {
    addNews() {
      db.collection('news').add({
        title: this.newsTitle,
        content: this.newsContent,
        publishedAt: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(() => {
        this.newsTitle = ''
        this.newsContent = ''
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
    }
  }
}
</script>

The above code will use the addNews method to add news data to Firestore.

So far, we have successfully built a simple newsletter application using Vue.js and Firebase Cloud Firestore. Through this application, users can browse the latest news and information, and can also add their own news.

Summary:

This article introduces the steps and techniques for developing newsletter applications using Vue.js and Firebase Cloud Firestore. Through the combination of Vue framework and Firestore database, we can create a real-time updated news application to keep users informed of the latest news. I hope this article will be helpful to developers who want to develop similar applications.

The above is the detailed content of Vue Firebase Cloud Firestore in action: steps and techniques for building a newsletter application. For more information, please follow other related articles on the PHP Chinese website!