Vue 및 Flutterwave 결제 게이트웨이를 사용하여 간단한 이벤트 예약 앱을 구축합니다.
소개
이 블로그 게시물에서는 vue js를 사용하여 간단한 이벤트 예약 애플리케이션을 만들고 Flutterwave를 결제 게이트웨이로 통합하는 방법을 배웁니다. 이 응용 프로그램에서 사용자는 등록, 로그인 및 비밀번호를 잊어버린 경우 비밀번호를 재설정할 수 있습니다. Vue.js는 사용자 인터페이스 및 단일 페이지 애플리케이션을 구축하기 위한 오픈 소스 모델-뷰-뷰모델 프런트 엔드 JavaScript 프레임워크입니다.
전제 조건
Vue 설치 및 설정
이벤트 애플리케이션을 시작하고 실행할 수 있도록 환경을 설정해 보겠습니다.
`npm install -g vue-cli`
새로운 vue 프로젝트를 만들려면 아래 명령을 사용하여 자체 이벤트 프로젝트를 시작할 수 있습니다.
`vue create event-booking-app`
프로젝트를 생성하는 동안 몇 가지 옵션을 선택하라는 메시지가 표시됩니다. 기본 설정으로 이동하거나 옵션을 수동으로 선택할 수 있습니다.
`cd event-booking-app`
프로젝트 디렉토리로 이동
마지막으로 vue js 개발 서버를 다음과 같이 제공합니다.
`npm run serve`
Axios 설정
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "../src/assets/css/style.css";
import axios from "axios";
axios.defaults.baseURL = "<endpoint>";
Vue.use(require("vue-moment"));
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
API에서 이벤트 가져오기
<script>
export default {
name: "index",
data() {
return {
events: [],
};
},
mounted() {
this.fetchEvents();
},
methods: {
fetchEvents() {
axios
.get(
"https://app.ticketmaster.com/discovery/v2/events?apikey=j3NtHIoBfApjHU0wjFnjENfU3VNu9K3i&keyword=Tech&locale=en&size=50&countryCode=US"
)
.then((res) => {
this.events = res.data._embedded.events;
console.log(res.data._embedded);
})
.catch((error) => {
console.log(error);
});
},
</script>
검색 구현
우리 프로젝트에서는 API에서 이벤트를 가져올 수 있었지만 쉽게 액세스하려면 이벤트를 검색해야 합니다. 계산된 속성을 만들고 아래 코드 스니펫을 포함합니다.
computed: {
resultQuery() {
// console.log(this.searchEvent);
if (this.searchEvent) {
const filtered = this.events.filter((item) =>
item.name.toLowerCase().includes(this.searchEvent)
);
return filtered;
} else {
return this.events;
}
},
},
입증
인증을 추가하면 사용자가 이벤트 예약 애플리케이션에 가입하고 로그인할 수 있습니다.
로그인 구성 요소
<template>
<div class="login_container">
<div class="inputformrow">
<label>Email address</label>
<input type="email" placeholder="[email protected]" v-model="user.email" />
</div>
<div class="inputformrow">
<label>Password</label>
<input
type="password"
placeholder="Enter Password"
v-model="user.password"
/>
</div>
<div class="inputformrow">
<p class="forgotpassword">Forgot your password?</p>
</div>
<div class="inputformrow">
<button class="loginbutton" @click="signin()">Login</button>
<div class="login_alternative">
<p>Don't have an account? <span >Sign Up</span></p>
</div>
</div>
</div>
</template>
export default {
data() {
return {
user: {
email: "",
password: "",
},
};
},
};
methods: {
signin() {
this.$store
.dispatch(signin, {
email: this.user.email,
password: this.user.password,
})
.then(() => {
this.$router.push({ name: "index" });
})
.catch((error) => {
console.log(error.response.data.error);
// this.error = error.response.data;
});
},
},
구성 요소 가입
<template>
<div class="signup_container">
<div class="inputformrow">
<label>First name</label>
<input type="email" placeholder="first name" v-model="user.f_name" />
</div>
<div class="inputformrow">
<label>Last name</label>
<input type="email" placeholder="last name" v-model="user.l_name" />
</div>
<div class="inputformrow">
<label>Email address</label>
<input type="email" placeholder="[email protected]" v-model="user.email" />
</div>
<div class="inputformrow">
<label>Phone number</label>
<input
type="tel"
placeholder="(xxx)-(xxx)-(xxx)-(xxx)"
v-model="user.phone"
/>
</div>
<div class="inputformrow">
<label>Country</label>
<input type="number" placeholder="Nigeria" v-model="user.country" />
</div>
<div class="inputformrow">
<label>Password</label>
<input
type="password"
placeholder="Enter Password"
v-model="user.password"
/>
</div>
<div class="inputformrow">
<button class="signupbutton" @click.prevent="signup()">
Create Account
</button>
<div class="login_alternative">
<p>
Don't have an account?
<span @click="$router.push('/login')">Login</span>
</p>
</div>
</div>
</div>
</template>
export default {
data() {
return {
user: {
f_name: null,
l_name: null,
email: null,
phone: null,
country: null,
password: null,
},
};
},
};
methods: {
signup() {
this.$store
.dispatch(signup, {
f_name: this.user.f_name,
l_name: this.user.l_name,
email: this.user.email,
phone: this.user.phone,
country: this.user.country,
password: this.user.password,
})
.then(() => {
this.$router.push({ name: "login" });
});
},
},
Vuex 구현
결론
vue 및 Flutterwave의 도움으로 간단한 이벤트 예약 애플리케이션을 만들 수 있었습니다.
Reference
이 문제에 관하여(Vue 및 Flutterwave 결제 게이트웨이를 사용하여 간단한 이벤트 예약 앱을 구축합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devifeoma/building-a-simple-event-booking-app-with-vue-and-flutterwave-payment-gateway-iih텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
