javascript - 使用物化框架时的空白页面-6ren

javascript - 使用物化框架时的空白页面

转载作者：行者123 更新时间：2023-11-30 10:57:55

语境

我正在试用 Firebase 平台的一些功能。我构建了一个非常简单的 html 页面，并尝试了不同的功能:注册、登录、注销……我有两个页面:index.html 和 auth.js:

index.html

<html>
<head>


<title> First test </title>
<!-- Load library: The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<!-- Load library: Add additional services you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-firestore.js"></script>
<!-- Load library: Authentification -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-auth.js"></script>

<script>

var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  var firestore = firebase.firestore();
  firestore.settings({ timestampsInSnapshots: true });
  const auth = firebase.auth();
</script>



<link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/> 
</head>

<body>
<!-- Add an element to the data storage -->

<div id ="modal-add-data" class='modal'>
  <div class='modal-content'>
    <h4> Add data </h4><br />
      <form id='add-data'>
        <div class = 'input-field'>
          <input type='data1' id="data1" />
          <label for='data1'> data1 </label>
        </div>
        <div class = 'input-field'>
          <input type='data2' id="data2" />
          <label for='data2'> data2 </label>
        </div>
            <button id='save-data' type='button'> Add</button>  
    </form>
  </div>
</div>



<!-- Authentificate a new user -->


<div id ="modal-signup", class='modal'>
  <div class='modal-content'>
    <h4> Sign Up </h4><br />
      <form id='signup-user'>
        <div class = 'input-field'>
          <input type='email' id="signup-email" />
          <label for='signup-email'> email adress </label>
        </div>
        <div class = 'input-field'>
          <input type='password' id="signup-password" />
          <label for='signup-password'> password </label>
        </div>
            <button id='signup-button' type='submit'>sign up</button>  
        </form>
  </div>
</div>

<!-- Sign out a user -->


<div id ="modal-signout", class='modal'>
  <div class='modal-content'>
    <h4> Log Out button </h4><br />
      <form id='signout-user'>
            <button id='signout-button' type='button'>sign out</button>  
        </form>
  </div>
</div>

<!-- Login a user -->


<div id ="modal-login", class='modal'>
  <div class='modal-content'>
    <h4> Login </h4><br />
      <form id='login-user'>
        <div class = 'input-field'>
          <input type='email' id="login-email" />
          <label for='login-email'> email adress </label>
        </div>
        <div class = 'input-field'>
          <input type='password' id="login-password" />
          <label for='login-password'> password </label>
        </div>
            <button id='login-button' type='submit'>login</button>  
        </form>
  </div>
</div>


<script  src='./auth.js' ></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>


<!-- <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-storage.js"></script> -->

auth.js

// Listen for auth status changes
auth.onAuthStateChanged(user => {
  if (user) {
    console.log("user logged in: ", user);

  } else {

    console.log("user logged out");

  }


})    


        // Sign up function 

const signupForm = document.querySelector('#signup-user');

signupForm.addEventListener("submit", (e) => {

  e.preventDefault(); // avoid the page to refresh when we click signup

  // get user info from the id of the input
  const email = signupForm['signup-email'].value;
  const password = signupForm['signup-password'].value;
  auth.createUserWithEmailAndPassword(email, password).then( cred => {

      console.log(cred);
      const modal = document.querySelector('#modal-signup');
      console.log(modal)
      M.Modal.getInstance(modal).close();
      signupForm.reset();
      // div id
    });

});

        // Add data function 

const save = document.querySelector('#add-data');
  const docRef = firestore.collection("samples").doc("user_");
  const eventToListen = document.querySelector('#save-data');
  //const docRef = firestore.doc("samples/secondtest");

// The sign up variables and constants


  // All the functions 

  // Add some data in firestroe

  eventToListen.addEventListener("click", function()  {
      const inp1 = save['data1'].value;
      const inp2 = save['data2'].value;

      docRef.set({   // https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=3
        lname: inp1,
        firstname: inp2,
        }).then(function() {

          console.log("Status saved");
        }).catch( function (error) {  

            console.log("Got an eror", error);

      });

  });


        // Login function 

