javascript - 使用 Firebase 时将 HTML、JavaScript 和 CSS 分开-6ren

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

转载作者：行者123 更新时间：2023-11-28 15:10:34

我写了一些 HTML 代码，我想托管这个包含 JavaScript 和 CSS 的 HTML 页面。主要问题是我想为 JavaScript 和 CSS 创建单独的文件。我知道它在本地主机上是如何工作的，但由于我使用的是 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>

最佳答案

Firebase 对此并没有什么特别之处。您只需创建三个单独的文件:index.html、main.js 和 style.css，然后将它们链接在一起。

style.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;
}

接下来我们从 HMTL 中取出 JavaScript 并将其放入 main.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.
    });
}

最后只剩下 index.html，我们在其中为 style.css 和 main.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 Hosting)。

关于javascript - 使用 Firebase 时将 HTML、JavaScript 和 CSS 分开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48526505/

文章推荐： ios - Firebase 在 swift 中检索 autoId 值

文章推荐： javascript - 在 Ajax 调用中调用辅助方法

文章推荐： javascript - 如何使用 event.target 访问特定子项及其文本？

ios - 与 ","分开？
我像那样遍历数组。 NSArray *array = [[currentRaum raumattribute] allObjects]; NSString *compositeString =
python - 查找重复的字符(分开)
我想找到所有引用这种模式的子字符串:一些字符+一些字符+第一个字符。现在我在 Python 2.7 中有了这个: T = "i was here" m = re.findall(r"([a-z])[a
r - 使用不同长度的向量与 tidyr 分开
我想使用与 tidyr 分开将一列字符串(例如 [1, 58, 10] )分成几列。我的问题是有时列较短(永远不会更长)。我在同一个数据框中有很多列有这个问题。加载包 require(tidyr)
qt - 将数据处理与 GUI 分开
我正在开发一个具有图形用户界面的网络测试工具。我现在面临的问题是，我无法将基础数据与 GUI 类分开。该应用程序由一个 QMainWindow 组成，它随后生成多个其他 QDialogs 并具有一些
unix - 将策略与机制 : What does it mean? 分开
我经常听到“策略与机制分离”的口头禅，尤其是在 Unix 哲学的背景下。这是什么意思，有哪些具体的例子？什么时候/为什么是/不是一件好事？最佳答案它基本上是将需求或业务功能与技术实现分离。机制是技
cocoa - 将文件名与文件扩展名 Cocoa 分开？
我正在使用 writeToFile:atomically: 方法将一些加密数据写入文本文件。问题是，需要保存的文件必须是用户加密的文件，并带有我选择的扩展名。这是我到目前为止所拥有的: [encryp
rust - 试图把 rust 分开
我有这串 abcdef x y z 或这个 "ab cd ef" x y z 我正试图将其解析为 s1 = "abcdef" arr = ["x","y","z"] 或者 s1 = "ab cd e
javascript - 我是否需要将每个页面的 javascript 分开？
这个问题已经有答案了: One big javascript file or multiple smaller files? [duplicate] (7 个回答) 已关闭 6 年前。我有 4 种类
angularjs - 将模型与 Controller 分开
我有这样的事情 - function DetailCtrl($scope) { $scope.persons = [{ id: 1, name: "Mark"
javascript - 使用应用程序脚本在谷歌电子表格中拆分(分开)合并表格单元格
在操作(复制/移动)包含合并单元格的范围时，我总是收到错误消息“您的粘贴与合并单元格重叠。请取消合并单元格，然后重试”。但是，当尝试使用 Range#breakApart 取消合并范围内的单元格时，我
ios - 据说通过编辑副本将被污染的 NSArray 分开
我有一个包含一些 TextFields 的 TableView。所述 TextFields 的值链接到二维数组(NSMutableArrays 的 NSArray)中的某些位置。一个初始的干净数组定
css - 如何将标签文本分别与 div 分开？
我定义了一个标签，其中一半需要在左侧，另一半文本需要在右侧。我怎样才能解决这个问题，让另一半拉对？我添加了 margin-right 以使文本向右拉，但它与其他 div 不一致。
javascript - 创建正则表达式以将每个单词与分开。 (点)
我正在尝试创建一个正则表达式来将 JavaScript 中的每个单词与 .(点)分开。 function myFunction() { var url = "in.k1.k2.k3.k4.com"
html - 正文和背景部分使用 CSS 分开
如何使用 CSS 将网站的正文/内容区域与背景分开。为了向您展示我的意思，请看附图。因此，两侧的背景将扩展到拥有超大显示器的人，但内容将始终保持相同大小。谢谢，阿马尔 http://i.imgur.
html - 两张背景图片对 Angular 分开
有可能用 CSS 将两个背景图像对 Angular 分开吗？我知道如何只用一张图片制作它，但我不能用两张图片制作它。这是一个例子: |-------------| | /|
html - 如何将连接在一起的两个多列 `
` 分开？
这是一个JSFiddle我创建了展示代码的外观。我将如何给予这些它们之间是否存在间隙，没有一个元素低于另一个元素？ .main-content { width: 50%; float: le
python - 如何将周一至周五与周六和周日 Pandas 分开？
我正在处理具有这样数据的项目(我使用带有 python 的 pandas 框架): days rain 0 1 2 0 3 1 1
c - 将不同类型的参数与 va_list 分开
我正在尝试编写一个宏来获取信息并将该信息发送到另一个函数，方法是将原始 va_list 拆分为字符串，然后从原始 va_list 生成另一个 va_list。下面是我的代码。调用宏 /* Usag
c# - 将键值与 LinQ 分开
我需要来自 SharedToDomains 和 SharedFromDomains 的键和值数据。我想打印这些值。 var LogResponse = DeserializeFromJson(sLog
ios - 我如何将我的网络代码与我的 ViewController 分开
我现在正在使用 Alamofire 来发出发布请求。我首先在 ViewController 中构建它并开始工作。但后来我试图通过在另一个 class 中构建它来分离它。我使用 singleton 并且

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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