BoardWrite.vue

BoardWrite.vue

<template>
    <div>
        <h3>글쓰기</h3>
        <hr>
        {{board}}
        <el-form label-width="100px">
            <el-form-item label="글번호">
                <el-input style="width : 300px;" 
                	  v-model="board.no" 
                          disabled 
                          placeholder="글번호" 
                          :value="board.no"></el-input>
            </el-form-item>
        </el-form>

        <el-form label-width="100px">
            <el-form-item label="제목">
                <el-input style="width : 300px;" 
                	  v-model="board.title" 
                    	  placeholder="제목"></el-input>
            </el-form-item>
        </el-form>

        <el-form label-width="100px">
            <el-form-item label="작성자">
                <el-input style="width : 300px;" 
                	  v-model="board.writer" 
                      	  placeholder="작성자"></el-input>
            </el-form-item>
        </el-form>

        <el-form label-width="100px">
            <el-form-item label="내용">
                <el-input style="width : 300px;" 
                	  :rows="10" 
                      	  v-model="board.content" 
                          type="textarea" 
                          placeholder="내용"></el-input>
            </el-form-item>
        </el-form>

        <el-form :inline="true" label-width="100px">
            <el-form-item label=" ">
                <el-button type="primary" 
                	   @click="handleWrite">글쓰기</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    export default {
        data(){
            return{
                board:{
                    no      : '',
                    title   : '',
                    writer  : '',
                    content : '',
                }
            }
        },
        methods:{
            async handleWrite(){
                // 유효성검사 통과 했다 치고
                // const url = "http://localhost:3000/board/insert"
                const url = "/board/insert";
                const headers = {"Content-Type":"application/json"};
                const body = this.board;
                // const body = {
                //     no      : this.board.no,
                //     title   : this.board.tilte,
                //     writer  : this.board.writer,
                //     content : this.board.content,
                // };
                const response 
                	= await this.axios.post(url, body, {headers:headers});
                console.log(response.data);

                if(response.data.status===200){
                    alert('글쓰기 성공');
                    this.$router.push({name:"Board"});
                }
            }
        },
    }
</script>

<style scoped>

</style>

BoardWrite.vue => <script>

<script>
    export default {
        
        methods:{
            async handleWrite(){
                // 유효성검사 통과 했다 치고
                // const url = "http://localhost:3000/board/insert"
                const url = "/board/insert";
                const headers = {"Content-Type":"application/json"};
                const body = this.board;
                // const body = {
                //     no      : this.board.no,
                //     title   : this.board.tilte,
                //     writer  : this.board.writer,
                //     content : this.board.content,
                // };
                const response 
                	= await this.axios.post(url, body, {headers:headers});
                console.log(response.data);

                if(response.data.status===200){
                    alert('글쓰기 성공');
                    this.$router.push({name:"Board"});
                }
            }
        },
    }
</script>

위와같이 url을 단축시키기 위해서는 vue.config.js 파일을 생성해서
설정을 해야한다.

vue.config.js

module.exports = {
    devServer:{
        proxy : {
            // 반드시 vue를 재시작!
            // 백엔드의 http://localhost:3000 이
            // vue에서 url을 생략해서 사용 가능 하도록 설정
            '/board' : {
                target:'http://localhost:3000',
                changeOrigin : true,
                logLevel:'debug',
            }
        }
    }
}

• target에 http://localhost:3000을 써서 해당 값을 미리 정의하여 생략 가능하도록 한다.
• config 파일을 생성 또는 수정하였을때에는 반드시 vue를 재시작 한다.

---

구동화면

• 작성해서 글쓰기를 누르면

• 성공 alert과 성공시 뜨도록 설정 한 status:200이 뜨고,

• DB에 정상적으로 올라간다.