const loginForm = document.querySelector('#login-user');


loginForm.addEventListener("submit", (e) => {

  e.preventDefault(); // avoid the page to refresh when we click signup

  // get user info from the id of the input
  const email = loginForm['login-email'].value;
  const password = loginForm['login-password'].value;
  auth.signInWithEmailAndPassword(email, password).then( cred => {

      console.log(cred.user)
      const modal = document.querySelector('#modal-login');
      M.Modal.getInstance(modal).close();
      loginForm.reset();
      // div id
    });

});



        // Logout function

const signoutForm = document.querySelector('#signout-button');

signoutForm.addEventListener("click", (e) => {

  e.preventDefault(); // avoid the page to refresh when we click signup
  // get user info from the id of the input
  auth.signOut()   

});

我的问题:

当我导入materialize框架时，在index.html文件中()

我的页面变成空白。当我删除这个导入时，页面就会加载。当然，我已经下载了materialize frameworks文件。当我放下这条线时

非常感谢

最佳答案

所以我仔细查看了您的代码。

什么都没有显示的主要原因是因为您正在使用模态框并且它们没有初始化也没有打开。

这是一些关于它的文档:https://materializecss.com/modals.html

您可以尝试添加以下 javascript:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, { dismissible: false });

    var modal = document.querySelector('#modal-signup');
    M.Modal.getInstance(modal).open();
});

您的 HTML 和 javascript 中还有其他错误:

