Vue 및 Firebase Cloud Firestore를 사용하여 반응형 뉴스레터 앱을 구축하는 방법

Vue 및 Firebase Cloud Firestore를 사용하여 반응형 뉴스레터 애플리케이션을 구축하는 방법

머리말:
인터넷의 급속한 발전으로 뉴스 정보의 확산이 점점 빨라지고 있습니다. 현대인으로서 우리는 항상 모든 종류의 최신 뉴스를 가능한 한 빨리 알고 싶어합니다. 그래서 이 글에서는 Vue와 Firebase Cloud Firestore를 사용하여 반응형 뉴스레터 앱을 구축하는 방법을 다루겠습니다.

Vue 및 Firebase Cloud Firestore란 무엇입니까?
Vue는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. 구성요소화된 개발 모델을 사용하여 대화형 웹 애플리케이션을 보다 쉽게 ​​구축할 수 있습니다.

Firebase는 Google에서 제공하는 클라우드 서비스 플랫폼으로, Cloud Firestore는 애플리케이션의 백엔드 구축을 돕기 위해 설계된 유연하고 확장 가능한 NoSQL 데이터베이스입니다.

준비:
시작하기 전에 Vue와 Firebase를 설치해야 합니다. Vue CLI는 다음 명령을 사용하여 설치할 수 있습니다.

npm install -g @vue/cli

그런 다음 새 Vue 프로젝트를 만들어야 합니다.

vue create news-app

다음으로 Firebase 콘솔에서 새 프로젝트를 만들고 Cloud Firestore 데이터베이스를 활성화해야 합니다.

Firebase Cloud Firestore 설정:
Firebase 콘솔에서 "새 Firestore 데이터베이스 만들기" 버튼을 클릭하고 "시작"을 선택합니다.

"데이터베이스 생성" 대화 상자에서 "테스트 모드에서 시작" 옵션을 선택하고 "다음"을 클릭하세요.

다음으로 데이터베이스 위치를 선택하고 "다음"을 클릭하세요.

마지막으로 "시작"을 클릭하세요.

콘솔에서 "설정" 버튼을 클릭하고 "프로젝트 설정"을 선택하세요.

"일반" 탭에서 "내 앱" 섹션까지 아래로 스크롤하고 "다음 항목 가져오기"에서 Vue.js를 선택하세요.

그런 다음 구성 파일의 내용을 Vue 프로젝트의 .env.local 파일에 복사하세요. .env.local文件中。

安装Firebase:
在Vue项目的根目录下，使用以下命令安装Firebase:

npm install firebase

然后，在src/main.js文件中导入Firebase和Firestore:

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

// 初始化FirebaseApp
firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
})

// 创建Firestore实例
const db = firebase.firestore()

// 导出Firestore实例
export default db

构建新闻通讯应用:
首先，我们需要创建一个用于显示新闻的组件News.vue，并在Vue项目的src/components目录下创建。

在News.vue中，我们将使用Vue的computed属性来从Firebase中获取最新的新闻数据，并使用Vue的v-for指令循环渲染每个新闻条目。

<template>
  <div>
    <h1>最新新闻</h1>
    <ul>
      <li v-for="news in latestNews" :key="news.id">
        <h2>{{ news.title }}</h2>
        <p>{{ news.content }}</p>
        <p>{{ news.date }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import db from '@/main'

export default {
  name: 'News',
  computed: {
    latestNews() {
      return db.collection('news')
        .orderBy('date', 'desc')
        .limit(10)
        .get()
        .then(querySnapshot => {
          const news = []
          querySnapshot.forEach(doc => {
            news.push({
              id: doc.id,
              ...doc.data()
            })
          })
          return news
        })
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

li {
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 10px;
}
</style>

然后，在Vue项目的根目录下的App.vue文件中使用News组件:

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

<script>
import News from '@/components/News'

export default {
  name: 'App',
  components: {
    News
  }
}
</script>

编译和运行:
我们只需使用以下命令在本地编译和运行Vue项目:

npm run serve

然后，打开浏览器并访问http://localhost:8080

Firebase 설치:

Vue 프로젝트의 루트 디렉터리에서 다음 명령을 사용하여 Firebase를 설치합니다.
rrreee

그런 다음 src/main.js 파일에서 Firebase와 Firestore를 가져옵니다.🎜rrreee 🎜뉴스 커뮤니케이션 애플리케이션 구축: 🎜먼저 뉴스를 표시하기 위한 News.vue 컴포넌트를 생성하고 Vue 프로젝트의 src/comComponents 디렉토리에 생성해야 합니다. 🎜🎜News.vue에서는 Vue의 computed 속성을 ​​사용하여 Firebase에서 최신 뉴스 데이터를 가져오고 Vue의 v-for를 사용합니다. 지시문은 각 뉴스 항목을 반복합니다. 🎜rrreee🎜그런 다음 Vue 프로젝트의 루트 디렉터리에 있는 <code>App.vue 파일의 News 구성 요소를 사용합니다. 🎜rrreee🎜컴파일 및 실행: 🎜우리는 다음을 사용합니다. 다음 명령을 사용하여 Vue 프로젝트를 로컬에서 컴파일하고 실행합니다. 🎜rrreee🎜 그런 다음 브라우저를 열고 http://localhost:8080를 방문하면 최신 뉴스를 보여주는 페이지가 표시됩니다. 🎜🎜요약:🎜이 문서에서는 Vue 및 Firebase Cloud Firestore를 사용하여 반응형 뉴스레터 앱을 구축하는 방법을 설명합니다. 추가 개발에는 뉴스를 추가하고 뉴스가 게시된 후 사용자에게 자동으로 알림을 푸시하는 기능이 포함될 수 있습니다. 이러한 기술을 배우고 익히면 보다 실용적이고 반응성이 뛰어난 웹 애플리케이션을 구축할 수 있습니다. 🎜

위 내용은 Vue 및 Firebase Cloud Firestore를 사용하여 반응형 뉴스레터 앱을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!