Cara membuat apl surat berita berkualiti dengan Vue dan Firebase Cloud Firestore

Cara membuat aplikasi surat berita berkualiti tinggi menggunakan Vue dan Firebase Cloud Firestore

Aplikasi surat berita memainkan peranan penting dalam masyarakat moden dan boleh membantu pengguna mendapatkan maklumat terkini tentang berita dan acara tepat pada masanya. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue dan Firebase Cloud Firestore untuk membuat aplikasi surat berita berkualiti tinggi dan memberikan contoh kod khusus.

1. Persediaan
Sebelum kita mula, kita perlu memasang beberapa alatan dan perpustakaan yang diperlukan. Mula-mula, pastikan anda memasang Node.js dan npm. Kemudian, gunakan arahan berikut pada baris arahan untuk memasang Vue CLI (scaffolding):

npm install -g @vue/cli

Seterusnya, buat projek Vue baharu:

vue create newsletter-app

Masukkan direktori projek:

cd newsletter-app

Pasang dependencies Firebase:

npm install firebase

2. Buat Instance Firebase dan Initialization
Buat projek baharu dalam konsol Firebase dan dayakan pangkalan data Cloud Firestore. Kemudian, dapatkan maklumat konfigurasi projek anda daripada konsol.

Buat folder baharu firebase dalam direktori src projek Vue dan buat fail baharu index.js di dalamnya. Kemudian, salin kod berikut ke dalam index.js: src目录下创建一个新文件夹firebase，并在其中创建一个新文件index.js。然后，将下面的代码复制到index.js中：

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

const firebaseConfig = {
  // 将你的Firebase配置信息替换成实际的值
  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()

记得将YOUR_API_KEY等替换为你的实际配置值。

三、创建Vue组件
我们将创建两个Vue组件：一个显示新闻列表，一个用于添加新闻。

在src/components目录下创建一个新文件NewsList.vue，并将以下代码复制到文件中：

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

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    const newsRef = this.$firebase.firestore().collection('news')
    newsRef.onSnapshot((snapshot) => {
      const newsList = []
      snapshot.forEach((doc) => {
        newsList.push({...doc.data(), id: doc.id})
      })
      this.newsList = newsList
    })
  }
}
</script>

在同一个目录下创建一个新文件AddNews.vue，并将以下代码复制到文件中：

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

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    addNews() {
      const newsRef = this.$firebase.firestore().collection('news')
      newsRef.add({ title: this.title, content: this.content })
      this.title = ''
      this.content = ''
    }
  }
}
</script>

四、配置路由
打开src/router/index.js文件，并将以下代码插入到路由定义中：

import NewsList from '@/components/NewsList.vue'
import AddNews from '@/components/AddNews.vue'

const routes = [
  {
    path: '/',
    name: 'NewsList',
    component: NewsList
  },
  {
    path: '/add',
    name: 'AddNews',
    component: AddNews
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

五、集成Firebase和Vue
打开src/main.js文件，并将以下代码插入到文件中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { db } from './firebase'

Vue.prototype.$firebase = db

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

六、创建App.vue组件
打开src/App.vue文件，并将以下代码替换文件中的内容：

<template>
  <div id="app">
    <router-view></router-view>
    <router-link to="/add">添加新闻</router-link>
  </div>
</template>

<script>
export default {
  
}
</script>

七、运行应用
现在，我们已经完成了所有必要的代码和配置。在命令行中输入以下命令启动应用：

npm run serve

打开浏览器，访问http://localhost:8080rrreee

Ingat untuk menggantikan YOUR_API_KEY dsb. dengan nilai konfigurasi sebenar anda.

3 Cipta komponen Vue

Kami akan mencipta dua komponen Vue: satu untuk memaparkan senarai berita dan satu untuk menambah berita. 🎜🎜Buat fail baharu NewsList.vue dalam direktori src/components dan salin kod berikut ke dalam fail: 🎜rrreee🎜Buat fail baharu dalam direktori yang sama Fail AddNews.vue dan salin kod berikut ke dalam fail: 🎜rrreee🎜 IV Konfigurasikan penghalaan 🎜Buka fail src/router/index.js dan salin kod berikut Masukkan. ke dalam definisi laluan: 🎜rrreee🎜 5. Integrasikan Firebase dan Vue 🎜 Buka fail src/main.js dan masukkan kod berikut ke dalam fail: 🎜rrreee🎜 6. Cipta komponen App.vue 🎜Buka fail src/App.vue dan gantikan kandungan dalam fail dengan kod berikut: 🎜rrreee🎜7 Jalankan aplikasi🎜Sekarang, kami telah melengkapkan semua kod dan konfigurasi yang diperlukan. Masukkan arahan berikut pada baris arahan untuk memulakan aplikasi: 🎜rrreee🎜Buka penyemak imbas dan lawati http://localhost:8080 untuk melihat antara muka aplikasi surat berita. Anda boleh menguji aplikasi dengan menambahkan berita. 🎜🎜Ringkasan🎜Artikel ini menerangkan cara membuat apl surat berita berkualiti menggunakan Vue dan Firebase Cloud Firestore. Dengan konfigurasi mudah dan beberapa baris kod, kami boleh melaksanakan senarai berita dan menambah fungsi berita dengan mudah. Saya harap artikel ini berguna kepada anda, dan saya harap anda selamat berkembang! 🎜

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