没有输入类型 data1 和 data2(参见 https://www.w3schools.com/html/html_form_input_types.asp)
javascript 中缺少分号
HTML标签中有逗号，例如<div id ="modal-login", class='modal'>

这是一个验证工作的例子(我没有测试数据部分):

index.html

<html>
    <head>
        <title> First test </title>

        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <!-- Add an element to the data storage -->
        <div id="modal-logged" class="modal">
            <div class="modal-content">
                <h4> Add data </h4>
                <form id="add-data">
                    <div class="input-field">
                        <input type="text" id="data1" />
                        <label for="data1">data1</label>
                    </div>
                    <div class="input-field">
                        <input type="text" id="data2" />
                        <label for="data2">data2</label>
                    </div>
                    <button id="save-data">Add</button>  
                </form>

                <h4>Logout button</h4>
                <form id="signout-user">
                    <button id="signout-button" class="btn waves-effect waves-light" type="submit">sign out</button>  
                </form>
            </div>
        </div>
        <!-- Authentificate or register user -->
        <div id="modal-connect" class="modal">
            <div class="modal-content">
                <h4>Login / sign up</h4>
                <form id="login-form">
                    <div class="input-field">
                        <input type="email" id="login-email" />
                        <label for="login-email">email address</label>
                    </div>
                    <div class="input-field">
                        <input type="password" id="login-password" />
                        <label for="login-password">password</label>
                    </div>
                    <button id="login-button" class="btn waves-effect waves-light" type="submit">login</button>
                    <button id="signup-button" class="btn waves-effect waves-light" type="submit">sign up</button>
                </form>
            </div>
        </div>

        <!--JavaScript at end of body for optimized loading-->
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <!-- Load library: The core Firebase JS SDK is always required and must be listed first -->
        <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
        <!-- Load library: Add additional services you want to use -->
        <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-firestore.js"></script>
        <!-- Load library: Authentification -->
        <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-storage.js"></script>
        <script>
            // Your web app's Firebase configuration
            var firebaseConfig = {
                apiKey: "",
                authDomain: "",
                databaseURL: "",
                projectId: "",
                storageBucket: "",
                messagingSenderId: "",
                appId: "",
                measurementId: ""
            };
            // Initialize Firebase
            firebase.initializeApp(firebaseConfig);
            var firestore = firebase.firestore();
            firestore.settings({ timestampsInSnapshots: true });
            const auth = firebase.auth();
        </script>
        <script type="text/javascript" src="auth.js"></script>
    </body>
</html>

auth.js

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, { dismissible: false });

    // Listen for auth status changes
    auth.onAuthStateChanged(user => {
        if (user != undefined) {
            M.toast({html:"Logged in"});

            var modal = document.querySelector('#modal-connect');
            M.Modal.getInstance(modal).close();
            modal = document.querySelector('#modal-logged');
            M.Modal.getInstance(modal).open();
        } else {
            M.toast({html:"Logged out"});

            var modal = document.querySelector('#modal-logged');
            M.Modal.getInstance(modal).close();
            modal = document.querySelector('#modal-connect');
            M.Modal.getInstance(modal).open();
        }
    });

    // The sign up variables and constants
    const loginBtn = document.querySelector('#login-button');
    const signUpBtn = document.querySelector('#signup-button');
    const signoutForm = document.querySelector('#signout-button');
    const save = document.querySelector('#add-data');
    const docRef = firestore.collection("samples").doc("user_");
    const eventToListen = document.querySelector('#save-data');

    // Sign up function 
    signUpBtn.addEventListener("click", (e) => {
        e.preventDefault(); // avoid the page to refresh when we click signup

        // get user info from the id of the input
        const loginForm = document.querySelector('#login-form');
        const email = loginForm['login-email'].value;
        const password = loginForm['login-password'].value;
        auth.createUserWithEmailAndPassword(email, password).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            M.toast({html:error.message});
        }).then( cred => {
            loginForm.reset();
        });
    });

    // Add data function 
    // Add some data in firestore
    eventToListen.addEventListener("click", function()  {
        const inp1 = save['data1'].value;
        const inp2 = save['data2'].value;

        docRef.set({   // https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=3
            lname: inp1,
            firstname: inp2
        }).then(function() {
            M.toast({html:"Status saved"});
        }).catch( function (error) {
            M.toast({html:error.message});
        });
    });

    // Login function 
    loginBtn.addEventListener("click", (e) => {
        e.preventDefault(); // avoid the page to refresh when we click signup

        // get user info from the id of the input
        const loginForm = document.querySelector('#login-form');
        const email = loginForm['login-email'].value;
        const password = loginForm['login-password'].value;
        auth.signInWithEmailAndPassword(email, password).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            M.toast({html:error.message});
        }).then( cred => {
            loginForm.reset();
            // div id
        });
    });

    // Logout function
    signoutForm.addEventListener("click", (e) => {
        e.preventDefault(); // avoid the page to refresh when we click signup
        // get user info from the id of the input
        auth.signOut();
    });
});

关于javascript - 使用物化框架时的空白页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59253698/

文章推荐： javascript - Google Docs Apps 脚本 getBackgroundColor(Offset)

