728x90
[목표]
firebase로 DB생성을 성공적으로 마쳤다.
이제 vue 안에서
firebase가 만든 DB에 어떻게 접근하는지 보자
접근하는 방법은 크게 두가지다
1. npm에서 제공하는 axios 이용하기
2. 기본 browser가 제공하는 fetch 메소드 사용하기
먼저 fetch메소드를 이용하여
접근해본다.
접근하기 전
현재 글쓰는 시점과
동일한 환경을 구성해보자
vue3 프로젝트를 생성하여 다음 소스를 넣으면 된다.
폴더를 유심히 확인하여 생성한 후 소스를 넣어야 한다.
src폴더 : App.vue, main.js
src/components/survey폴더 : LearningSurvey.vue, SurveyResult.vue
src/components/UI폴더 : BaseButton.vue, BaseCard.vue
더보기
[App.vue]
<template>
<learning-survey @survey-submit="storeSurvey"></learning-survey>
<user-experiences :results="savedSurveyResults"></user-experiences>
</template>
<script>
import LearningSurvey from './components/survey/LearningSurvey.vue';
import UserExperiences from './components/survey/UserExperiences.vue';
export default {
components: {
LearningSurvey,
UserExperiences,
},
data() {
return {
savedSurveyResults: [],
};
},
methods: {
storeSurvey(surveyData) {
const surveyResult = {
name: surveyData.userName,
rating: surveyData.rating,
id: new Date().toISOString(),
};
this.savedSurveyResults.push(surveyResult);
console.log(surveyResult);
},
},
};
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
</style>
[main.js]
import { createApp } from 'vue';
import BaseCard from './components/UI/BaseCard.vue';
import BaseButton from './components/UI/BaseButton.vue';
import App from './App.vue';
const app = createApp(App);
app.component('base-card', BaseCard);
app.component('base-button', BaseButton);
app.mount('#app');
[LearningSurvey.vue]
<template>
<section>
<base-card>
<h2>How was you learning experience?</h2>
<form @submit.prevent="submitSurvey">
<div class="form-control">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" v-model.trim="enteredName" />
</div>
<h3>My learning experience was ...</h3>
<div class="form-control">
<input type="radio" id="rating-poor" value="poor" name="rating" v-model="chosenRating" />
<label for="rating-poor">Poor</label>
</div>
<div class="form-control">
<input
type="radio"
id="rating-average"
value="average"
name="rating"
v-model="chosenRating"
/>
<label for="rating-average">Average</label>
</div>
<div class="form-control">
<input type="radio" id="rating-great" value="great" name="rating" v-model="chosenRating" />
<label for="rating-great">Great</label>
</div>
<p
v-if="invalidInput"
>One or more input fields are invalid. Please check your provided data.</p>
<div>
<base-button>Submit</base-button>
</div>
</form>
</base-card>
</section>
</template>
<script>
export default {
data() {
return {
enteredName: '',
chosenRating: null,
invalidInput: false,
};
},
emits: ['survey-submit'],
methods: {
submitSurvey() {
if (this.enteredName === '' || !this.chosenRating) {
this.invalidInput = true;
return;
}
this.invalidInput = false;
this.$emit('survey-submit', {
userName: this.enteredName,
rating: this.chosenRating,
});
fetch("https://vue-http-practice-b1538-default-rtdb.firebaseio.com/");
this.enteredName = '';
this.chosenRating = null;
},
},
};
</script>
<style scoped>
.form-control {
margin: 0.5rem 0;
}
input[type='text'] {
display: block;
width: 20rem;
margin-top: 0.5rem;
}
</style>
[SurveyResult.vue]
<template>
<li>
<p>
<span class="highlight">{{ name }}</span> rated the learning experience
<span :class="ratingClass">{{ rating }}</span>.
</p>
</li>
</template>
<script>
export default {
props: ['name', 'rating'],
computed: {
ratingClass() {
return 'highlight rating--' + this.rating;
},
},
};
</script>
<style scoped>
li {
margin: 1rem 0;
border: 1px solid #ccc;
padding: 1rem;
}
h3,
p {
font-size: 1rem;
margin: 0.5rem 0;
}
.highlight {
font-weight: bold;
}
.rating--poor {
color: #b80056;
}
.rating--average {
color: #330075;
}
.rating--great {
color: #008327;
}
</style>
[UserExperiences.vue]
<template>
<section>
<base-card>
<h2>Submitted Experiences</h2>
<div>
<base-button>Load Submitted Experiences</base-button>
</div>
<ul>
<survey-result
v-for="result in results"
:key="result.id"
:name="result.name"
:rating="result.rating"
></survey-result>
</ul>
</base-card>
</section>
</template>
<script>
import SurveyResult from './SurveyResult.vue';
export default {
props: ['results'],
components: {
SurveyResult,
},
};
</script>
<style scoped>
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>
[BaseButton.vue]
<template>
<button>
<slot></slot>
</button>
</template>
<style scoped>
button {
font: inherit;
border: 1px solid #360032;
background-color: #360032;
color: white;
padding: 0.5rem 2rem;
cursor: pointer;
}
button:hover,
button:active {
background-color: #5c0556;
border-color: #5c0556;
}
</style>
[BaseCard.vue]
<template>
<div>
<slot></slot>
</div>
</template>
<style scoped>
div {
margin: 2rem auto;
max-width: 40rem;
padding: 1rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
</style>
다음 사진은
firebase의 주소를 통해
데이터를 추가하는 코드다
더보기
[LearningSurvey.vue]
<template>
<section>
<base-card>
<h2>How was you learning experience?</h2>
<form @submit.prevent="submitSurvey">
<div class="form-control">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" v-model.trim="enteredName" />
</div>
<h3>My learning experience was ...</h3>
<div class="form-control">
<input type="radio" id="rating-poor" value="poor" name="rating" v-model="chosenRating" />
<label for="rating-poor">Poor</label>
</div>
<div class="form-control">
<input
type="radio"
id="rating-average"
value="average"
name="rating"
v-model="chosenRating"
/>
<label for="rating-average">Average</label>
</div>
<div class="form-control">
<input type="radio" id="rating-great" value="great" name="rating" v-model="chosenRating" />
<label for="rating-great">Great</label>
</div>
<p
v-if="invalidInput"
>One or more input fields are invalid. Please check your provided data.</p>
<div>
<base-button>Submit</base-button>
</div>
</form>
</base-card>
</section>
</template>
<script>
export default {
data() {
return {
enteredName: '',
chosenRating: null,
invalidInput: false,
};
},
emits: ['survey-submit'],
methods: {
submitSurvey() {
if (this.enteredName === '' || !this.chosenRating) {
this.invalidInput = true;
return;
}
this.invalidInput = false;
// this.$emit('survey-submit', {
// userName: this.enteredName,
// rating: this.chosenRating,
// });
alert("go");
fetch('https://vue-http-demo-edb8c-default-rtdb.firebaseio.com//surveys.json', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: this.enteredName,
rating: this.chosenRating,
}),
});
this.enteredName = '';
this.chosenRating = null;
},
},
};
</script>
<style scoped>
.form-control {
margin: 0.5rem 0;
}
input[type='text'] {
display: block;
width: 20rem;
margin-top: 0.5rem;
}
</style>
/survey.json 은 우리가 firebase의 db에 추가할 키값이다.
위의 코드를 추가한 뒤에
Form에서 submit를 보낸 뒤 결과를 살펴보자
결과가 잘 나오는 것을 볼 수 있다.
다음에는
firebase db에 추가한 값을
가져오는 기능을 구현해보자
'데일리 공부 기록' 카테고리의 다른 글
hands on vue3 - vue에서 arrow function 쓰는 특징 1가지 (0) | 2023.03.20 |
---|---|
hands on vue3 - firebase를 이용하여 db에 넣은 값 가져오기 (0) | 2023.03.20 |
hands on vue3 - DB를 무료인 firebase를 사용해보자-DB생성편 (0) | 2023.03.19 |
hands on vue3 - 주어진 소스를 갖고 custom component에 v-model 적용하기 (0) | 2023.03.18 |
hands on vue3 - 주어진 소스를 갖고서 버튼 클릭시 highlight해보기 (0) | 2023.03.18 |