vue 项目级别工程搭建—Firebase搭建todoList（五）

最新推荐文章于 2025-07-08 01:00:17 发布

原创最新推荐文章于 2025-07-08 01:00:17 发布 · 855 阅读

1 ·

CC 4.0 BY-SA版权

独学而无友，则孤陋寡闻。q群582951247

vue 专栏收录该内容

106 篇文章

订阅专栏

本文介绍了Firebase服务，包括登入授权、数据库、存储等项目。详细说明了创建项目、配置登录、数据库设置等步骤，还给出了关键代码示例，如初始化设置、更新数据等。此外，提及了授权设定相关知识，并指导创建demo。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要翻墙。不会的可以在这里学习学习翻墙教程

什麼是 Firebase

https://firebase.google.com/

Firebase 服務項目

介紹文：https://blog.gcp.expert/firebase-gcp/?gclid=Cj0KCQjwnazLBRDxARIsAECdautTaqLa8yGBaWu2lcFoCrLJGnShncVBCx5_PIknpPG4eYqO_f1x0_EaAh_ZEALw_wcB

Authentication: 登入授權
Database: RealTime Data Base
Storage: 儲存
Hosting: 線上靜態網頁
Function

上面是一个简单的介绍

下面我们要开始啦

创建项目

從範例頁面中尋找可以使用的範例，從範例中學習會是個好方法

官方範例：https://github.com/firebase/quickstart-js

下载下来并运行到webstrom上

firebase配置登录

修改H:\dev\firebase\quickstart-js-master\database\index.html文件

翻阅到最下面可以看到

我们称这一段代码叫代码1

<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="/__/firebase/5.8.6/firebase-app.js"></script>
<script src="/__/firebase/5.8.6/firebase-auth.js"></script>
<script src="/__/firebase/5.8.6/firebase-database.js"></script>
<script src="/__/firebase/init.js"></script>

<script src="scripts/main.js"></script>

让我们看这个地址

https://firebase.google.com/docs/web/setup

访问后往下翻一点可以看到我们图中代码为代码2

代码2 替换后代码1上面部分后。成了最终这样子

<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="https://www.gstatic.com/firebasejs/5.7.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

<script src="scripts/main.js"></script>

我们可以看到有些参数。。我们去找这些参数

<PROJECT_ID>和<BUCKET>和<DATABASE_NAME>都替换成项目id

(为什么他们是一样的你可以在firebase中的Database 和storage中查看)

上图的网络API 秘钥就对应了js中的API_KEY

 messagingSenderId: "<SENDER_ID>",

这句没有用到可以删除掉

然后运行demo就可以登录了

登录成功以后

在Authentication就可以看到登录信息

我们忘了新建数据库重新删除这条登录信息配置好数据库再次登录就可以看到数据库信息啦

也就是Database

我们在demo的地方发送一次请求

效果如下

就可以在数据库中看到变化数据库可以导出json 然后格式化看格式

http://www.bejson.com/

我就不贴格式了有隐私信息

我们看数据库这里有一个规则

现在是任何人可读可写

也可以控制到登录用户可读可写

修改为

{
  "rules": {
    // ".read": true,
    // ".write": true
        ".read": "auth!=null",
    ".write": "auth!=null"
  }
}

右侧还有备份和用量备份是收费的用量就是查看使用信息的

下面是一些相关api

範例關鍵程式碼說明：

初始化 Firebase 設定，並且建立連線这一段代码我们称为代码3 记住这个有一个代码3哦

var config = {

  apiKey: "<API_KEY>",

  authDomain: "<PROJECT_ID>.firebaseapp.com",

  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",

  storageBucket: "<BUCKET>.appspot.com",

  messagingSenderId: "<SENDER_ID>",

};

firebase.initializeApp(config);

與特定資料夾產生關聯

var ref = firebase.database().ref('/posts/' + postId)

更新資料

ref.set({

  // do something

});

新增資料

ref.push({

  // do something

});

一次性取得資料

ref.once('value').then(function(snapshot) {

  var val = snapshot.val();

  // do something

});

Socket 取得資料 (每次資料更新都會觸發

ref.on('value', function(snapshot) {

  var val = snapshot.val();

  // do something

});

Remove 資料

ref.child(key).remove()

Firebase 授權設定

這段是比較難的部分，這邊只介紹認證與非認證

{

  "rules": { // 全域規則

    ".read": "auth != null", // 需要通過認證才可以存取資料庫

    ".write": "auth != null"

  }

}

学了相关知识后我们可以创建一个demo，先手动去firebase清空数据库内容

就在这个目录下好了

H:\dev\firebase\quickstart-js-master\index.html

内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="" id="input">
<button type="button" id="btn">送出</button>

<ul id="m_ul"></ul>
<script src="https://www.gstatic.com/firebasejs/5.7.1/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
     

   //此处替换掉 代码3
  var msgRef = firebase.database().ref('/messages/');

  $(document).ready(function () {
    $('#btn').on('click', function () {
      var msg = $('#input').val();

      console.log(msg);
      //推送资料
      msgRef.push({
        message: msg
      });

    });

    /*    //取出资料 就取一次
        msgRef.once('value').then(function (snapshot) {
          var val = snapshot.val();
          let list = '';
          $.each(val, function (i,item) {
            list = `${list}<li>${item.message}</li>`;
          });
          console.log(list)
          $('#m_ul').html(list);
        });*/


    //取出资料 监听数据变化
    msgRef.on('value', function (snapshot) {
      var val = snapshot.val();
      let list = '';
      $.each(val, function (i, item) {
        list = `${list}<li>${item.message}-<button class="remove" type="button" data-key="${i}">删除</button></li>
`;
      });
      console.log(list);
      $('#m_ul').html(list);
    });
    //为什么这么写。。因为元素是加载完毕之后添加上的直接取取不出来
    $('#m_ul').on('click', '.remove', function () {
      console.log('remove', $(this).data('key'));
      msgRef.child($(this).data('key')).remove()
    });

  });
</script>
</body>
</html>

on和once就分别是http请求和socket请求