使用实体化框架时为空白页

问题描述 投票：1回答：1

上下文

我正在尝试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()   

});

我的问题：

当我导入实现框架时，在index.html文件（）中

我的页面变成空白。删除此导入时，将加载页面。当然，我已经下载了实现框架文件。当我放下这条线

非常感谢

javascript html firebase materialize
1个回答
2
投票

所以我仔细研究了您的代码。

什么都没显示出来的主要原因是因为您使用的是模态，并且它们没有初始化或打开。

以下是一些文档：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中还有其他错误的地方：

这里是一些入门：

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-add-data" class="modal">
            <div class="modal-content">
                <h4> Add data </h4>
                <br />
                <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>
            </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>Logout button</h4>
                <br />
                <form id="signout-user">
                    <button id="signout-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 address</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>

        <!--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

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

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();
});

// The sign up variables and constants
const signupForm = document.querySelector('#signup-user');
const loginForm = document.querySelector('#login-user');
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');
//const docRef = firestore.doc("samples/secondtest");

// Sign up function 
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 
// 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() {
      console.log("Status saved");
    }).catch( function (error) {  
        console.log("Got an eror", error);
    });
});

// Login function 
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
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();
});

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.