Javascript 无法使用Vue在firebase中创建ref用户/注册
RegisterDialog.vue：Javascript 无法使用Vue在firebase中创建ref用户/注册,javascript,firebase,vue.js,firebase-realtime-database,vuex,Javascript,Firebase,Vue.js,Firebase Realtime Database,Vuex,RegisterDialog.vue： <template> <v-dialog persistent v-model="registerDialog"> <v-btn accent slot="activator" color="primary" dark @click.stop="registerDialog = true"> {
<template>
<v-dialog persistent v-model="registerDialog">
<v-btn accent slot="activator" color="primary" dark @click.stop="registerDialog = true">
{{userIsRegistered ? 'Unregister' : 'Register'}}
</v-btn>
<v-card>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<v-card-title v-if="userIsRegistered">Unregister from College?</v-card-title>
<v-card-title v-else>Register for College?</v-card-title>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12>
<v-card-text>You can change your decision later on.</v-card-text>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<v-card-actions>
<v-btn
class="red--text darken-1"
flat
@click="registerDialog = false">Cancel</v-btn>
<v-btn
class="green--text darken-1"
flat
@click="onAgree, registerDialog = false"
>Confirm</v-btn>
</v-card-actions>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: ['collegeId'],
data () {
return {
registerDialog: false
}
},
computed: {
userIsRegistered () {
return this.$store.getters.user.registeredColleges.findIndex(collegeId => {
return collegeId === this.collegeId
}) >= 0
}
},
methods: {
onAgree () {
if (this.userIsRegistered) {
this.$store.dispatch('unregisterUserFromCollege', this.collegeId)
} else {
this.$store.dispatch('registerUserForCollege', this.collegeId)
}<template>
<v-dialog persistent v-model="registerDialog">
<v-btn accent slot="activator" color="primary" dark @click.stop="registerDialog = true">
{{userIsRegistered ? 'Unregister' : 'Register'}}
</v-btn>
<v-card>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<v-card-title v-if="userIsRegistered">Unregister from College?</v-card-title>
<v-card-title v-else>Register for College?</v-card-title>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-layout row wrap>
<v-flex xs12>
<v-card-text>You can change your decision later on.</v-card-text>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<v-card-actions>
<v-btn
class="red--text darken-1"
flat
@click="registerDialog = false">Cancel</v-btn>
<v-btn
class="green--text darken-1"
flat
@click="onAgree, registerDialog = false"
>Confirm</v-btn>
</v-card-actions>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-dialog>
<script>
export default {
props: ['collegeId'],
data () {
return {
registerDialog: false
}
},
computed: {
userIsRegistered () {
return this.$store.getters.user.registeredColleges.findIndex(collegeId => {
return collegeId === this.collegeId
}) >= 0
}
},
methods: {
onAgree () {
if (this.userIsRegistered) {
this.$store.dispatch('unregisterUserFromCollege', this.collegeId)
} else {
this.$store.dispatch('registerUserForCollege', this.collegeId)
}
}
}
}
</script>
<template>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<v-card
class="mt-2"
height="700"
elevation="9">
<v-card-title>
<h4 class="primary--text">{{college.title}}</h4>
</v-card-title>
<v-img
height="200"
:src="college.imageURL"
></v-img>
<v-card-text>
<div class="black--text">{{college.rating}}</div>
<div class="black--text">{{college.city}} - {{college.pincode}}</div>
<div>{{college.description}}</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<app-college-register-dialog :collegeId="college.ID"></app-college-register-dialog>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
props: ['ID'],
computed: {
college () {
return this.$store.getters.loadedCollege(this.ID)
}
}
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
loadedCountries: [
{ imageURL: 'https://image.freepik.com/free-photo/flag-greece_1401-121.jpg', id: 'greece', title: 'Greece'},
{ imageURL: 'https://image.freepik.com/free-photo/flag-malaysia_1401-164.jpg', id: 'malaysia', title: 'Malaysia'},
{ imageURL: 'https://image.freepik.com/free-photo/flag-india_1401-132.jpg', id: 'india', title: 'India'},
{ imageURL: 'https://image.freepik.com/free-photo/flag-austria_1401-60.jpg', id: 'austria', title: 'Austria'},
{ imageURL: 'https://image.freepik.com/free-photo/flag-germany_1401-118.jpg', id: 'germany', title: 'Germany'},
{ imageURL: 'https://image.freepik.com/free-photo/flag-united-states-america_1401-253.jpg', id: 'usa', title: 'United States America'},
{ imageURL: 'https://image.freepik.com/free-photo/flag-russia_1401-206.jpg', id: 'russia', title: 'Russia'}
],
loadedColleges: [
{ imageURL: 'https://image.freepik.com/free-photo/national-kapodistrian-university-athens_78361-4431.jpg',
ID: 'greece1',
title: 'National Technical University of Athens',
country: 'greece',
city: 'Zografou',
rating: '4.7',
pincode: '10682',
description: 'The National Technical University of Athens is Greece’s highest-ranked institution, joint 477th in 2021. Established in 1837, the National Technical University of Athens (or NTUA) is one of the oldest universities in Greece. Today it has around 23,900 students, most studying five-year programs that lead to a diploma equivalent to a Master in Engineering or Science. Its nine academic schools (faculties) cover a range of engineering disciplines, as well as architecture and applied mathematics and physics. Teaching is in Greek, but students attending as part of the Erasmus exchange program complete projects in English. NTUA has several campuses, all located in the lively and historic Greek capital, Athens.'
},
{ imageURL: 'https://image.freepik.com/free-photo/stylized-altered-generic-corporate-modern-office-building_1127-4457.jpg',
ID: 'greece2',
title: 'Aristotle University of Thessaloniki',
country: 'greece',
city: 'Thessaloniki',
rating: '4.6',
pincode: '54124',
description: 'The Aristotle University of Thessaloniki is the largest university in Greece, and one of the largest in southeast Europe. Its large main campus is located in the center of Thessaloniki, Greece’s second-largest city, and a popular destination for visitors to the country. Established in 1925, the institution is named for the famed philosopher Aristotle, who was born close to the city, and is variously referred to as Aristotle University, the University of Thessaloniki or AUTH. It offers courses at undergraduate and postgraduate level across a broad spectrum of subjects, with most courses taught in Greek. In the QS World University Rankings 2021, Aristotle University of Thessaloniki is ranked 571-580 in the world.'
},
{ imageURL: 'https://image.freepik.com/free-photo/large-modern-office-building_1127-3070.jpg',
ID: 'greece3',
title: 'National and Kapodistrian University of Athens',
country: 'greece',
city: 'Zografou',
rating: '4.7',
pincode: '10682',
description: 'Also ranked among the world’s top 700 universities is the National and Kapodistrian University of Athens. Usually shortened just to “the University of Athens”, the National and Kapodistrian University of Athens was established in 1837, making it the oldest among universities in Greece. It has around 125,000 students enrolled, offering programs across a diverse range of subjects, including law, languages, health sciences, philosophy, political science and natural sciences. The university has four main campuses, each in a different neighborhood of Athens.'
},
{ imageURL: 'https://upload.wikimedia.org/wikipedia/commons/9/91/Tan_Teck_Guan_Building,_Aug_07.JPG',
ID: 'malaysia1',
title: 'University of Malaya',
country: 'malaysia',
city: 'Kuala Lumpur, Kuala',
rating: '4.7',
pincode: '70682',
description: 'The University of Malaya, established in 1962 is one of the oldest universities in Malaysia; spread over 922 acres of land, located in the capital city Kuala Lumpur. The university was originally founded as King Edward VII College of medicine in 1905 which later in 1949 merged with Raffles College in Singapore to form Universiti of Malaya. It is the leading public university in Malaysia with a very high research output. The main aim of the university is to advance knowledge and learning through quality research education on a global level and become a globally influential and preferred university.'
},
{ imageURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tamanilmugate.jpg/1200px-Tamanilmugate.jpg',
ID: 'malaysia2',
title: 'Universiti sains Malaysia',
country: 'malaysia',
city: 'George Town, Penang',
rating: '4.8',
pincode: '70685',
description: 'Universiti Sains Malaysia (USM) won most entrepreneurial university in 2018 and it is the only Accelarated Programs for Excellence (APEX) university which is a government funded autonomous university in Malaysia. The university is intensifying the admission process and is inviting 2,300 international students to register with it. It has evolved from faculty based system to broad-based school system.'
},
{ imageURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Bangunan_pentadbiran_UPMKB.jpg/1200px-Bangunan_pentadbiran_UPMKB.jpg',
ID: 'malaysia3',
title: 'Universiti putra Malaysia',
country: 'malaysia',
city: 'Seri Kembangan, Selangor',
rating: '4.4',
pincode: '70635',
description: 'Universiti Putra Malaysia (UPM), formally known as Universiti Pertanian Malaysia is one of the leading research universities in Malaysia. Founded in 1931 as School of agriculture, the university offers undergraduate, postgraduate courses with a primary focus on agricultural sciences and its related fields. '
},
{ imageURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Block_E%2C_The_University_of_Nottingham_Malaysia_Campus.jpg/1200px-Block_E%2C_The_University_of_Nottingham_Malaysia_Campus.jpg',
ID: 'malaysia4',
title: 'University of Nottingham',
country: 'malaysia',
city: 'Semenyih, Selangor',
rating: '4.7',
pincode: '70735',
description: 'The University of Nottingham Malaysia campus (UNMC) is a franchisee of University of Nottingham. The Malaysia campus is completely a part of this research based university headquartered at Nottingham, UK. UNMC is ranked amongst the top 1% universities around the globe. It is considered to be at tier 5 on the scale of 1 – 6 and ranked as “excellent” by the Malaysian Ministry of Higher Education. Being a research-intensive university, UNMC emphasizes its research on nanotechnology, renewable energy, communication and culture, sustainable crops, and business productivity and innovation.'
},
{ imageURL: 'https://upload.wikimedia.org/wikipedia/commons/1/1e/Main_Campus_-_Indian_Institute_of_Management_Bangalore.jpg',
ID: 'india1',
title: 'Indian Institute of Management, Banglore',
country: 'india',
city: 'Bangalore, Karnataka',
rating: '4.6',
pincode: '40335',
description: 'Indian Institute of Management (IIM) Bangalore is one of the Top Management Colleges in India. According to NIRF report 2020, the institute ranks at #2 all over India in the Management category. IIM Bangalore MBA program is the 35 best program globally according to QS World MBA Ranking 2021. The much famed Executive MBA program of IIMB also ranks on #36 globally by QS World EMBA Rankings. Check IIM Bangalore Ranking'
},
{ imageURL: 'https://images.static-collegedunia.com/public/college_data/images/campusimage/14417834034.jpg',
ID: 'india2',
title: 'Indian Institute of Technology Madras, Chennai',
country: 'india',
city: 'Chennai, Tamil Nadu',
rating: '4.8',
pincode: '40337',
description: 'IIT Madras has maintained its 1st position in NIRF Engineering Ranking with 89.93 scores. Whereas the QS World has ranked IIT Madras at 275 out of 500 and 50th position by QS 2021 Asia Ranking. IITM has 16 academic departments and numerous research centers that offer postgraduate and undergraduate programs in distinct disciplines of Engineering, Technology, and Pure Sciences.'
}
],
user: null,
loading: false,
error: null
},
mutations: {
registerUserForCollege (state, payload){
const id = payload.id
if (state.user.registeredColleges.findIndex(college => college.id === id) >= 0) {
return
}
state.user.registeredColleges.push(id)
state.user.fbKeys[id] = payload.fbKey
},
unregisterUserFromCollege (state, payload) {
const registeredColleges = state.user.registeredColleges
registeredColleges.splice(registeredColleges.findIndex(college => college.id === payload), 1)
Reflect.deleteProperty(state.user.fbKeys, payload)
},
setLoadedColleges(state, payload){
state.loadedColleges = payload
},
setLoadedCountries(state, payload){
state.loadedCountries = payload
},
setUser (state, payload) {
state.user = payload
},
setLoading (state, payload) {
state.loading = payload
},
setError (state, payload) {
state.error = payload
},
clearError (state) {
state.error = null
}
},
actions: {
registerUserForCollege ({commit, getters}, payload){
commit('setLoading', true)
const user = getters.user
firebase.database().ref('/users/' + user.id).child('/registrations/')
.push(payload)
.then(data => {
commit('setLoading', false)
commit('registerUserForCollege', {id: payload, fbKey: data.key})
})
.catch(error => {
console.log(error)
commit('setLoading', false)
})
},
unregisterUserFromCollege ({commit, getters}, payload){
commit('setLoading', true)
const user = getters.user
if(!user.fbKeys) {
return
}
const fbKey = user.fbKeys[payload]
firebase.database().ref('/users/' + user.id + '/registrations/').child(fbKey)
.remove()
.then(() => {
commit('setLoading', false)
commit('unregisterUserFromCollege', payload)
})
.catch(error => {
console.log(error)
commit('setLoading', false)
})
},
loadColleges ({commit}) {
firebase.database().ref('loadedColleges').once('value')
.then((data) => {
const colleges = []
const obj = data.val()
for (let key in obj){
colleges.push({
ID: obj[key].ID,
city: obj[key].city,
country: obj[key].country,
description: obj[key].description,
imageURL: obj[key].imageURL,
pincode: obj[key].pincode,
rating: obj[key].rating,
title: obj[key].title
})
}
commit('setLoadedColleges', colleges)
})
.catch(
(error) => {
console.log(error)
}
)
},
loadCountries ({commit}){
firebase.database().ref('loadedCountries').once('value')
.then((data) => {
const countries = []
const obj = data.val()
for (let key in obj){
countries.push({
id: obj[key].id,
imageURL: obj[key].imageURL,
title: obj[key].title
})
}
commit('setLoadedCountries', countries)
}
)
.catch(
(error) => {
console.log(error)
}
)
},
signUserUp ({commit}, payload) {
commit('setLoading', true)
commit('clearError')
firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
.then(
user => {
commit('setLoading', false)
const newUser = {
id: user.uid,
registeredColleges: [],
fbKeys: {}
}
commit('setUser', newUser)
}
)
.catch(
error => {
commit('setLoading', false)
commit('setError', error)
console.log(error)
}
)
},
signUserIn ({commit}, payload){
commit('setLoading', true)
commit('clearError')
firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
.then(
user => {
commit('setLoading', false)
const newUser = {
id: user.uid,
registeredColleges: [],
fbKeys: {}
}
commit('setUser', newUser)
}
)
.catch(
error => {
commit('setLoading', false)
commit('setError', error)
console.log(error)
}
)
},
autoSignIn ({commit}, payload){
commit('setUser', {id: payload.uid, registeredColleges: [], fbKeys: {}})
},
logout ({commit}) {
firebase.auth().signOut()
commit('setUser', null)
},
clearError ({commit}) {
commit('clearError')
}
},
getters: {
loadedCountries (state) {
return state.loadedCountries
},
loadedCountry (state) {
return (countryId) => {
return state.loadedColleges.filter((college) => {
return college.country === countryId
})
}
},
loadedCollege (state) {
return (collegeId) => {
return state.loadedColleges.find((college) => {
return college.ID === collegeId
})
}
},
user (state) {
return state.user
},
loading (state) {
return state.loading
},
error (state) {
return state.error
}
},
modules: {
}
})