/WebProject202203

Spring boot, Mybatis(oracle), Vue.js, BootstrapVue를 활용한 해커톤 프로젝트 기초 샘플 프로젝트

Primary LanguageJavaScript

Hackerton Project(20210601)

  • Spring boot, Mybatis(Oracle), Vue.js, BootStrapVue를 활용한 해커톤 프로젝트 기초 샘플 프로젝트

시스템 실행하는 방법

git으로 해당 레포지토리를 받아옵니다.

  1. git clone https://github.com/waltechel/20210601Hackerton.git

spring boot 서버를 동작시킵니다.

  1. /src/main/java/com/upbit/coin/Application.java 파일 실행

npm 서버를 동작시킵니다.

  1. cd src/webapp
  2. npm install
  3. npm start

http://localhost:4200 에서 동작을 확인합니다.


기술스택

  • Spring boot(Spring 4 이상)
  • Mybatis
  • Vue.js
    • Vue.js 2버전을 바탕으로 만듦
    • CLI 3를 사용하지 않음
  • BootstrapVue

필요 developing tools

  • github
  • codemix
  • Spring Tools 3 STS 또는 해당 스펙을 갖춘 eclipse
  • npm(node.js)
  • postman
  • sqldeveloper

Spring boot 라이브러리

  • Lombok
  • Spring boot devtools
  • Spring Web
  • Mybatis
  • Oracle Driver

오라클 사용하기 위한 테이블 명령어 및 기본 데이터 주입 쿼리


DROP TABLE COIN;

CREATE TABLE COIN(
    COIN_NAME VARCHAR(100) NOT NULL PRIMARY KEY,
    PRICE NUMBER NOT NULL,
    UPDATE_DATE DATE DEFAULT SYSDATE NOT NULL
);

INSERT INTO COIN (COIN_NAME, PRICE, UPDATE_DATE) VALUES ('BIT', 50000000, SYSDATE);

INSERT INTO COIN (COIN_NAME, PRICE, UPDATE_DATE) VALUES ('ETH', 2000000, SYSDATE);

INSERT INTO COIN (COIN_NAME, PRICE, UPDATE_DATE) VALUES ('XRP', 1000, SYSDATE);

INSERT INTO COIN (COIN_NAME, PRICE, UPDATE_DATE) VALUES ('EOS', 500, SYSDATE);

INSERT INTO COIN (COIN_NAME, PRICE, UPDATE_DATE) VALUES ('DONGJUN', 500000000, SYSDATE);

COMMIT;


Vue.js 프로젝트를 만들기 위한 명령어 모음

ls
cd src
ls
vue init webpack webapp    
Project name webapp        
Project description this is vue.js project for hackerton project    
Author knecht    
Vue build standalone          
Install vue-router? Yes    
Use ESLint to lint your code? No    
Set up unit tests No    
Setup e2e tests with Nightwatch? No    
Should we run `npm install` for you after the project has been created? (recommended) npm    
ls
cd webapp
npm install
npm install --save axios
npm install vue bootstrap bootstrap-vue
npm add bootstrap bootstrap-vue
npm start

Spring boot Project와 Vue.js를 연동하기 위한 프록시 설정

  • src/webapp/config/index.js 파일에 설정
proxyTable: {
	'/api': {
		target: 'http://localhost:8080',
		changeOrigin: true
	}
},

Spring boot Project와 Vue.js를 연동하기 위한 axios 설정

  • src/webapp/src/main.js 파일에 다음 문장 작성함으로써 axios를 전역에서 사용 가능하도록 설정
import axios from 'axios'    
Vue.prototype.$http = axios

Vue router 사용

  • src/webapp/src/main.js 파일에 다음 문장 작성함으로써 router.js 파일에 vue-router를 사용할 수 있는 설정을 기록하도록 만듦
import router from './router'
  • src/webapp/src/router/index.js 파일에 내용을 작성함으로써 router.js 파일을 사용할 수 있도록 만듦
import Router from 'vue-router'
Vue.use(Router)

BootstrapVue 사용

  • src/webapp/src/main.js 에 다음 문장 작성함으로써 BootstrapVue를 사용 가능하도록 설정
Vue.use(BootstrapVue)    
Vue.use(IconsPlugin)

참고 자료와 사이트


참고 자료

※ 해당 내용에 대해서는 저작권과 관련하므로 절대 수정 불가하며, fork 및 재사용 시 절대 수정하지 마십시오.