Spring Boot와 Vue를 활용한 CRUD가 가능한 웹페이지 만들기(3) - 코드작성 2부

목차 - https://okane-on-cliff.tistory.com/227

 

완성된 스프링부트의 디렉토리 구조는 다음과 같다.

 

이제 여러 axios api들이 spring boot의 controller와 함께 어떻게 사용되는지 여러 예시들과 확인 해 보자

//vue-cli
axios.get("http://3.38.178.54:9999/board/getList")

//spring-boot Controller
@GetMapping("/getList")
public List<BoardDto> getList() {
    return mapper.getList();
}
   
//spring-boot BoardMapper.java (interface)
List<BoardDto> getList();

//spring-boot BoardMapper.xml
<select id="getList" resultType="com.app.board.BoardDto">
    select num, title, content from article
</select>

기본적으로 이런 모양이다.

 

이제 뭐 parameter나 html method나 header등의 여러 변형형 예제를 보자

 

이번엔 map형식의 Body를 실어 보내는 Request다

//vue
axios.post("http://3.38.178.54:9999/board/write", {
    title: this.title,
    content: this.content
})

//Controller
@PostMapping("/write")
public void write(@RequestBody HashMap<String, String> map) {
    mapper.write(map);
}

//mapper.java
BoardDto getArticle(int num);

//mapper.xml
<select id="getArticle" resultType="com.app.board.BoardDto">
    select num, title, content from article where num = #{num}
</select>

 

이번엔 post로 String을 실어 보내보자

axios.post("http://localhost:9999/rest/user/confirmId", "문자열", {headers: {'Content-Type': 'text/plain'}})

 

이번 프로젝트로 알게된건데 객체를 body에 실어 보낼 수도 있다.

article = {num: 3, title: "", content: ""}
axios.post("http://3.38.178.54:9999/board/edit", this.article)

@PostMapping("/edit")
public void edit(@RequestBody BoardDto dto) {
    mapper.edit(dto);
}

<update id="edit" parameterType="com.app.board.BoardDto">
    update article set title=#{title}, content=#{content} where num=#{num}
</update>

 

get형식으로 보내서 주소에 query를 달 수도 있다.

axios.get("http://3.38.178.54:9999/board/getArticle/"+this.$route.params.num)

@GetMapping("/getArticle/{num}")
public BoardDto getArticle(@PathVariable int num) {
    return mapper.getArticle(num);
}

<select id="getArticle" resultType="com.app.board.BoardDto">
	select num, title, content from article where num = #{num}
</select>

여기도 쓴 것이지만 int로 해도 대부분 String으로 알아 듣는거 같다. int든 String이든 그냥 하면 되는 듯

 

또 파일을 보낼 수 도 있다.

var formData = new FormData();
formData.append("file", this.file);
await axios.post("http://localhost:9999/rest/file/upload/"+this.id, formData, {
        headers: {'Content-Type': 'multipart/form-data'}
    }
)

@PostMapping(value = "/upload/{id}")
public void upload(@Value("${file.paths}") String filePath, @PathVariable("id") String id, @RequestParam("file") MultipartFile mfile) throws Exception{
    System.out.println(filePath);
    File folder = new File(filePath);
    if (!folder.exists()) folder.mkdir();
    mfile.transferTo(new File(filePath, id+".png"));
}

 

헷갈릴 만 한건 이정도고 나머지는 목록에 git주소를 클론해서 확인하면 될 것 같다.