Oracle 物化 View
根据oracle文档，我们不能使用快速刷新方法来刷新聚合物化 View 。我在Oracle文档中找到了这个例子: http://docs.oracle.com/cd/B19306_01/server.
database - 物化 View 用例
我一直在学习物化 View 以及它们的用途/用途。但是我没有发现它有什么用处，因为它不包含当前数据，因为它需要时间来刷新/更新。还要查看现实生活中的场景，它用于 a.) 减轻网络负载和 b.) 根据
oracle - 物化 View 中的完全刷新和快速刷新有什么区别？
我在我自己的模式中有物化 View ，物化 View 源是另一个模式表，但是，这个主表有 900 行，我在这个主表上做了一些 dml 操作之后我将刷新这个物化 View ，正如你所知，我做了一些研
oracle - 物化 View 日志的事务性能影响
我一直在研究使用物化 View 为主要以事务为中心的公司(使用 Oracle 数据库)进行数据聚合和报告目的。当前的报告系统依赖于一系列 View ，这些 View 掩盖了应用程序的许多复杂数据逻辑。
Oracle - 物化 View 改变结构太慢
我有一个巨大的 materailized View ，我必须调整。这是一个简单的调整，因为我只是在 select 语句中添加了一个 NVL 函数。 IE。原来的... Select this,
oracle - 物化 View 的部分刷新
我们有一张 table TB_1它具有按月和周列划分的月度和周数据。我们也有物化 View MV_1继承自表TB_1 . 我们希望每周或每月刷新实体化 View 。不确定我们如何从物化日志中捕获的所
Cassandra 物化 View 影响
想知道 mv 对基表的影响。它会减慢基表的速度吗？它什么时候开始写入 mv，就像同时写入基表和 mv 一样？如果我有 local_quorum 的 CL 且 RF=3，客户端是否必须等到写入 mv
sql - 物化 View 强制和完整
物化 View 中强制刷新和完全刷新有什么区别 CREATE MATERIALIZED VIEW MV1 REFRESH FORCE ON DEMAND AS SELECT * FROM T1; CR
oracle - 物化 View - 识别上次刷新
我目前访问了一系列 View 和具体化 View 。物化由第三方维护，该第三方几乎不提供有关物化频率和成功的信息。最近，物化 View 无法刷新，我已经发送了许多报告，其中包含不正确/延迟的数据。目
oracle - 物化 View 和同名表之间有什么关系？
我有一个 Oracle DB，其物化 View 是从另一个 Oracle DB 填充的，并使用 DBMS_REFRESH.REFRESH() 每 2 分钟刷新一次。我刚刚注意到我有一个同名的表。此
Oracle:物化 View 快速刷新是原子的吗？
在过去的几个小时里，我已经阅读了很多有关在 Oracle 中刷新 MV 的内容，但我仍然找不到问题的答案。想象一下，我在带有更改日志的表顶部有一个 MV View 。那么这个MV中有3条记录: COL
sql - 物化 View 强制和完整
物化 View 中强制刷新和完全刷新有什么区别 CREATE MATERIALIZED VIEW MV1 REFRESH FORCE ON DEMAND AS SELECT * FROM T1; CR
oracle - 物化 View 可以用作快速非名词化大表吗？
Oracle物化 View 可以用来连接多个具有外键的相关表来创建一个更大的非规范化大表并立即刷新吗？关于一些investigations ，它说使用快速刷新时不允许连接。我可以使用 Oracle
Oracle - 物化 View 或表
到目前为止，我有一个表(在 Oracle 12c 中)有 2200 万条记录，加上每天插入 10,000 条记录。我们需要基于此表的计数，例如: select col1, col2, count(*)
sql - 物化 View 支持大查询或任何类似功能
我希望在任何特定表发生任何更改时触发特定查询并更新表。示例:表“A”更新了一些记录。现在，我想获取一些指定的列，并根据查询将表“A”中的一些记录插入到表“B”中。基本上，每当表“A”发生任何类型的更改
sql - 物化 View 中的动态计算
我有一个问题，我创建了一个完美工作的物化 View 。但是现在我需要对我 View 中的数据进行一些计算。该 View 包含在不同项目中工作的员工的工作时间。每个项目都有固定的时间 (time_ava
带主键的 Oracle 物化 View
我在下面创建了 Oracle 物化 View : CREATE MATERIALIZED VIEW MyMV REFRESH COMPLETE ON DEMAND AS SELECT t1.* F
oracle - 物化 View 中的域索引返回零行
我在使用 Oracle DB 时遇到问题 - 在物化 View 上通过 CONTAINS() 搜索后，域索引返回零行。我看到物化 View 充满了数据，我还使用过程 ctx_ddl.sync_inde
postgresql - 物化 View 未按预期工作？
我有一个简单的查询: select * from tags where tags.taggable_type = 'Skill'; 大致需要: Seq Scan on tags (cost=0.00
sql - 物化 View ——我们为什么需要它？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用物化框架时的空白页面