【发布时间】：2020-06-22 02:49:00
【问题描述】：
当我通过 js 添加新用户时，它会在 Admins 列下方生成一个随机数，例如 this。我需要像these tables 那样解决这个问题。它必须是用户名的值。如果你们中的任何人知道如何根据我的需要修复此代码，请让我知道伙计们:) 谢谢
这是 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"
}
]
}
【问题讨论】：
标签： javascript html json firebase firebase-realtime-database