spring 프로젝트와 nuxt.js 연동 + mySql

 

spring 프로젝트

 

application.properties 에 다음과 같이 해준다.

 

서버 포트는 8000로 설정
mysql 디비 연결, 아이디 , 비밀번호, 스키마 적어주기

 

server.port=8000

# jpa common
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.generate-ddl=true

# jpa mysql
spring.jpa.database=mysql
spring.datasource.url=jdbc:mysql://localhost:3306/dsil?useUnicode=true&serverTimezone=Asia/Seoul
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=dsiluser
spring.datasource.password=1111

 

pom.xml에 당연히 mysql 의존성을 추가해준다.

 

		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>

 

프론트앤드

vue nuxt.js에서

 

.env 파일에 api url 8000번을 적어준다.

 

VUE_APP_API_URL=http://localhost:8000

 

nuxt.config.js 파일에 env: 추가해준다.

 

env: {
    apiURL: process.env.VUE_APP_API_URL
  }

 

api 디렉토리를 만들고 axios 를 import하여 인스턴스를만들어주는 index.js파일이다.
nuxt.config.js에서 apiURL 적어줬던걸 가져온다.

 

import axios from 'axios';
import { setInterceptors } from './common/interceptors';

function createInstance() {
  return axios.create({
    baseURL: process.env.apiURL,

    // baseURL: 'http://localhost:8000',

  });
}

export const instance = createInstance();

 

만들어진 인스턴스를 사용할 js 파일이다.

import 해서 가져온 후

api 에 다음과같이 요청해서 사용한다.

 

import { instance } from './index';

function registerReply(reply) {
  return instance.post('todos', reply);
}


export { registerReply };

 

아, 호출하는곳은

예를 들어 methods: 에 다음과 같이 정의해 줬다.

submit 속성으로 클릭 이벤트가 들어오면 다음이 실행된다.

 

async submitForm() {
      try {
        console.log(process.env.VUE_APP_API_URL);
        const response = await registerReply({
          name: 'test다!', completed: false,
        });
        console.log(response);
      } catch (error) {
      }
    },

 

버튼 클릭시 디비에 저장됨을 확인!