在 Vue.js 中使用 Firebase-JavaScript中文网-JavaScript教程资源分享门户

Firebase 是一种移动端和 Web 应用程序的后端解决方案，它提供了云存储、实时数据库、认证等功能，使开发人员可以轻松地构建高效的应用程序。Vue.js 是一个流行的 JavaScript 框架，它为开发人员提供了构建灵活和交互式的用户界面的工具。在本文中，我们将介绍如何在 Vue.js 中使用 Firebase。

准备工作

在开始使用 Firebase 之前，我们需要创建一个 Firebase 帐户，并启用 Firebase 服务。您可以按照官方文档的指导进行注册和设置。在注册成功并启用 Firebase 服务后，您将获得一个应用程序密钥和其他凭据。

安装 Firebase SDK

Firebase SDK 包括多个可用于不同功能的 JavaScript 库。您可以选择按需安装所需的库或安装完整的 Firebase SDK。为了在 Vue.js 中使用 Firebase，我们将安装完整的 Firebase SDK。

使用 npm 包管理器安装 Firebase：

npm install --save firebase

创建 Firebase 配置

在开始使用 Firebase 之前，我们需要配置 Firebase 实例。为此，我们将创建一个名为 firebase.js 的新文件，其中将保留 Firebase 初始化代码和配置。

// javascriptcn.com 代码示例
import firebase from 'firebase'

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

firebase.initializeApp(firebaseConfig)

export default firebase

在这里，我们将导入 Firebase 库并为其传递 firebaseConfig 配置对象，其中包括您的 Firebase 项目的凭据。

实现 Firebase 功能

现在，我们已经准备好开始实现 Firebase 功能，并将其集成到 Vue.js 应用程序中。Firebase SDK 提供了多种功能，这里我们将介绍其中的实时数据库、云存储和身份验证。

实时数据库

实时数据库是一种提供了实时数据同步的 JSON 数据库。在 Vue.js 应用程序中，我们可以使用 Firebase 的实时数据库来存储和检索数据。要使用 Firebase 实时数据库，我们需要创建一个新的实时数据库实例。

const db = firebase.database()

有了数据库实例，我们可以使用 Firebase 实时数据库的所有功能。例如，创建新记录、更新现有记录或检索数据列表。

// javascriptcn.com 代码示例
// 创建新的记录
db.ref('users').push({
  name: 'John Doe',
  email: 'johndoe@example.com'
})

// 更新现有记录
db.ref('users/' + userId).update({
  name: 'Jane Smith'
})

// 检索数据列表
db.ref('users').on('value', snapshot => {
  snapshot.forEach(user => {
    console.log(user.val())
  })
})

在上面的示例中，我们向 users 节点添加新记录，更新现有记录，并从 users 节点检索用户列表。使用 on 方法，我们可以在每次发生更改时监听数据的变化。

云存储

云存储是一种提供了无限存储空间的云储存服务。您可以使用 Firebase 云存储将文件上传和下载到您的应用程序。要使用 Firebase 云存储，我们需要创建一个新的存储实例。

const storage = firebase.storage()

有了存储实例，我们可以使用 Firebase 云存储的所有功能。例如，上传文件、下载文件或删除文件。

// javascriptcn.com 代码示例
// 上传文件
const imageRef = storage.ref().child('images/example.jpg')
const file = document.getElementById('fileInput').files[0]
imageRef.put(file)

// 下载文件
const downloadUrl = storage.ref('images/example.jpg').getDownloadURL()

// 删除文件
storage.ref('images/example.jpg').delete()

在示例中，我们将文件上传到名为 images 的存储桶中。使用 child 方法，我们指定要上传的文件名。然后，我们使用 put 方法将文件上传到存储桶中。使用 getDownloadURL 方法，我们可以获取上传文件的链接。使用 delete 方法，我们可以从存储桶中删除文件。

身份验证

身份验证是一种提供了用户身份验证的服务。Firebase 身份验证允许您使用电子邮件、Google、Facebook、Twitter 和 GitHub 进行用户身份验证。要使用 Firebase 身份验证，我们需要创建一个新的身份验证实例。

const auth = firebase.auth()

有了身份验证实例，我们可以使用 Firebase 身份验证的所有功能。例如，创建新用户、登录现有用户或监视当前用户的身份验证状态。

// javascriptcn.com 代码示例
// 注册新用户
auth.createUserWithEmailAndPassword(email, password)

// 用户登录
auth.signInWithEmailAndPassword(email, password)

// 监视用户身份验证状态的更改
auth.onAuthStateChanged(user => {
  if (user) {
    console.log('User is logged in')
  } else {
    console.log('User is logged out')
  }
})

在上面的示例中，我们创建新用户和登录现有用户。然后，我们使用 onAuthStateChanged 方法在每次身份验证状态更改时监听用户身份验证状态。

示例应用程序

以下是一个使用 Firebase 实现实时聊天应用程序的示例。该应用程序使用 Firebase 实时数据库和身份验证功能，允许用户创建账户并与其他注册用户实时聊天。在该应用程序中，用户可以查看聊天历史记录、发送消息并查看其他用户的在线状态。

