Vue 일지 #12 (20210928) spring 연동(게시판 글쓰기)

12. 게시판 글쓰기

-백엔드(boot20210914)

 *board_insert post 생성(ApiController.java)

 

// /ROOT/api/board_insert

    @RequestMapping(

        value = "/board_insert", 

        method = RequestMethod.POST, 

        consumes = MediaType.ALL_VALUE,

        produces = MediaType.APPLICATION_JSON_VALUE)

        public Map<String, Object> boardInsert(

            @ModelAttribute Board board,

            @RequestParam(name="file") MultipartFile file){

                Map<String, Object> map = new HashMap<>();

                try{

                    //board => 제목 내용 작성자 

                    board.setImage(file.getBytes());

                    board.setImagename(file.getOriginalFilename());

                    board.setImagesize(file.getSize());

                    board.setImagetype(file.getContentType());

                    bRepository.save(board);

                    map.put("result",1);

                }

                catch(Exception e){

                    e.printStackTrace();

                    map.put("result",0);

                }

                return map;

            }

    

 *게시글 작성(포스트맨)

 **http://127.0.0.1:8080/ROOT/api/board_insert (post)

게시글 작성

 

 *vue 확인

게시글 확인

-프론트엔드(vue20210928)

 *menu2 수정(Menu2.vue)

<template>

    <div>

        게시판 글쓰기

        <hr />

        제목  <input type="text" v-model="title"> <br />

        내용 <input type="text" v-model="content"> <br />

        작성자 <input type="text" v-model="writer"> <br />

        이미지 <input type="file" @change="handlerFile"> <br />

        <input type="button" @click="handleInsert" value="글쓰기"/>

    </div>

</template>

 

<script>

import axios from 'axios';

    export default {

        methods:{

            handlerFile(e){ //v-model이 사용 안됨

                this.file = e.target.files[0];

            },

            async handleInsert(){

                const url = "/ROOT/api/board_insert";

                const headers = {"Content-Type":"multipart/from-data"}

                const body  = new FormData();

                body.append("title", this.title);

                body.append("content", this.content);

                body.append("writer", this.writer);

                body.append("file", this.file); //apicontroller에 requestparam 값과 맞춤

                const response = await axios.post(url, body, {headers});

                console.log(response.data.result);

                if(response.data.result === 1){

                    alert("성공");

                }

                else{

                    alert("실패");

                }

              

            }

        },

        data(){

            return{

                title : '',

                content : '',

                writer : '',

                file : '',

            }

        }

    }

</script>

 

<style scoped>

 

</style>

 

 *게시글 등록

 *성공 유무 알림 표시

게시글 등록

성공 알림

게시글 등록