使用 HTML CSS 和 JavaScript 创建一个将数据存储在 Firebase 中的网站

以下是将我们的静态网页与Firebase 连接的一些简单步骤。

分步实施：

第 1 步：首先，我们将创建 Firebase 上的一个项目，用于连接我们的静态网页。访问 Firebase 页面以配置您的项目。访问网站并单击 On Add Project按钮，如下所示。

第 2 步：为您的项目命名，然后单击“继续”按钮。

第 3 步：现在单击“继续”按钮。

第 4 步：现在为 Firebase选择默认帐户，然后单击“创建项目”按钮。

第 5 步：现在您的项目已创建，您可以开始了。

第 6 步：现在单击第三个图标，即Web按钮() 。

第 7 步：为您的 Web 项目指定一个昵称，然后单击“注册应用程序”按钮。

第 8 步：现在您将看到您的应用程序的配置如下。将此代码复制到某个地方，因为我们稍后会用到它。

步骤 9：单击实时数据库，如下所示。

第 10 步：现在单击“创建数据库”按钮。

第 11 步：现在单击“测试模式” ，然后单击“启用”按钮。

第 12 步：激活 Firebase 存储。单击左侧的存储按钮，然后单击入门。

• 之后会弹出这个框。单击下一步。

  

• 然后点击完成。

  

项目设置：

现在创建 一个HTML文件并复制您在步骤 8 中复制的脚本代码。以下文件只是一个示例，供您了解如何配置您的项目。

HTML

  

    
    Colleting Data
    
    
  
    

  

      
    
        Hey There,Help Us In Collecting Data
    
      
    
        
            
                
                    
                        Enter Your Name
                    
                      
                    
                
  
                
                    
                        Email address
                    
                      
                    
                
            
            
                Submit
            
        
    
  
    
    
      
    
        var firebaseConfig = {
            apiKey: "Use Your Api Key Here",
            authDomain: "Use Your authDomain Here",
            databaseURL: "Use Your databaseURL Here",
            projectId: "Use Your projectId Here",
            storageBucket: "Use Your storageBucket Here",
            messagingSenderId: "Use Your messagingSenderId Here",
            appId: "Use Your appId Here"
        };
  
        firebase.initializeApp(firebaseConfig);
  
        var messagesRef = firebase.database()
            .ref('Collected Data');
          
        document.getElementById('contactForm')
            .addEventListener('submit', submitForm);
  
        function submitForm(e) {
            e.preventDefault();
  
            // Get values
            var name = getInputVal('name');
            var email = getInputVal('email');
  
            saveMessage(name, email);
            document.getElementById('contactForm').reset();
        }
  
        // Function to get get form values
        function getInputVal(id) {
            return document.getElementById(id).value;
        }
  
        // Save message to firebase
        function saveMessage(name, email) {
            var newMessageRef = messagesRef.push();
            newMessageRef.set({
                name: name,
                email: email,
            });
        }
    

  

输出：

在给定的表格中输入姓名和电子邮件地址的一些示例值，如下所示。

单击提交按钮后，数据将存储在实时数据库中，如下所示。