[Vue, Express] Vue와 Express로 간단한 웹 개발하기 2

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

오늘은 지난번에 이어서, 영화 목록에 영화를 추가하는 기능을 구현하도록 하겠습니다.

2019/01/26 - [programing/JavaScript] - [Vue, Express] Vue와 Express로 간단한 웹 개발하기 1

이전 포스트는 위 링크를 통해 볼 수 있습니다.

Frontend implement

/* eslint-disable */
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MovieListPage from '@/components/MovieListPage'
import DetailMoviePage from '@/components/DetailMoviePage'
import UploadMoviePage from '@/components/UploadMoviePage'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'movielist',
      component: MovieListPage
    },
    {
      path: '/:id',
      name: 'detailmovie',
      component: DetailMoviePage
    },
    {
      path: '/upload',
      name: 'uploadmovie',
      component: UploadMoviePage
    }
  ]
})

frontend/src/router/index.js에 위와같이 영화 업로드를 하기 위한 페이지인 UploadMoivePage를 추가해줍니다.

<template>
    <form method="post" @submit.stop.prevent="mySubmit">
        <div>
            <label for="name">영화 제목</label>
            <input type="text" name="name" required v-model="movie.name">
        </div>
        <div>
            <label for="year">개봉 년도</label>
            <input type="number" name="year" required v-model="movie.year">
        </div>
        <div>
            <label for="director">감독</label>
            <input type="text" name="director" required v-model="movie.director">
        </div>
        <div>
            <label for="poster">포스터 링크</label>
            <input type="url" name="name" required v-model="movie.poster">
        </div>
        <div>
            <label for="description">설명</label>
            <input type="text" name="description" required v-model="movie.description">
        </div>
        <div>
            <button type="submit">업로드</button>
        </div>
    </form>
</template>

<script>
/* eslint-disable */
export default {
    data() {
        return {
            movie: {
                id: "",
                name: "",
                year: 0,
                director: "",
                poster: "",
                description: ""
            },
            response: ""
        };
    },
    methods: {
        mySubmit() {
            this.$http.post("/movies/upload", this.movie)
                .then(res => {
                    console.log('upload success!');
                })
                .catch(err => {
                    console.error('upload fali!');
                });
            // go to list page
            this.$router.push({ name: "movielist" });
        }
    },
    created() {
        // get movies
        this.$http.get(`/movies`).then(response => {
            const movies = response.data;
            this.movie.id = movies.length + 1;
        });
    }
};
</script>

frontend/src/components/UploadMoivePage.vue를 만들어 위와 같이 작성합니다.

<form>태그에 @submit.stop.prevent="mySubmit"를 추가해서, event bubbling과 default action prevent를 해줍니다.

v-model을 사용하여 movie와 binding해준 뒤, movie객체를 axios를 통해 express server로 post방식으로 요청합니다.

created()생명주기함수를 통해 기존 영화 목록을 얻어와, 추가할 영화의 id를 설정합니다.

Backend implement

const fs = require('fs');
const path = require('path');
...
router.post('/upload', function(req, res){
    let movie = req.body;
    movie.year = Number(movie.year);
    
    // get path
    const myPath = path.join(__dirname, '..', 'data', 'movie.json');

    // read file
    fs.readFile(myPath, 'utf8', (err, data)=>{
        let parsedData = JSON.parse(data);
        parsedData.push(movie);
        fs.writeFile(myPath, JSON.stringify(parsedData), (err)=>{
            if (err) throw err;
            console.log('movies update complete!');
            res.send('end');
        });
    });
    
});

backend/routes/movie.js에 위 코드를 추가합니다.

frontend에서 movie라는 객체를 post방식으로 요청하였으니, req.body가 movie객체인 것입니다.

movie.year는 숫자여야 하므로, Number를 이용하여 형번환을 해줍니다.

하드코딩으로 상대경로를 지정하면 에러가 터질 위험이 크므로, path module을 사용하여 경로를 생성해줍니다.

fs모듈을 사용하여 movie.json을 읽은 후, movie객체를 넣고 써줍니다.

Run Vue and Express

Vue와 Express를 실행시킨 뒤, http://localhost:8080으로 접속하면 위와 같이 "너의 이름은"까지 뜹니다.

상단의 "영화추가"버튼을 눌러 양식을 입력한 뒤, 업로드버튼을 클릭합니다.

그럼 위와 같이, movie.json파일이 정상적으로 수정된 것을 볼 수 있습니다.

짠! 위와 같이 극한직업이 목록에 추가되었습니다.

추가사항

앞 포스트에서 언급하지 않았던 부분이 있습니다.

node로 구현한 서버의 경우, 수정을 반영하기 위해서는 일일이 서버를 종료하고 다시 켜야 합니다.

그래서 수정이 발생할 때 마다 자동으로 반영해주는 툴인 nodemon을 이용하면, 편하게 반영시킬 수 있습니다.

nodemon의 사용법에 대해서는 따로 찾아보시길 바랍니다. (언젠가 포스팅한다면 링크걸게요..)