이 글은 4번의 Vue 프로젝트 생성해보기에서 만든 프로젝트로 한다..
이 글을 읽기 전에 Vue 프로젝트의 구조와 흐름을 알고 와야한다....
Axios
개념
node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트.
브라우저 호환성
특징
- Promise(ES6) 사용
- 요청과 응답데이터의 변형
- 요청 및 응답 데이터 변환
- JSON 데이터에 대한 자동 변환
- XSRF 로부터 보호하기 위한 클라이언트 측 지원
설치방법
현재 Vue프로젝트 위치에서 터미널을 열어 명령어를 입력한다.
npm install axios
이렇게 설치가 완료 되었다면 생성했던 Vue프로젝트를 연다.
src에서 보이는 저 main.js로 들어간다.
이제 여기에 다운 받은 axios를 임포트해서 인스턴스 부분에 넣어주면 된다.
위의 이미지 처럼 axios를 추가해주면 된다.
그러면 이제 다른 컴포넌트 들에도 사용을 할 수 있는 상태가 된다.
.get(), .post() 등은 HTTP 메소드 들이다. .get()이면 GET방식, .post()이면 POST방식이다.
이렇게 axios를 추가 했다면 Spring Boot 프로젝트와 통신을 해야 프론트에서 보내주는 데이터 값들을 B.E역할을 하는
Spring Boot 프로젝트가 받아서 DB조회 등 DB에서 데이터를 가지고 프론트로 반환할 수 있게 된다.
그러면 Spring Boot 프로젝트를 열어보자
일단 Spring Boot의 폴더 구조는 이러하다.
class이름 접두사들이 왜 Board냐구요? 내 맘이에요.
는 아니고 이 글의 최종 목표가 게시판 비슷하게 데이터를 정렬하는 것이기 때문이다.
각각의 내용들은 이러하다.
BoardController
package com.study.springvue.controller;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class BoardController {
}BoardDTO
package com.study.springvue.domain;
import lombok.Data;
@Data
public class BoardDTO {
}BoardRepository
package com.study.springvue.repository;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
@Mapper
@Repository
public interface BoardRepository {
}BoardService
package com.study.springvue.service;
import org.springframework.stereotype.Service;
@Service
public class BoardService {
}Board-Mapper.xml
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.study.springvue.repository.BoardRepository">
</mapper>application.properties
server.port=3000
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/testProject
spring.datasource.username=계정
spring.datasource.password=계정비밀번호
mybatis.mapper-locations=classpath:/mapper/*.xmlWebConfig
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080")
.allowedMethods("*");
}
}
프로젝트 구조에서 빼먹은 부분이 있었는데 WebConfig 클래스이다. 이거는 나중에 추가된 것인데 Vue에서 axios.post로 보내는 것을
테스트 하려고 전송을 하면 403에러가 나오는 경우가 있었다. 이런 경우는 https://www.examplefiles.net/cs/1139021
axios post 403 forbidden but postman works
use axios post get 403 forbidden but postman and axios get all works Server: Spring Boot localhost:8080 Web: Vue.js + Axios localhost:80 Spring Boot CORS CONFIG: @Configuration public class WebMVCConfig implements WebMvcConfigurer { @Override public void a
www.examplefiles.net
이곳을 참조해서 해결하면 된다.
이제 axios를 사용해서 간단하게 데이터를 보내보도록 하겠다. Vue프로젝트로 넘어가서
그전에 ajax를 사용할때 url 부분에 해당 주소를 적어준 것을 알 수 있다. axios 는 화면 url과 백 url의 포트를 다르게 하기 때문에 axios를
할때마다 localhost:3000을 칠 수는 없으니 루트 디렉토리에서 vue.config.js 파일을 만든다.
vue.config.js
module.exports={
devServer: {
proxy: {
'/api': {
changeOrigin: true,
target: 'http://localhost:3000',
},
},
},
}이제 /api로 들어가는 것들은 3000포트로 들어가는 것들이다.
Vue 프로젝트로 돌아와서 component 부분에 Main.vue라는 파일을 만든다.
Main.vue의 내용은 이러하다.
<template>
<div>
<p>axios</p>
<button v-on:click="write">글쓰기 버튼</button>
<div v-if="showContent">
<input type="text" v-model="inputText"/>
<input type="text" v-model="writer">
<button @click="send">저장</button>
</div>
</div>
</template>
<script>
export default {
name: "Main.vue",
data: ()=> ({
showContent: false,
inputText: '',
writer: '',
}),
methods:{
write(){
this.showContent = true
},
send(){
this.axios.post('/api/board/save',null,{params:{inputText:this.inputText, writer:this.writer}})
.then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
})
}
}
}
</script>
<style scoped>
</style>v-model은 양방향으로 데이터를 설정 하는 속성이다. v-bind와 v-on 속성을 써야하는 불편함이 있어서 v-model이 나온 것으로 알고 있
다.
이후에 저 컴포넌트를 view 디렉토리에 있는 Home에 임포트 해주고 컴포넌트를 사용하면 된다.
이제 Spring Boot 프로젝트로 돌아와서 컨트롤러에서 메소드를 하나 만들어 준다.
@RestController
@CrossOrigin("/api")
@RequestMapping("/api")
public class BoardController {
@PostMapping("/board/save")
public void save(@RequestParam Map<String,String> params){
System.out.println(params.get("inputText"));
System.out.println(params.get("writer"));
}
}@RestController
Spring MVC Controlle에 @ResponseBody가 추가된 것이다. 주용도는 Json 형태로 객체 데이터를 반환하는 것입니다.
개인적으로는 VueJS + Spring boot 프로젝트를 진행을 할때 많이 쓰였었다.
@CrossOrigin
내부(현재는 localhost:3000) 외에 외부에서 오는 접근을 허용하는 어노테이션이다. 파라미터로 String을 넣는다.
아까 Vue 프로젝트에서 proxy설정으로 "/api"로 설정해놔서 localhost:3000/으로 올것으로 보이지만 들어올 때는 /api/board/save로
들어와서 CrossOrigin("/api")로 했다.
@RequestMapping
/api로 들어오는 것을 매핑 시켜주는 것으로 /api로 들어오는 것은 BoardController가 받게 설정했다.
이제 시작을 해보자.
Vue 프로젝트와 Spring Boot 프로젝트를 실행한다.
Vue프로젝트의 실행은 terminal에서 자기 프로젝트의 디렉토리까지 진입을 해 명령어를 쳐주면된다. 아니면 현재 사용하는 ide의
terminal을 열어 명령어를 쳐주면 된다.
npm run serve실행 완료 시 나오는 화면
이제 저 주소로 진입을 하면 화면이 뜬다.
이제 글쓰기 버튼을 눌러보면 아까 Main.vue에서 만들었던 것처럼 글쓰는 input 태그가 보이게 된다.
이제 텍스트를 채워주고 저장을 눌러보면 Spring Boot 프로젝트에 어떤 데이터가 들어왔는지 확인할 수 있다.
이렇게 글을 쓴 뒤 저장을 눌르면
이렇게 나온 것을 확인 할 수 있다.
중간중간 뭔가 대충 넘어가는 것이 보이는데 원래 spring boot와 vue 를 같이 하려고 하니 꼬인 것 같다...
Comment