[vue + spring] 스프링 몰라도 vue랑 스프링 연동하기

환경

• vuejs
• Egovment Spring Framework

---

 

vue 랑 스프링을 연동할 일이 생겼다😢

학생때 스프링 했다가 포기했었는데 일을 하다보니 스프링을 다시 만질일도 있고.. 역시 사람일은 모르는건가보다

 

하지만 연동만 하면되는거라 생각보다 간단했는데 몇가지 코드만 입력해주면 되는일이었다!

 

내 프로젝트 디렉토리는 이렇다

스프링 구조는 프로젝트에 따라 다르고 정답은 아니지만 이런 구조를 받았다!

 

먼저 vue에서 설정을 해주어야되는데

 

vue

vue.config.js


'use strict'
var path = require('path')

module.exports = {
  transpileDependencies: [
    'vuetify',
    ansiRegex
  ],
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === 'production' ? '/result/' : '/',
  outputDir: path.resolve(__dirname, '../webapp/result'),
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
    },
    proxy: {
      '/kofoti': {
        target: `http://${targetHost}:${targetPort}`,
        changeOrigin: true,
        withCredentials: false,
        pathRewrite: {
          '^/': ''
        }
      }
    }
  }

}

이렇게하면 vue 프로젝트에서 build시 webapp/result 에 저장된다 result 디렉토리가 없어도 자동으로 만들어주니 걱정하지말자

그리고 publicPath: process.env.NODE_ENV === 'production' ? '/result/' : '/', 이부분도 굉장히 중요한 부분인데, 여기에 저장한 경로를 기억해놨다가 스프링쪽에 기재해주어야하니 잘 적자 만약에 잘못적었으면 새로 빌드하면된다!

 

 

여기까지 작성했으면 npm run build 로 프로젝트를 빌드해주자!

 

spring

 

이제 스프링 차례인데 빌드를 성공적으로 했다면 webapp/result 에 index.html 및 js와 css 디렉토리가 있을거다! 없으면 다시 한번 확인을 해보자

 

spring에 있는 egov-com-servlet.xml 에서 코드를 수정해주자 경로는 다음과 같다

servelt

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">

    <!-- 패키지 내 Controller, Service, Repository 클래스의 auto detect를 위한 mvc 설정 -->
    <context:component-scan base-package="egovframework">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Service"/>
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Repository"/>
    </context:component-scan>

    <!-- 서블릿컨네이너상의 exception에 대한 오류 페이지를 연결하는 mvc 설정 -->
    <bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
        <property name="defaultErrorView" value="cmm/error/egovError"/>
        <property name="exceptionMappings">
            <props>
                <prop key="org.springframework.dao.DataAccessException">cmm/error/dataAccessFailure</prop>
                <prop key="org.springframework.transaction.TransactionException">cmm/error/transactionFailure</prop>
                <prop key="egovframework.rte.fdl.cmmn.exception.EgovBizException">cmm/error/egovError</prop>
                <prop key="org.springframework.security.AccessDeniedException">cmm/error/accessDenied</prop>
            </props>
        </property>
    </bean>

    <!-- 화면처리용 JSP 파일명의  prefix, suffix 처리에 대한 mvc 설정  -->
    <bean class="org.springframework.web.servlet.view.UrlBasedViewResolver" p:order="1"
    p:viewClass="org.springframework.web.servlet.view.JstlView"
    p:prefix="/WEB-INF/jsp/" p:suffix=".jsp"/>

    <!-- 로그인 체크가 필요한 URL과 로그인 여부를 체크해준다 -->
    <!--
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/cop/com/*.do"/>
            <mvc:mapping path="/cop/bbs/*Master*.do"/>
            <mvc:mapping path="/uat/uia/*.do"/>
            <mvc:exclude-mapping path="/uat/uia/actionLogin.do"/>
            <mvc:exclude-mapping path="/uat/uia/egovLoginUsr.do"/>
            <bean class="egovframework.com.cmm.interceptor.AuthenticInterceptor" />
        </mvc:interceptor>
    </mvc:interceptors>
     -->

    <!-- Annotation 을 사용하지 않는 경우에 대한 MVC 처리 설정 -->
    <mvc:view-controller path="/cmmn/validator.do" view-name="cmmn/validator"/>

    <mvc:annotation-driven/>

    <mvc:resources location="/result/" mapping="/result/**"/>
</beans>

    <mvc:resources location="/result/" mapping="/result/**"/>  이부분이 중요한 부분인데  들어온 경로가  /result/로 들어왔을 경우 webapp/result경로를 실행하라는 뜻이다!

 

Controller

package egovframework.result;

import egovframework.com.cmm.ComDefaultVO;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttributes;

@Controller
@SessionAttributes(types = ComDefaultVO.class)
@RequestMapping(value = "/result")
public class ResultMainController {

	@RequestMapping(value = "")
	public String companyMain() {
		return "forward:/result/index.html";
	}
}

 

Controller단에서 mapping을 시켜주면 끝이 난다!