代码之家 › 专栏 › 技术社区 › Prateek

使用Firebase时,将HTML、JavaScript和CSS分开

firebase-hosting firebase css html javascript

Prateek · 技术社区 · 7 年前

我写了一些HTML代码,我想托管这个包含JavaScript和CSS的HTML页面。主要问题是我想为JavaScript和CSS创建单独的文件。我知道它在localhost中是如何工作的,但由于我使用的是Firebase,我不知道如何继续。

P、 S:我之前有HTML、CSS和JavaScript方面的知识,但对Firebase几乎一无所知。

代码:

<!DOCTYPE html>
<html>
<head>
  <title>noname</title>
  <!--<link rel="stylesheet" type="text/css"href="C:\first\public\noname.css">-->
  <style type="text/css">
    input{
        resize: none;
        border-radius: 5px;
        size: 50px;
        height: 100%;
    }

    #main{
        text-align: center;
        padding: 20px;
        border: 5px solid;
        width: 50%;
        background-color: #c2e5ef;
        background-clip: border-box;

    }

    .button{
        color: #fff;
        background-color: #3fb2bf;
        margin: 10px 2px;
        border: none;
        font-size: 20px;
        width: 100px;
        height: 50px;
        border-radius: 15px
    }

    #login-div{
        text-align: center;
    }

    #logout-div{
        text-align: center;
    }
  </style>
</head>
<body>
 <div id="main">    
   <div id="login-div">
     <label><b style="font-size: 20px;">Username:<input type="text" name="username" id="username" placeholder="Enter Username"><br>
     </label>
     <br>

     <label>Password:<input type="text" name="password" id="password" placeholder="Enter Password"></label><br>

     <input type="button" name="login" value="Login" class="button" onclick="login()">
     </div>

     <div id="logout-div">
     <p>you are logged in</p>
     <input type="button" name="logout" value="Logout" class="button"  onclick="logout()">
    </div>

    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>

    <script type="text/javascript">
        var config = {
            apiKey: "AIzaSyDf4ndBB-CXJwaYVLXXQacFmX3O9eZbUZk",
            authDomain: "first-b14b2.firebaseapp.com",
            databaseURL: "https://first-b14b2.firebaseio.com",
            projectId: "first-b14b2",
            storageBucket: "first-b14b2.appspot.com",
            messagingSenderId: "103220354303"
        };
        firebase.initializeApp(config);

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            // User is signed in.
            document.getElementById("login-div").style.display="none";
            document.getElementById("logout-div").style.display="block";
          } else {
            // No user is signed in.
            document.getElementById("login-div").style.display="block";
            document.getElementById("logout-div").style.display="none";
          }
        });

        function login(){
            var email=document.getElementById("username").value;
            var pass=document.getElementById("password").value;

            firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
                // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;

                window.alert("error");
                // ...
            });
        }

        function logout(){
            firebase.auth().signOut().then(function() {
                // Sign-out successful.
            }).catch(function(error) {
                // An error happened.
            });
        }
     </script>
  </div>    
 </body>
</html>

1 回复 | 直到 7 年前

Frank van Puffelen 7 年前

关于这一点,Firebase并没有什么特别的。您只需创建三个单独的文件: index.html , main.js 和 style.css ,然后将它们链接在一起。

这个 风格css 是最简单的,所以让我们从这个开始:

input{
    resize: none;
    border-radius: 5px;
    size: 50px;
    height: 100%;
}

#main{
    text-align: center;
    padding: 20px;
    border: 5px solid;
    width: 50%;
    background-color: #c2e5ef;
    background-clip: border-box;

}

.button{
    color: #fff;
    background-color: #3fb2bf;
    margin: 10px 2px;
    border: none;
    font-size: 20px;
    width: 100px;
    height: 50px;
    border-radius: 15px
}

#login-div{
    text-align: center;
}

#logout-div{
    text-align: center;
}

接下来,我们将JavaScript从HMTL中取出,并将其放入 主要的js公司 :

var config = {
    apiKey: "AIzaSyDf4ndBB-CXJwaYVLXXQacFmX3O9eZbUZk",
    authDomain: "first-b14b2.firebaseapp.com",
    databaseURL: "https://first-b14b2.firebaseio.com",
    projectId: "first-b14b2",
    storageBucket: "first-b14b2.appspot.com",
    messagingSenderId: "103220354303"
};
firebase.initializeApp(config);

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    document.getElementById("login-div").style.display="none";
    document.getElementById("logout-div").style.display="block";
  } else {
    // No user is signed in.
    document.getElementById("login-div").style.display="block";
    document.getElementById("logout-div").style.display="none";
  }
});

function login(){
    var email=document.getElementById("username").value;
    var pass=document.getElementById("password").value;

    firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;

        window.alert("error");
        // ...
    });
}

function logout(){
    firebase.auth().signOut().then(function() {
        // Sign-out successful.
    }).catch(function(error) {
        // An error happened.
    });
}

最后,我们只剩下 指数html ,其中我们为 风格css 和 主要的js公司 :

<!DOCTYPE html>
<html>
<head>
  <title>noname</title>
  <link rel="stylesheet" type="text/css"href="style.css">
</head>
<body>
 <div id="main">    
   <div id="login-div">
     <label><b style="font-size: 20px;">Username:<input type="text" name="username" id="username" placeholder="Enter Username"><br>
     </label>
     <br>

     <label>Password:<input type="text" name="password" id="password" placeholder="Enter Password"></label><br>

     <input type="button" name="login" value="Login" class="button" onclick="login()">
     </div>

     <div id="logout-div">
     <p>you are logged in</p>
     <input type="button" name="logout" value="Logout" class="button"  onclick="logout()">
    </div>

    <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>

    <script src="main.js"></script>
  </div>    
 </body>
</html>

您会注意到导入只使用文件名,而不是完整路径。这样做所谓的相对导入允许导入在本地和部署站点时工作。
不要在浏览器中从磁盘打开文件,因为当您开始添加更高级的代码时,这必然会导致各种问题。改为运行 firebase serve 从命令提示符本地提供文件(和 firebase deploy 将其部署到Firebase主机)。