Vue.js 실전_ 연습 순서

vue --version

 

/* Vue.js 설치 안 되었을 때 */

 

npm i -g @vue/cli

 

vue --version

 

npm i -g @vue/cli-init

vue init webpack simple

 

/* simple을 프로젝트 이름이라고 생각하시면 됩니다.(폴더로 생성된다) */

 

cd simple

npm run dev

 

 

/*VS Code로 vue 개발하는데 사용하는 최애 확장프로그램 모음*/

 

Vetur

Vue VSCode Snippets

Material Icon Theme

 

 

 

npm run build   /* 배포용으로 만들 때 */

인텔리제이 static ( css, js, index )

 

 

axios 설치 방법

 

npm install --save axios

 

/* 사용 위치의 <script> 아래에 import axios from “axios”; 를 코딩한다 */

 

 

 

폴더구조

 

 

 

 

JsonCrud.vue

 

<script>
import axios from "axios";


export default {
 data() {
   return {
     id:0,
     title: '',
     userId: 0,
     completed: false
   }
 },
 methods: {
   get: function () {
     let dataCollection = []
     axios.get('http://localhost:4000/todo')
       .then(res => {
         dataCollection = res.data
         console.log('dataCollection: ', dataCollection);
         dataCollection.forEach(data => {
           document.querySelector('.print-data').innerHTML
             += `<li>id: ${data.id} <br>title: ${data.title} <br> content: ${data.completed}</li>`
         })
       })
       .catch((error) => console.log(error))
   },
   submit: function () {
     const todoParams = {
       id: this.id,
       userId: this.userId,
       title: this.title,
       completed: this.completed
     }


     axios.post(`http://localhost:4000/todo`, todoParams)
       .then(res => {
         console.log('res: ', res);
       })
       .catch(error => {
         console.log('error: ', error);
       })
   },
   put: function () {
     const todoParams = {
       id: this.id,
       userId: this.userId,
       title: this.title,
       completed: this.completed
     }


     axios.put(`http://localhost:4000/todo/${this.id}`, todoParams)
       .then(res => {
         console.log('res: ', res);
       })
       .catch(error => {
         console.log('error: ', error);
       })
   },
   del: function () {
     axios.delete(`http://localhost:4000/todo/${this.id}`)
       .then(res => {
         console.log('res: ', res);
       })
       .catch(error => {
         console.log('error: ', error);
       })
   }
 }
}
</script>


<template>
<div id="app">
   <div class="box-wrap">
     <div class="box">아이디</div>
     <div class="box"><input v-model="id" placeholder="아이디를 입력"></div>
   </div>


   <div class="box-wrap">
     <div class="box">제목</div>
     <div class="box"><input v-model="title" placeholder="제목을 입력"></div>
   </div>


   <div class="box-wrap">
     <div class="box">사용자 아이디</div>
     <div class="box"><input v-model="userId" placeholder="사용자 아이디를 입력"></div>
   </div>


   <div class="box-wrap">
     <div class="box">성공여부</div>
     <div class="box"><input v-model="completed" placeholder="성공여부를 입력"></div>
   </div>


   <div class="box-wrap">
     <div class="box"><button class="button" v-on:click="get" type="button">GET</button></div>
     <div class="box"><button class="button" v-on:click="submit" type="button">POST</button></div>
     <div class="box"><button class="button" v-on:click="put" type="button">PUT</button></div>
     <div class="box"><button class="button" v-on:click="del" type="button">DELETE</button></div>
   </div>


   <div class="print-data">
     <ul></ul>
   </div>
</div>
</template>


<style>
.box-wrap {
 display: table;
 width: 100%;
 height: 30px;
 table-layout: fixed;
}


.box-wrap .box {
 display: table-cell;
 text-align: left;
 vertical-align: middle;
//border: 1px grey solid;
}
.button {
 width: 100%;
 height: 30px;
}
</style>


App.vue
<template>
 <JsonCrud></JsonCrud>
</template>


<script>




import JsonCrud from "./components/JsonCrud.vue";


export default {
 components: {
   'JsonCrud': JsonCrud
 }
}
</script>


<style>


</style>

 

 

 

App.vue

<template>
 <JsonCrud></JsonCrud>
</template>


<script>




import JsonCrud from "./components/JsonCrud.vue";


export default {
 components: {
   'JsonCrud': JsonCrud
 }
}
</script>


<style>


</style>

 

 

 

 

main.js

import Vue from 'vue'
import App from './App.vue'


new Vue({
 el: '#app',
 render: h => h(App)
})

 

 

index.html

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="shortcut icon" href="src/assets/favicon.ico" type="image/x-icon">
   <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
   <title>simple</title>
 </head>
 <body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
</html>

 

 

 

 

SpringBoot에 배포할 버전 만들기

 

npm run build

 

실행 후 결과물

 

 

부분만 배포합니다.

 

 

Json 파일

db2.json

0.03MB

 

 

 

 

서버 실행

 

json-server --watch db2.json --port 4000

 

 

결과