Written by spring-style
on 2021-12-27

Docker(CentOS 7) + Nginx + Spring Boot + Vue.js 배포하기 - ③

api / index.js

import axios from "axios"; const instance = axios.create({ baseURL: "/api/" }) function getMembers() { return instance.get("members") } function registerUser(userData) { return instance.post("members", userData); } export { getMembers, registerUser }

components / common / AppHeader.vue

Signup export default { }

components / MemberListButton.vue

member list {{ member }} import { getMembers } from '@/api'; export default { data() { return { members: '' } }, methods: { async getMemberList() { const { data } = await getMembers(); this.members = data.data; } } }

components / SignupForm.vue

email: password: name: {{ logMessage }} signup import {registerUser} from "@/api"; export default { data() { return { email: '', password: '', name: '', logMessage: '', } }, methods: { async submitForm() { const userData = { email: this.email, password: this.password, name: this.name }; const { data } = await registerUser(userData); this.logMessage = `${ data.name } 님이 가입되었습니다.`; this.initForm(); }, initForm() { this.email = ''; this.password = ''; this.name = ''; }, }, }

routes / index.js

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); // Vue.use Plugin 을 사용하기 위한 초기화 코드 export default new VueRouter({ mode: 'history', routes: [ { path: '/', }, { path: '/signup', component: () => import('@/views/SignupPage.vue'), }, { path: '*', component: () => import('@/views/NotFoundPage.vue') } ], });

views / NotFoundPage.vue

Page is not found export default { }

views / SignupPage.vue

회원 가입 페이지 import SignupForm from '@/components/SignupForm.vue'; import MemberListButton from '@/components/MemberListButton.vue'; export default { components: { SignupForm, MemberListButton } }

App.vue

import AppHeader from '@/components/common/AppHeader.vue'; export default { name: 'App', components: { AppHeader } }

main.js

import Vue from 'vue' import App from './App.vue' import router from '@/routes/index' Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app')

vue.config.js

from http://wangtak.tistory.com/15 by ccl(A) rewrite - 2021-12-27 22:01:29

Top