Firebase 기본: 캡처, 추가, 업데이트 및 삭제
8659 단어 Firebase
이것은 무엇입니까?
이것은 Firebase의 Authentication 방법을 사용하는 일련의 작업입니다.
참조 사이트
참고라기보다는 거의 복제품이다.
- YouTunbe: Getting Started with the Firebase Realtime Database on the Web, Part 2
실시
Firebase 데이터베이스
HTML 및 JavaScript
샘플에서 사용자 고유의 키 등은 다른 파일key.js에 기록되었다.따라서 이 코드에 포함되지 않았음을 주의하십시오.hoge.on('[event-name]', (snap) => {})에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.[event-name]에 변경된 값이 포함되어 있습니다.<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8" />
<title>Getting Started with the Firebase Realtime Database on the Web, Part 2</title>
</head>
<body>
<pre id="preObject"></pre>
<ul id="ulList"></ul>
<script src="./keys.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script type="text/javascript">
firebase.initializeApp(config);
let preObject = document.querySelector('#preObject');
let ulList = document.querySelector('#ulList');
let dbRefObject = firebase.database().ref().child('object');
let dbRefList = dbRefObject.child('hobbies');
// Sync object changes
dbRefObject.on('value', (snap) => {
preObject.innerText = JSON.stringify(snap.val(), null, 3);
});
// Sync list changes
dbRefList.on('child_added', (snap) => {
const li = document.createElement('li');
li.innerText = snap.val();
li.id = snap.key;
ulList.appendChild(li);
});
dbRefList.on('child_changed', (snap) => {
const liChanged = document.querySelector('#'+snap.key);
liChanged.innerText = snap.val();
});
dbRefList.on('child_removed', (snap) => {
const liToRemove = document.querySelector('#'+snap.key);
liToRemove.remove();
});
</script>
</body>
</html>
동작을 해볼게요.
여기와 같아서 나는 그것을 베어 사랑한다😅
총결산
이런 소감만 있으면 정말 간단하고 간단해...
Reference
이 문제에 관하여(Firebase 기본: 캡처, 추가, 업데이트 및 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ryoyakawai/items/817128c6de66822c5090
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
참고라기보다는 거의 복제품이다.
- YouTunbe: Getting Started with the Firebase Realtime Database on the Web, Part 2
실시
Firebase 데이터베이스
HTML 및 JavaScript
샘플에서 사용자 고유의 키 등은 다른 파일key.js에 기록되었다.따라서 이 코드에 포함되지 않았음을 주의하십시오.hoge.on('[event-name]', (snap) => {})에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.[event-name]에 변경된 값이 포함되어 있습니다.<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8" />
<title>Getting Started with the Firebase Realtime Database on the Web, Part 2</title>
</head>
<body>
<pre id="preObject"></pre>
<ul id="ulList"></ul>
<script src="./keys.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script type="text/javascript">
firebase.initializeApp(config);
let preObject = document.querySelector('#preObject');
let ulList = document.querySelector('#ulList');
let dbRefObject = firebase.database().ref().child('object');
let dbRefList = dbRefObject.child('hobbies');
// Sync object changes
dbRefObject.on('value', (snap) => {
preObject.innerText = JSON.stringify(snap.val(), null, 3);
});
// Sync list changes
dbRefList.on('child_added', (snap) => {
const li = document.createElement('li');
li.innerText = snap.val();
li.id = snap.key;
ulList.appendChild(li);
});
dbRefList.on('child_changed', (snap) => {
const liChanged = document.querySelector('#'+snap.key);
liChanged.innerText = snap.val();
});
dbRefList.on('child_removed', (snap) => {
const liToRemove = document.querySelector('#'+snap.key);
liToRemove.remove();
});
</script>
</body>
</html>
동작을 해볼게요.
여기와 같아서 나는 그것을 베어 사랑한다😅
총결산
이런 소감만 있으면 정말 간단하고 간단해...
Reference
이 문제에 관하여(Firebase 기본: 캡처, 추가, 업데이트 및 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ryoyakawai/items/817128c6de66822c5090
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8" />
<title>Getting Started with the Firebase Realtime Database on the Web, Part 2</title>
</head>
<body>
<pre id="preObject"></pre>
<ul id="ulList"></ul>
<script src="./keys.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script type="text/javascript">
firebase.initializeApp(config);
let preObject = document.querySelector('#preObject');
let ulList = document.querySelector('#ulList');
let dbRefObject = firebase.database().ref().child('object');
let dbRefList = dbRefObject.child('hobbies');
// Sync object changes
dbRefObject.on('value', (snap) => {
preObject.innerText = JSON.stringify(snap.val(), null, 3);
});
// Sync list changes
dbRefList.on('child_added', (snap) => {
const li = document.createElement('li');
li.innerText = snap.val();
li.id = snap.key;
ulList.appendChild(li);
});
dbRefList.on('child_changed', (snap) => {
const liChanged = document.querySelector('#'+snap.key);
liChanged.innerText = snap.val();
});
dbRefList.on('child_removed', (snap) => {
const liToRemove = document.querySelector('#'+snap.key);
liToRemove.remove();
});
</script>
</body>
</html>
여기와 같아서 나는 그것을 베어 사랑한다😅
총결산
이런 소감만 있으면 정말 간단하고 간단해...
Reference
이 문제에 관하여(Firebase 기본: 캡처, 추가, 업데이트 및 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ryoyakawai/items/817128c6de66822c5090
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Firebase 기본: 캡처, 추가, 업데이트 및 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryoyakawai/items/817128c6de66822c5090텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
