Seok_In

0510 Vue.js Router 적용하기 본문

FrontEnd

0510 Vue.js Router 적용하기

Seok_IN 2022. 5. 11. 00:42

1. 프로젝트에 cdn 추가

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

2. index.html 을 router를 이용하여 수정

- 연결부분 router-link 이용

- 보여주는 부분 router view 이용

<!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>영화관리</title>
  <link rel="stylesheet" href="./css/main.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>  <
</head>
<body>
  <div id="app">
    <header>
      <nav class="header-nav">
        <div>
          <a href="index.html" class = "logo">영화관리</a>
        </div>
        <div>
          <router-link :to="{name:'create'}">영화등록</router-link>
        </div>
        <div>
          <router-link :to="{name:'list'}">영화목록</router-link>
        </div>
      
    </header>
    <router-view></router-view>   
    <script type="module" src="App.js"></script>
</body>
</html>

3. App.js 만들어주기

import Main from './components/main.js';
import Create from './components/create.js';
import List from './components/list.js';

const router = new VueRouter({
    routes:[
        {
            path: '/',
            name: 'main',
            component: Main
        },
        {
            path: '/create',
            name: 'create',
            component: Create
        },
        {
            path: '/list',
            name: 'list',
            component: List
        },
    ],
});

new Vue({
    el: "#app",
    router,
});

4. create.js 만들기

export default {
    template: `
    <div class ="container">
      <h2>영화등록</h2>
      <fieldset class="text-center">
        <label for="title">제목</label>
        <input type="text" id="title" v-model="title" class="view"><br/>
        <label for="maker">감독</label>
        <input type="text" id="maker" v-model="maker" class="view"><br/>
        <label for="genre">장르</label>
        <input type="text" id="genre" v-model="genre" class="view"><br/>
        <label for="time">상영시간</label>
        <input type="text" id="time" v-model="time" class="view"><br/> 
      </fieldset> 
      <button class="btn">영화 등록</button>
    </div>
  </div>`,
    data() {
        return {
            title: "",
            maker: "",
            genre: "",
            time: 0,
        };
    },
};

5. main.js 만들기

export default {
    template: `
    <div class ="container">
      <div class="text-center">
        <div>
          <img src="./img/ssafy_logo.png" alt="SSAFYLOGO">
          <h2>{{ message }}</h2>
        </div>
        <div>
          <input type="text" class="view" v-model="search" placeholder="영화 제목을 입력하세요:">
          <button class="btn">검색</button>
        </div>
        <hr>
        <h3>검색결과</h3>
        <div v-if="movies.length"></div>
        <div v-else>검색결과 없음</div>

  </div>`,
    
    data() {
        return {
            message: "영화정보 관리 사이트 입니다.",
            search: "",
            movies: [],
        };
    },
};

6. list.js 만들기

- created() 이용

export default {
    template: `
    <div class="contatiner">
      <h2>영화 목록</h2>
      <div v-if="movies.length">
        <table class="movie-list">
          <thead>
            <tr>
              <th>인덱스</th>
              <th>제목</th>
              <th>평점</th>
              <th>장르</th>
              <th>상영시간</th>
            </tr>
          </thead>
          <tbody>
          <tr v-for="(movie, index) in movies" :key="index">
            <td>{{ index+1  }}</td>
            <td>{{ movie.title }}</td>
            <td>{{ movie.rating }}</td>
            <td>{{ movie.genres }}</td>
            <td>{{ movie.runtime }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div v-else>등록된 영화가 없습니다.</div>
    </div>`,
    data() {
        return {
            movies: [],
        };
    },
    created() {
        axios.get("https://yts.mx/api/v2/list_movies.json").then((promise) => {
            console.log(promise);
            this.movies = promise.data.data.movies;
        });
    },
};
저작자표시 (새창열림)

'FrontEnd' 카테고리의 다른 글

VUE 로 프로젝트 만들기  (0) 2022.05.18
VUE.js - State 간접접근  (0) 2022.05.18
Vue CLI로 Board 만들기  (0) 2022.05.17
AWS EC2 연동하기  (0) 2022.05.13
0509 VUE.JS  (0) 2022.05.10
'FrontEnd' Related Articles more