Vue 기반 뉴스레터 애플리케이션 개발: Firebase Cloud Firestore를 사용한 실시간 데이터 동기화-View.js-php.cn

Vue 기반 뉴스레터 애플리케이션 개발: Firebase Cloud Firestore를 사용한 실시간 데이터 동기화

王林

풀어 주다： 2023-09-13 14:40:44

원래의

921명이 탐색했습니다.

基于Vue的时事通讯应用开发：利用Firebase Cloud Firestore实现实时数据同步

Vue 기반 뉴스레터 애플리케이션 개발: Firebase Cloud Firestore를 사용한 실시간 데이터 동기화에는 특정 코드 예제가 필요합니다.

소개:
인터넷의 급속한 발전으로 인해 사람들은 시사 문제에 점점 더 많은 관심과 요구를 갖고 있습니다. . 오늘날 많은 사람들은 언제 어디서나 최신 뉴스와 인기 주제를 접할 수 있기를 원합니다. 이러한 요구 사항을 충족하기 위해 Vue 기반 뉴스레터 애플리케이션을 개발하고 Firebase Cloud Firestore를 사용하여 실시간 데이터 동기화를 달성할 수 있습니다. 이 글에서는 Vue와 Firebase를 기반으로 한 개발 과정을 소개하고, 자세한 코드 예시를 제공합니다.

1. 준비:

Node.js 및 Vue CLI를 설치합니다.
새 Vue 프로젝트를 생성하고 이름을 "news-app"으로 지정한 후 프로젝트 디렉터리를 입력하세요.

2. Firebase 프로젝트 생성:

Firebase 공식 웹사이트(https://firebase.google.com/)에 접속하여 Google 계정으로 로그인합니다.
새 프로젝트를 만들려면 "시작하기"를 클릭하세요.
프로젝트 콘솔에서 "애플리케이션 추가"를 클릭하고 "웹"을 선택하세요.
"NewsApp" 등 앱 이름을 입력한 후 "앱 등록"을 클릭하세요.
아래 구성 코드에서 "firebaseConfig" 객체의 내용을 복사하세요.

3. Firebase 종속성을 설치합니다.

터미널을 열고 "news-app" 프로젝트 디렉터리를 입력합니다.
다음 명령을 실행하여 Firebase 관련 종속성을 설치합니다.
```
npm install firebase
```
로그인 후 복사
src 디렉터리에 새 폴더를 만들고 이름을 "firebase"로 지정합니다.
"firebase" 폴더에 새 파일을 만들고 이름을 "config.js"로 지정합니다.
"config.js" 파일에 이전에 복사한 "firebaseConfig" 개체를 붙여넣고 내보냅니다.
```
export default {
  // 粘贴firebaseConfig对象
}
```
로그인 후 복사

4. Firebase 초기화:

Firebase 및 "firebase/config" 파일 가져오기:

import firebase from 'firebase/app'
import 'firebase/firestore'
import firebaseConfig from './firebase/config'

로그인 후 복사

Firebase 초기화:
```
firebase.initializeApp(firebaseConfig)
```
로그인 후 복사
Firebase Firestore 인스턴스 만들기:
```
const db = firebase.firestore()
```
로그인 후 복사
앱 전체에서 액세스할 수 있도록 Vue 프로토타입에 Firestore 인스턴스 추가:
```
Vue.prototype.$db = db
```
로그인 후 복사

5 뉴스 목록 페이지 만들기:

"src/views" 디렉터리에 새 파일을 만들고 이름을 "NewsList.vue"로 지정합니다.

"NewsList.vue" 파일에 다음 템플릿 코드를 작성합니다.

<template>
  <div>
 <h1>时事新闻</h1>
 <ul>
   <li v-for="news in newsList" :key="news.id">
     {{ news.title }}
   </li>
 </ul>
  </div>
</template>

로그인 후 복사

"NewsList.vue" 파일에 다음 스크립트 코드를 작성합니다.

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

로그인 후 복사

6. 뉴스 추가 페이지를 생성합니다. :

"src/views" 디렉터리에 새 파일을 만들고 이름을 "AddNews.vue"로 지정합니다.

"AddNews.vue" 파일에 다음 템플릿 코드를 작성합니다.

<template>
  <div>
 <h1>添加新闻</h1>
 <form @submit.prevent="addNews">
   <label for="title">标题：</label>
   <input type="text" id="title" v-model="title" required>
   <button type="submit">提交</button>
 </form>
  </div>
</template>

로그인 후 복사

"AddNews.vue" 파일에 다음 스크립트 코드를 작성합니다.

<script>
export default {
  data() {
 return {
   title: ''
 }
  },
  methods: {
 addNews() {
   this.$db.collection('news').add({
     title: this.title,
     timestamp: new Date()
   })
   this.title = ''
 }
  }
}
</script>

로그인 후 복사

7. 라우팅 구성:

"src/router/index.js" 파일에서 "NewsList.vue" 및 "AddNews.vue"를 가져옵니다.
```
import NewsList from '@/views/NewsList.vue'
import AddNews from '@/views/AddNews.vue'
```
로그인 후 복사

"routes" 배열에서 두 개의 경로 객체를 만듭니다:

{
  path: '/',
  name: 'NewsList',
  component: NewsList
},
{
  path: '/add',
  name: 'AddNews',
  component: AddNews
}

로그인 후 복사

八. 홈페이지 구성 요소 만들기:

"src/views" 디렉터리에 새 파일을 만들고 이름을 "Home.vue"로 지정합니다.

"Home.vue" 파일에서 다음 템플릿 코드를 작성합니다.

<template>
  <div>
 <h1>时事通讯应用</h1>
 <router-link to="/">查看新闻</router-link>
 <router-link to="/add">添加新闻</router-link>
 <router-view></router-view>
  </div>
</template>

로그인 후 복사

9. 앱 구성 요소 업데이트:

"src/App.vue" 파일에서 초기 템플릿 코드를 바꿉니다. 다음 코드의 경우:
```
<template>
  <div id="app">
 <router-view></router-view>
  </div>
</template>
```
로그인 후 복사

10. 애플리케이션 실행:

터미널에서 다음 명령을 실행하여 애플리케이션을 시작합니다.
```
npm run serve
```
로그인 후 복사
브라우저를 열고 "http://localhost:8080"을 방문합니다. , 해당 애플리케이션의 홈페이지를 볼 수 있습니다.

결론:
이 기사의 샘플 코드를 통해 Vue 기반 뉴스레터 애플리케이션을 성공적으로 만들고 Firebase Cloud Firestore를 사용하여 실시간 데이터 동기화를 달성했습니다. 개발자는 사용자 인증, 댓글 기능 추가 등 자신의 필요와 아이디어에 따라 애플리케이션을 지속적으로 개선할 수 있습니다. 이 글이 Vue와 Firebase의 실제 적용에 도움이 되어 귀하의 애플리케이션이 사용자의 요구를 더 잘 충족할 수 있기를 바랍니다.

위 내용은 Vue 기반 뉴스레터 애플리케이션 개발: Firebase Cloud Firestore를 사용한 실시간 데이터 동기화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!