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 파일
서버 실행
json-server --watch db2.json --port 4000
결과
'코드 정리' 카테고리의 다른 글
| AWS_EC2 배포 관련 (SpringBoot_gradle ) (0) | 2024.01.22 |
|---|---|
| GitHub_Team (1) | 2023.11.25 |
| 스프링 시큐리티_구글 소셜로그인_DB연결 (0) | 2023.11.01 |
| Vue.js basic (0) | 2023.11.01 |
| local=> Git (0) | 2023.11.01 |
