Cara membina apl surat berita responsif dengan Vue dan Firebase Cloud Firestore

Cara membina aplikasi surat berita responsif menggunakan Vue dan Firebase Cloud Firestore

Kata Pengantar:
Dengan perkembangan pesat Internet , Maklumat berita tersebar dengan lebih pantas dan pantas. Sebagai orang moden, kami sentiasa ingin mengetahui semua jenis berita semasa secepat mungkin. Jadi, dalam siaran ini, saya akan membincangkan cara membina apl surat berita responsif menggunakan Vue dan Firebase Cloud Firestore.

Apakah itu Vue dan Firebase Cloud Firestore:
Vue ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna Ia menggunakan model pembangunan berkomponen untuk membantu kami membina interaksi dengan lebih mudah menggayakan aplikasi web.

Firebase ialah platform perkhidmatan awan yang disediakan oleh Google Cloud Firestore ialah pangkalan data NoSQL yang fleksibel dan boleh skala yang direka untuk membantu kami membina bahagian belakang aplikasi kami.

Persediaan:
Sebelum kita mula, kita perlu memasang Vue dan Firebase. Vue CLI boleh dipasang menggunakan arahan berikut:

npm install -g @vue/cli

Kemudian, kita perlu mencipta projek Vue baharu:

vue create news-app

Seterusnya, kita perlu mencipta yang baharu dalam projek konsol Firebase dan dayakan pangkalan data Cloud Firestore.

Sediakan Firebase Cloud Firestore:
Dalam konsol Firebase, klik butang "Buat pangkalan data Firestore baharu" dan pilih "Mula".

Dalam kotak dialog "Buat Pangkalan Data", pilih pilihan "Mula dalam mod ujian" dan klik "Seterusnya".

Seterusnya, pilih lokasi pangkalan data dan klik "Seterusnya".

Akhir sekali, klik "Mula".

Dalam konsol, klik butang "Tetapan" dan pilih "Tetapan Projek".

Dalam tab "Umum", tatal ke bawah ke bahagian "Aplikasi Anda" dan pilih "Import yang berikut", pilih Vue.js.

Kemudian, salin kandungan fail konfigurasi ke dalam fail .env.local projek Vue anda. .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

Pasang Firebase:

Dalam direktori akar projek Vue, gunakan arahan berikut untuk memasang Firebase:
rrreee

Kemudian, dalam src/main .js: #🎜🎜#rrreee#🎜🎜# Bina aplikasi surat berita: #🎜🎜# Pertama, kita perlu mencipta komponen untuk memaparkan berita <code>News.vue , dan dibuat dalam direktori <code>src/components projek Vue. #🎜🎜##🎜🎜#Dalam News.vue, kami akan menggunakan sifat computed Vue untuk mendapatkan data berita terkini daripada Firebase dan menggunakan Vue's v -untuk gelung arahan melalui setiap item berita. #🎜🎜#rrreee#🎜🎜#Kemudian, gunakan komponen Berita dalam fail App.vue dalam direktori akar projek Vue: #🎜🎜#rreee# 🎜🎜 #Kompilasi dan jalankan:#🎜🎜#Kami hanya perlu menyusun dan menjalankan projek Vue secara setempat menggunakan arahan berikut:#🎜🎜#rrreee#🎜🎜#Kemudian, buka penyemak imbas dan lawati http:// localhost:8080, anda akan melihat halaman yang menunjukkan berita terkini. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜#Artikel ini menerangkan cara membina aplikasi surat berita responsif menggunakan Vue dan Firebase Cloud Firestore. Pembangunan selanjutnya boleh termasuk keupayaan untuk menambah berita dan menolak pemberitahuan secara automatik kepada pengguna selepas berita diterbitkan. Dengan mempelajari dan menguasai teknologi ini, kami boleh membina aplikasi web yang lebih praktikal dan responsif. #🎜🎜#

Atas ialah kandungan terperinci Cara membina apl surat berita responsif dengan Vue dan Firebase Cloud Firestore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!