添加用户后如何修复Firebase DB列获取随机数？

Question

当我通过 js 添加新用户时，它会在Admins列下方生成一个随机数，如下所示。 我需要像这些表一样解决这个问题。 它必须是username的值。 如果你们中有人知道如何根据我的需要修复此代码，请告诉我：) 谢谢

这是 HTML、JS 和 JSON 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase CRUD Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <h1>Firebase CRUD with Javascript
        <br/><small><em>User App</em></small>
    </h1>


    <!-- add user module -->
    <section id="add-user-module" >
        <button id="open-add-user-form-btn">+</button>
        <form>
            <h2>Add User</h2>
            name:<br>
            <input type='text' data-key='name' class='user-input'><br>
           username:<br>
            <input type='text' data-key='username' class='user-input'><br>
            password:<br>
            <input type='text' data-key='password' class='user-input'><br>
            <button type='button' id="add-user-btn">add user</button>
        </form>
    </section>

    <!-- edit user module -->
    <section id="edit-user-module">
        <form>
            <h2>Edit user</h2>
            <input type="hidden" class="edit-userid">
            name:<br>
            <input type='text' data-key='name' class='edit-user-input'><br>
            username:<br>
            <input type='text' data-key='username' class='edit-user-input'><br>
            password:<br>
            <input type='text' data-key='password' class='edit-user-input'><br>
            <button type='button' id="edit-user-btn">save</button>
        </form>
    </section>


    <!-- show user module -->
    <ul id="user-list"></ul>
    <div id="user-detail"></div>


     <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-analytics.js"></script>
 <script src="https://www.gstatic.com/firebasejs/7.10.0/firebase-database.js"></script>
    <script type="text/javascript" src="app.js"></script>

  </body>

</html>


// !IMPORTANT: REPLACE WITH YOUR OWN CONFIG OBJECT BELOW


// Initialize Firebase
var firebaseConfig = {
  apiKey: "",
  authDomain: "test-a137f.firebaseapp.com",
  databaseURL: "https://test-a137f.firebaseio.com",
  projectId: "test-a137f",
  storageBucket: "test-a137f.appspot.com",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

firebase.initializeApp(firebaseConfig);
  firebase.analytics();

// Firebase Database Reference and the child
const dbRef = firebase.database().ref();
const usersRef = dbRef.child('Admins');


    readUserData(); 


// --------------------------
// READ
// --------------------------
function readUserData() {

    const userListUI = document.getElementById("user-list");

    usersRef.on("value", snap => {

        userListUI.innerHTML = ""

        snap.forEach(childSnap => {

            let key = childSnap.key,
                value = childSnap.val()

            let $li = document.createElement("li");

            // edit icon
            let editIconUI = document.createElement("span");
            editIconUI.class = "edit-user";
            editIconUI.innerHTML = " ✎";
            editIconUI.setAttribute("userid", key);
            editIconUI.addEventListener("click", editButtonClicked)

            // delete icon
            let deleteIconUI = document.createElement("span");
            deleteIconUI.class = "delete-user";
            deleteIconUI.innerHTML = " ☓";
            deleteIconUI.setAttribute("userid", key);
            deleteIconUI.addEventListener("click", deleteButtonClicked)

            $li.innerHTML = value.name;
            $li.append(editIconUI);
            $li.append(deleteIconUI);

            $li.setAttribute("user-key", key);
            $li.addEventListener("click", userClicked)
            userListUI.append($li);

        });


    })

}



function userClicked(e) {


        var userID = e.target.getAttribute("user-key");

        const userRef = dbRef.child('Admins/' + userID);
        const userDetailUI = document.getElementById("user-detail");

        userRef.on("value", snap => {

            userDetailUI.innerHTML = ""

            snap.forEach(childSnap => {
                var $p = document.createElement("p");
                $p.innerHTML = childSnap.key  + " - " +  childSnap.val();
                userDetailUI.append($p);
            })

        });


}





// --------------------------
// ADD
// --------------------------

const addUserBtnUI = document.getElementById("add-user-btn");
addUserBtnUI.addEventListener("click", addUserBtnClicked)



function addUserBtnClicked() {

    const usersRef = dbRef.child('Admins');

    const addUserInputsUI = document.getElementsByClassName("user-input");

    // this object will hold the new user information
    let newUser = {};

    // loop through View to get the data for the model 
    for (let i = 0, len = addUserInputsUI.length; i < len; i++) {

        let key = addUserInputsUI[i].getAttribute('data-key');
        let value = addUserInputsUI[i].value;
        newUser[key] = value;
    }

    usersRef.push(newUser)


   console.log(myPro)



}


// --------------------------
// DELETE
// --------------------------
function deleteButtonClicked(e) {

        e.stopPropagation();

        var userID = e.target.getAttribute("userid");

        const userRef = dbRef.child('Admins/' + userID);

        userRef.remove();

}


// --------------------------
// EDIT
// --------------------------
function editButtonClicked(e) {

    document.getElementById('edit-user-module').style.display = "block";

    //set user id to the hidden input field
    document.querySelector(".edit-userid").value = e.target.getAttribute("userid");

    const userRef = dbRef.child('Admins/' + e.target.getAttribute("userid"));

    // set data to the user field
    const editUserInputsUI = document.querySelectorAll(".edit-user-input");


    userRef.on("value", snap => {

        for(var i = 0, len = editUserInputsUI.length; i < len; i++) {

            var key = editUserInputsUI[i].getAttribute("data-key");
                    editUserInputsUI[i].value = snap.val()[key];
        }

    });




    const saveBtn = document.querySelector("#edit-user-btn");
    saveBtn.addEventListener("click", saveUserBtnClicked)
}


function saveUserBtnClicked(e) {

    const userID = document.querySelector(".edit-userid").value;
    const userRef = dbRef.child('Admins/' + userID);

    var editedUserObject = {}

    const editUserInputsUI = document.querySelectorAll(".edit-user-input");

    editUserInputsUI.forEach(function(textField) {
        let key = textField.getAttribute("data-key");
        let value = textField.value;
        editedUserObject[textField.getAttribute("data-key")] = textField.value
    });



    userRef.update(editedUserObject);

    document.getElementById('edit-user-module').style.display = "none";


}



{
  "Admins": [
    {
      "name": "Kuruppu",
      "username": 117,
      "password": "kuruppu123"
    },
    {
      "name": "Sandeepa",
      "username": 118,
      "password": "sandeepa123"
    },
    {
      "name": "Lakshan",
      "username": 119,
      "password": "lakshan123"
    }

  ]

}

Answer 1

您应该在addUserBtnClicked函数中使用“set”而不是“push”。

像那样：

function addUserBtnClicked() {

    const usersRef = dbRef.child('Admins');

    const addUserInputsUI = document.getElementsByClassName("user-input");

    // this object will hold the new user information
    let newUser = {};

    // loop through View to get the data for the model 
    for (let i = 0, len = addUserInputsUI.length; i < len; i++) {

        let key = addUserInputsUI[i].getAttribute('data-key');
        let value = addUserInputsUI[i].value;
        newUser[key] = value;
    }

    usersRef.child(userID).set(newUser) //enter the userID here
}

添加用户后如何修复Firebase DB列获取随机数？

问题描述

1 个解决方案

解决方案1
0 2020-03-10 08:26:06

添加用户后如何修复Firebase DB列获取随机数？

问题描述

1 个解决方案

解决方案1 0 2020-03-10 08:26:06

解决方案1
0 2020-03-10 08:26:06