Javascript 无法将数据推送到Firebase数据库
我决定使用谷歌友好的Pix演示应用程序，因为我非常喜欢它的布局，我只是想我可以修改.js和.html文件。我花了一整晚的时间尝试不同的代码，但我无法得到正确推送数据的方法，我设置了一个简单的表单来测试我的功能。（在日记账下） 友好的Pix应用程序： index.html：Javascript 无法将数据推送到Firebase数据库,javascript,firebase,firebase-realtime-database,Javascript,Firebase,Firebase Realtime Database,我决定使用谷歌友好的Pix演示应用程序，因为我非常喜欢它的布局，我只是想我可以修改.js和.html文件。我花了一整晚的时间尝试不同的代码，但我无法得到正确推送数据的方法，我设置了一个简单的表单来测试我的功能。（在日记账下） 友好的Pix应用程序： index.html： <!doctype html> <!-- Copyright 2015 Google Inc. All rights reserved. Licensed under the Apache Licen
<!doctype html>
<!--
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Share your pics. Powered by Firebase.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friendly Pix</title>
<link rel="shortcut icon" href="/images/favicon.png">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Web Application Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Add to home screen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Friendly Pix">
<meta name="theme-color" content="#303F9F">
<link rel="icon" sizes="192x192" href="/images/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="/images/touch/touch-icon-128x128.png">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="/images/touch/touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" href="/images/touch/touch-icon-180x180.png">
<meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
<!-- Tile icon for Win8 -->
<meta name="msapplication-TileImage" content="/images/touch/touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<meta name="msapplication-navbutton-color" content="#303F9F">
<!-- Material Design Lite -->
<link rel="stylesheet" href="/libs/material-design-lite/material.min.css">
<script defer src="/libs/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Firebase UI Auth -->
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" />
<!-- Styling -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,300">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amaranth:700">
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<!-- Theatre mode viewer -->
<div class="fp-theatre"><img class="fp-fullpic"></div>
<!-- Splash screen -->
<section id="page-splash">
<h3 class="fp-logo"><i class="material-icons">photo</i> Friendly Pix</h3>
<div class="fp-caption">The friendliest way to share your pics</div>
<div class="fp-signed-out-only fp-initially-hidden">
<div id="firebaseui-auth-container" class="fp-signed-out-only fp-initially-hidden"></div>
<a class="fp-skip" href="/feed">skip sign in</a>
</div>
</section>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Header section containing logo and menu -->
<header class="fp-header mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
<div class="mdl-layout__header-row fp-titlebar">
<!-- Logo -->
<h3 class="fp-logo"><a href="/feed"><i class="material-icons">photo</i> Friendly Pix</a></h3>
<div class="mdl-layout-spacer"></div>
<!-- Search bar -->
<div class="fp-searchcontainer mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchQuery">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="searchQuery">
<label class="mdl-textfield__label" for="searchQuery">Enter your query...</label>
</div>
<div id="fp-searchResults" class="mdl-card mdl-shadow--2dp"></div>
</div>
<!-- Signed-in User Info -->
<div class="mdl-cell--hide-phone">
<a href="/"><button class="fp-sign-in-button fp-signed-out-only mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button></a>
<div class="fp-signed-in-user-container mdl-cell--hide-phone fp-signed-in-only">
<a class="fp-usernamelink mdl-button mdl-js-button">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
</div>
<!-- Drop Down Menu -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-cell--hide-phone" id="fp-menu">
<i class="material-icons">more_vert</i>
</button>
<ul class="fp-menu-list mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="fp-menu">
<a href="/about">
<li class="mdl-menu__item"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</li>
</a>
<li class="fp-sign-out mdl-menu__item fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign out</li>
</ul>
</div>
<!-- Navigation Bar -->
<div class="fp-tab mdl-layout__header-row mdl-cell--hide-phone mdl-color--light-blue-600">
<div class="mdl-tab">
<a href="/" id="fp-menu-home" class="mdl-layout__tab fp-signed-in-only is-active mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">home</i> Home</a>
<a href="/feed" id="fp-menu-feed" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">trending_up</i> Feed</a>
<a href="/journal" id="journal" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">trending_up</i> Journal</a>
<input id="fp-mediacapture" type="file" accept="image/*;capture=camera">
<button class="fp-signed-in-only mdl-button mdl-js-button mdl-button--fab mdl-cell--hide-tablet mdl-color--amber-400 mdl-shadow--4dp mdl-js-ripple-effect" id="add">
<i class="material-icons">file_upload</i>
</button>
</div>
</div>
<button class="fp-signed-in-only mdl-cell--hide-desktop mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-color--amber-400 mdl-shadow--4dp" id="add-floating">
<i class="material-icons">photo_camera</i>
</button>
</header>
<!-- Drawer menu -->
<div class="mdl-cell--hide-desktop mdl-cell--hide-tablet mdl-layout__drawer">
<a href="/" class="fp-signed-out-only"><button class="fp-sign-in-button mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">account_circle</i> Sign in</button></a>
<div class="fp-signed-in-user-container mdl-color--light-blue-700 fp-signed-in-only">
<a class="fp-usernamelink">
<div class="fp-avatar"></div>
<div class="fp-username mdl-color-text--white"></div>
</a>
</div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link is-active fp-signed-in-only" href="/"><i class="material-icons">home</i> Home</a>
<a class="mdl-navigation__link" href="/feed"><i class="material-icons">trending_up</i> Feed</a>
<hr />
<a class="mdl-navigation__link" href="/about"><i class="material-icons">perm_contact_calendar</i> About - Help - Contact</a>
<hr class="fp-signed-in-only"/>
<a class="fp-sign-out mdl-navigation__link fp-signed-in-only"><i class="material-icons">exit_to_app</i> Sign Out</a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<!-- Show a feed of posts -->
<section id="page-feed" class="mdl-grid fp-content" style="display: none;">
<div class="fp-new-posts-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Show new posts...
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts fp-help mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet
mdl-cell--8-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts!</p>
<p>
Use the <strong><i class="material-icons">search</i> search bar</strong> to find people you know and have
a look at the <a href="/feed"><i class="material-icons">trending_up</i> feed</a> to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i> like and comment their posts!</p>
</div>
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Show a single post with comments -->
<section id="page-post" class="mdl-grid fp-content" style="display: none;">
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid"></div>
</section>
<!-- Journal page -->
<!-- Journal page -->
<!-- Journal page -->
<section id="page-journal" class="mdl-grid fp-content" style="display: none;">
<form id="uploadJournal" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="testInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Test message...</label>
</div>
<br />
<button type="submit" class="fp-journal mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this text!
</button>
</form>
</section>
<!-- About & Contact page -->
<section id="page-about" class="mdl-grid fp-content" style="display: none;">
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">info</i>
<div>
<p>THIS IS BULL <a href="https://firebase.google.com">Firebase Platform</a>.</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">help</i>
<div>
<p>Start following people to see their posts in your <a href="/"><i class="material-icons">home</i>home</a>!</p>
<p>
Use the <strong><i class="material-icons">search</i>search bar</strong> to find people you know and have
a look at the <a href="/feed"><i class="material-icons">trending_up</i>feed</a> to discover interesting people.
</p>
<p>Then <i class="material-icons">favorite</i>like and comment their posts!</p>
<p>
Share your pics with your friends using the <i class="material-icons">file_upload</i>or <i class="material-icons">photo_camera</i>buttons.
</p>
</div>
</div>
</div>
<div class="fp-help mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<i class="fp-info material-icons">contacts</i>
<div>
<p>Feel free to file issues on our <a href="https://github.com/firebase/friendlypix">GitHub repo</a>.</p>
</div>
</div>
</div>
</section>
<!-- User Profile page -->
<section id="page-user-info" class="mdl-grid fp-content" style="display: none;">
<div class="fp-user-container mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<div class="fp-user-avatar"></div>
<div class="fp-name-follow-container mdl-cell mdl-cell--5-col">
<div class="fp-user-username"></div>
<div class="fp-signed-in-only">
<label class="fp-follow mdl-switch mdl-js-switch mdl-js-ripple-effect" for="follow">
<input type="checkbox" id="follow" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Follow</span>
</label>
<label class="fp-notifications mdl-switch mdl-js-switch mdl-js-ripple-effect" for="notifications">
<input type="checkbox" id="notifications" class="mdl-switch__input" value="true">
<span class="mdl-switch__label">Enable Notifications</span>
</label>
</div>
<div class="fp-user-detail-container">
<div class="fp-user-detail"><span class="fp-user-nbposts">0</span> posts</div>
<div class="fp-user-detail"><span class="fp-user-nbfollowers">0</span> followers</div>
<div class="fp-user-detail fp-user-nbfollowing-container"><span class="fp-user-nbfollowing">0</span> following</div>
</div>
</div>
</div>
<div class="fp-user-following mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col">
<button class="fp-close-following mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_less</i>
</button>
</div>
<div class="fp-image-container mdl-cell mdl-cell--12-col mdl-grid">
<div class="fp-no-posts mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop mdl-grid mdl-grid--no-spacing">
<div class="mdl-card mdl-shadow--2dp mdl-cell
mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
No posts yet.
</div>
</div>
</div>
<div class="fp-next-page-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--fab">
<i class="material-icons">expand_more</i>
</button>
</div>
</section>
<!-- Post new pic page -->
<section id="page-add" class="mdl-grid fp-content" style="display: none;">
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="fp-addcontainer mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
<div class="fp-overlay">
<i class="material-icons">hourglass_full</i>
</div>
<img id="newPictureContainer" src="">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<form id="uploadPicForm" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="imageCaptionInput">
<label class="mdl-textfield__label" for="imageCaptionInput">Image caption...</label>
</div>
<br />
<button type="submit" class="fp-upload mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400">
Upload this pic!
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Toast -->
<div aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div>
<button type="button" class="mdl-snackbar__action"></button>
</div>
</main>
</div>
<!-- Page.js -->
<script src="/libs/page/page.js"></script>
<!-- jQuery -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- Latinize -->
<script src="/libs/latinize/latinize.js"></script>
<!-- SweetAlert -->
<script src="/libs/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/libs/sweetalert/dist/sweetalert.css">
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey:
authDomain:
databaseURL:
storageBucket:
messagingSenderId:
};
firebase.initializeApp(config);
</script>
<!-- Firebase UI for Auth -->
<script src="https://www.gstatic.com/firebasejs/ui/live/1.0/firebase-ui-auth.js"></script>
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
'signInFlow': 'popup',
'signInOptions': [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
]
};
var firebaseUi = new firebaseui.auth.AuthUI(firebase.auth());
</script>
<!-- Friendly Pix ES5 scripts
<script src="/scripts-es5/utils.js"></script>
<script src="/scripts-es5/firebase.js"></script>
<script src="/scripts-es5/auth.js"></script>
<script src="/scripts-es5/search.js"></script>
<script src="/scripts-es5/uploader.js"></script>
<script src="/scripts-es5/messaging.js"></script>
<script src="/scripts-es5/userpage.js"></script>
<script src="/scripts-es5/post.js"></script>
<script src="/scripts-es5/feed.js"></script>
<script src="/scripts-es5/routing.js"></script> -->
<!-- Friendly Pix ES2015 scripts -->
<script src="/scripts/utils.js"></script>
<script src="/scripts/firebase.js"></script>
<script src="/scripts/auth.js"></script>
<script src="/scripts/search.js"></script>
<script src="/scripts/uploader.js"></script>
<script src="/scripts/messaging.js"></script>
<script src="/scripts/userpage.js"></script>
<script src="/scripts/post.js"></script>
<script src="/scripts/feed.js"></script>
<script src="/scripts/routing.js"></script>
<script src="/scripts/journal.js"></script>
</body>
</html>
我为这些巨大的代码块道歉，希望有人能帮忙！我已经尝试了在谷歌上找到的所有方法。你有什么错误？您是否已将规则配置为反映数据库所需的正确安全性？默认规则要求您进行身份验证，这可能不是您想要的。您可以创建一个（请阅读链接文档，它非常有用）来代替为庞大的代码块道歉。虽然我理解这要求你做更多的工作，但拥有这样一个MCVE会让你更容易得到帮助。@FrankvanPuffelen令人沮丧的是，我没有得到任何错误。我正在使用命令行“npm运行构建”，并将其部署到firebase进行测试。我很乐意重现这个问题，但我没有收到任何错误，有没有办法用不同的方式部署我的应用程序以获取日志？@riggaroo请参见上面的评论：）
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
window.friendlyPix = window.friendlyPix || {};
/**
* Handles uploads of new pics.
*/
friendlyPix.Journal = class {
/**
* Inititializes the pics Journal/post creator.
* @constructor
*/
constructor() {
// Firebase SDK
this.database = firebase.database();
this.auth = firebase.auth();
this.storage = firebase.storage();
this.addPolyfills();
$(document).ready(() => {
// DOM Elements
this.addButton = $('#journal');
//this.addButtonFloating = $('#add-floating');
this.uploadButton = $('.fp-journal');
this.testInput = $('#testInput');
this.uploadJournal = $('#uploadJournal');
this.toast = $('.mdl-js-snackbar');
// Event bindings
//this.addButton.click(() => this.initiatePictureCapture());
// this.addButtonFloating.click(() => this.initiatePictureCapture());
//this.imageInput.change(e => this.readPicture(e));
this.uploadJournal.submit(e => this.uploadPic(e));
this.testInput.keyup(() => this.uploadButton.prop('disabled', !this.testInput.val()));
});
}
// Adds polyfills required for the Journal. REQUIRED FOR FUNCTION TO POST FOR SOME REASON
addPolyfills() {
// Polyfill for canvas.toBlob().
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function(callback, type, quality) {
var binStr = atob(this.toDataURL(type, quality).split(',')[1]);
var len = binStr.length;
var arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}
}
/**
* Uploads the pic to Firebase Storage and add a new post into the Firebase Database.
*/
uploadPic(e) {
e.preventDefault();
alert("I am an alert boxxxxxxx!");
var myRootRef = new Firebase('https://xxx.firebaseio.com/');
var collectionRef = myRootRef.child('collection');
var pushRef = collectionRef.push();
pushRef.set('item1');
var imageCaption = this.testInput.val();
//alert(imageCaption);
}
/**
* Clear the uploader.
*/
clear() {
this.currentFile = null;
// Cancel all Firebase listeners.
friendlyPix.firebase.cancelAllSubscriptions();
// Clear previously displayed pic.
this.newPictureContainer.attr('src', '');
// Clear the text field.
friendlyPix.MaterialUtils.clearTextField(this.testInput[0]);
// Make sure UI is not disabled.
this.disableUploadUi(false);
}
};
friendlyPix.journal = new friendlyPix.Journal();
uploadPic(e) {
e.preventDefault();
var messagesRef = new Firebase('xxx.firebaseio.com/');
var imageCaption = this.testInput.val();
//alert("I am an alert boxxxxxxx!");
//alert(imageCaption);
// Save data to firebase
messagesRef.push({fieldName:'testInput', text:imageCaption});
messageField.value = '';
}