// javascriptcn.com 代码示例
<template>
  <div class="app">
    <div class="room">
      <div class="messages">
        <div v-for="message in messages" :key="message.key">
          <div class="username">{{ message.username }}</div>
          <div class="text">{{ message.text }}</div>
        </div>
      </div>
      <form @submit.prevent="sendMessage">
        <input type="text" v-model="messageInput" placeholder="Type a message...">
        <button type="submit">Send</button>
      </form>
    </div>
    <div v-if="!user">
      <form @submit.prevent="login">
        <input type="email" v-model="email" placeholder="Email">
        <input type="password" v-model="password" placeholder="Password">
        <button type="submit">Login</button>
      </form>
    </div>
    <div v-if="user">
      <div class="user-info">
        <div>{{ user.email }}</div>
        <button @click="logout">Logout</button>
      </div>
      <div v-for="otherUser in otherUsers" :key="otherUser.key" class="other-user">
        <div>{{ otherUser.email }}</div>
        <div v-if="otherUser.online">Online</div>
        <div v-else>Last seen {{ formatDate(otherUser.lastSeen) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from '@/firebase'

export default {
  name: 'App',
  data() {
    return {
      user: null,
      email: '',
      password: '',
      messages: [],
      messageInput: '',
      otherUsers: []
    }
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.user = user
        this.getOtherUsers()
        this.getMessages()
        this.setOnline()
      } else {
        this.user = null
      }
    })
  },
  methods: {
    login() {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password)
        .catch(error => {
          console.log(error)
        })
    },
    logout() {
      this.setOffline()
      firebase.auth().signOut()
    },
    sendMessage() {
      firebase.database().ref('messages').push({
        username: this.user.email,
        text: this.messageInput
      })
      this.messageInput = ''
    },
    getMessages() {
      firebase.database().ref('messages').on('value', snapshot => {
        this.messages = []
        snapshot.forEach(message => {
          this.messages.push({
            key: message.key,
            username: message.val().username,
            text: message.val().text
          })
        })
      })
    },
    getOtherUsers() {
      firebase.database().ref('users').on('value', snapshot => {
        const currentUserKey = firebase.auth().currentUser.uid
        this.otherUsers = []
        snapshot.forEach(user => {
          if (user.key !== currentUserKey) {
            const lastSeen = user.val().lastSeen
            this.otherUsers.push({
              key: user.key,
              email: user.val().email,
              online: Date.now() - lastSeen < 60000,
              lastSeen: lastSeen
            })
          }
        })
      })
    },
    setOnline() {
      const currentUserRef = firebase.database().ref('users/' + firebase.auth().currentUser.uid)
      currentUserRef.update({
        online: true,
        lastSeen: Date.now()
      })
      currentUserRef.onDisconnect().update({
        online: false,
        lastSeen: Date.now()
      })
    },
    setOffline() {
      const currentUserRef = firebase.database().ref('users/' + firebase.auth().currentUser.uid)
      currentUserRef.update({
        online: false,
        lastSeen: Date.now()
      })
    },
    formatDate(timestamp) {
      const date = new Date(timestamp)
      return date.toDateString() + ' at ' + date.toLocaleTimeString()
    }
  }
}
</script>

在示例应用程序中，我们将用户的身份验证状态存储在 user 属性中。如果用户未登录，则显示登录表单。如果用户已登录，则显示聊天室、其他用户和聊天历史记录。

在 created 钩子函数中，我们使用身份验证状态更改事件来更新当前用户的身份验证状态。如果用户已登录，则获取其他用户列表、聊天历史记录和当前用户的在线状态。

在登录方法中，我们获取电子邮件和密码，使用 Firebase 身份验证进行身份验证。

在 logout 方法中，我们使用 Firebase 身份验证退出用户会话。同时，我们使用在线状态更改事件将当前用户的在线状态更新为“离线”。

在 sendMessage 方法中，我们将聊天消息存储在名为 messages 的实时数据库节点中。每当该节点中添加或删除条目时，都将触发 on 方法，从而更新聊天消息的列表。

在 getOtherUsers 方法中，我们获取所有其他用户，并根据其上次在线时间确定当前在线状态。同时，我们使用在线状态更改事件监听用户的在线状态变化。

在 setOnline 方法中，我们将当前用户的在线状态设置为“在线”。使用 onDisconnect 方法，我们可以将用户的在线状态更新为“离线”，因为他们在离开时没有手动退出。

在 setOffline 方法中，我们将当前用户的在线状态更新为“离线”。

总结

在本教程中，我们介绍了如何在 Vue.js 应用程序中使用 Firebase 的实时数据库、云存储和身份验证功能。我们了解了如何创建 Firebase 实例、执行基本操作，并将 Firebase 功能与 Vue.js 应用程序集成。最后，我们展示了一个使用 Firebase 实现实时聊天应用程序的示例。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6549fc1b7d4982a6eb432dfa