[Vue.js] 2021-07-05

Web/Vue.js 2021. 7. 5. 17:46

환경 설정

CMD> npm install express-generator -g (-g 실행파일 다운로드)
=> express --version(버젼 확인)
CMD> express -e 생성할 프로젝트명
=> express 프로젝트 생성 (프로젝트명: 생성할 프로젝트명)
CMD> cd 생성한 프로젝트명 (생성한 프로젝트로 이동)
CMD> npm install (npm 설치)

Vue-example(파일명: ex01)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>vue ex01 실습</h3>
    <div id="app">
        <h4>{{message}}</h4>
        <h4 v-text="message"></h4>  <!-- innerText --> 
        <h4 v-html="message"></h4>  <!-- innerHtml -->
        <input type="text" v-bind:value="message" />

        <hr />
        {{name}}
        <input type="text" v-model="name" />
        
        <table border="1">
            <!-- for(let tmp of members) {         } -->
            <tr v-for="tmp in members">
                <td>{{tmp.name}}</td>
                <td>{{tmp.age}}</td>
            </tr>
        </table>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el :'#app',
            data :{
                message :'hello world <hr />',
                name : 'aaa',
                members :[ 
                    {name:'a1', age:23},
                    {name:'a2', age:23},
                    {name:'a3', age:34}
                ]
            },
            beforeCreate() {
                console.log('인스턴스 초기화');
            },
            created() {
                console.log('인스턴스 작성, $el 사용안됨');
            },
            beforeMount() {
                console.log('마운트 되기 전');
            },
            mounted() {
                console.log('마운트 된 직후, $el 사용 가능');
            },
            beforeUpdate() {
                console.log('데이터 변경되기 전')
            },
            updated() {
                console.log('데이터 변경된 후')
            }
        });
    </script>
</body>
</html>

Vue를 사용하기 위해 body태그 내부에 해당 스크립트를 삽입한다.
=> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
el : #app을 통하여 어떤 태그 내부에 적용시킬 것 인지 명시해준다.
data는 실제 데이터로 key와 value로 구성되어 있다.
v-text: HTML의 innerText와 같은 효과를 지닌다. 태그는 인식하지 못하기 때문에 태그가 그대로 출력된다.
v-html:HTML의 innerHtml과 같은 효과를 지닌다. 태그를 인식하기 때문에 태그효과가 적용된다.
v-bind:value: value의 값에 지정한 변수를 감싼다는 의미이다.
반복문을 사용할 경우 v-for를 이용하고 사용방법은 일반 반복문과 동일하다.

Vue-example(화면과 서버를 구분하여 값 전송받기)

<board_write.ejs>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>글쓰기</h3>

    <div id="app">
        글제목 : <input type="text" v-model="title" ref="title" /><br />
        내용 : <textarea rows="7" v-model="content" ref="content"></textarea><br />
        작성자 : <input type="text" v-model="writer" ref="writer" /><br />
        이미지 : <input type="file" v-on:change="handlerImage($event)" ref="image" /><br />
        <input type="button" value="글쓰기" v-on:click="sendData()" />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
    new Vue({
        el :'#app',
        data : {
            title:'',
            content:'',
            writer:'',
            image:'',
        },
        updated() {
            //console.log(this.image);
        },
        methods : {
            handlerImage(e) { //v-on:change
                console.log(e);
                this.image = e.target.files[0];
            },

            async sendData() {
                if(this.title === ''){
                    alert('제목을 입력하세요.');
                    //태그의 속성중에서  ref="title"인것의 focus()
                    this.$refs.title.focus(); 
                    return; //함수 수행 중단
                }

                try {
                    const headers = {
                        "Content-Type":"multipart/form-data"
                    };

                    const obj = new FormData();
                    obj.append("title", this.title);
                    obj.append("content", this.content);
                    obj.append("writer", this.writer);
                    obj.append("image", this.image);

                    const response = await axios.post('/api/board_write.json', obj, headers);
                    console.log(response);
                } catch (error) {
                    console.error(error);
                }
            }
        }
    });
    </script>
</body>
</html>

v-model을 사용할 경우 입력받은 값이 실시간으로 data내부의 key에 value값으로 저장된다.
사진을 저장하기 위해 Content-Type을 multipart/form-data로 지정하였고, obj에 입력받은 title, content, writer, image 변수에 저장된 값을 append수행하였다.
obj를 서버로 보내기 위해 axios.post를 작성하였고 경로, obj, header를 인자로 전달하였다.
$ref의 역할은 유효성 검사 시 해당 속성이 비어있을 경우 focus를 수행하기 위해 만들었다.

<board_list.ejs>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>_id</th>
                <th>제목</th>
                <th>작성자</th>
                <th>조회수</th>
                <th>날짜</th>
            </tr>
            <tr v-for="tmp in brdList">
                <td>{{tmp._id}}</td>
                <td><a href="#">{{tmp.titie}}</a></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
    new Vue({
        el :'#app',
        async mounted() {
            try{
                const headers = {
                    "Content-Type":"application/json"
                };
                const { data } = await axios.get('/api/board_list.json', headers);
                console.log(data);
                if(data.ret === 1){
                    this.brdList = data.rows;
                }
            }
            catch(err){
                console.error(err);
            }
        },
        data : {
            brdList : [],
        }
    });
    </script>
</body>
</html>

응답반은 결과 값중 { data }와 같이 표현하여 저장할 경우 해당 이름과 일치하는 항목만 변수에 저장시킨다.
brdList는 원래 비어있는 리스트이지만 응답받은 결과를 brdList에 저장시켰고 해당 리스트를 바로 위에서 사용할 수 있는 것을 확인할 수 있다.

저작자표시 비영리 변경금지

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] 2021-07-12 (0)	2021.07.12
[Vue.js] 2021-07-07 (0)	2021.07.07

ABOUT ME

portray portray

환경 설정

Vue-example(파일명: ex01)

Vue-example(화면과 서버를 구분하여 값 전송받기)

'Web > Vue.js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

환경 설정

Vue-example(파일명: ex01)

Vue-example(화면과 서버를 구분하여 값 전송받기)

'Web > Vue.js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바