1. view 파일 작성
2. 라우터 지정 (주소, 뷰 패스 지정)
1. view 파일 작성
경로 : [projectroot]/vue-app/src/views
*.vue 파일 4개를 만든다.
ListView.vu
<template>
<div class="container mt-3">
<h1 class="display-1 text-center">사용자 목록</h1>
<div class="btn-group">
<a href="/user/save" class="btn btn-primary">사용자 추가</a>
</div>
<table class="table table-hover mt-3">
<thead class="table-dark">
<tr>
<th>이름</th>
<th>이메일</th>
<th>가입날짜</th>
</tr>
</thead>
<tbody>
<tr class="cursor-pointer" onclick="location.href = '/user/findById';">
<td>스티븐</td>
<td>jobs@shellfolder.com</td>
<td>2023-02-28</td>
</tr>
<tr class="cursor-pointer" onclick="location.href = '/user/findById';">
<td>에브릴</td>
<td>lavigne@shellfolder.com</td>
<td>2023-02-27</td>
</tr>
</tbody>
</table>
</div>
</template>CreateView.vue
<template>
<div class="container mt-3">
<h1 class="display-1 text-center">사용자 등록</h1>
<form>
<div class="mb-3 mt-3">
<label for="name" class="form-label">이름:</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력하세요." name="name">
</div>
<div class="mb-3 mt-3">
<label for="email" class="form-label">이메일:</label>
<input type="email" class="form-control" id="email" placeholder="이메일를 입력하세요." name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">비밀번호:</label>
<input type="password" class="form-control" id="pwd" placeholder="비밀번호를 입력하세요." name="pwd">
</div>
<div class="d-flex">
<div class="p-2 flex-fill">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="1" checked>남성
<label class="form-check-label" for="radio1"></label>
</div>
</div>
<div class="p-2 flex-fill">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="2">여성
<label class="form-check-label" for="radio2"></label>
</div>
</div>
</div>
</form>
<div class="d-flex">
<div class="p-2 flex-fill d-grid">
<a href="/user/findById" class="btn btn-primary">생성</a>
</div>
<div class="p-2 flex-fill d-grid">
<a href="/user" class="btn btn-primary">취소</a>
</div>
</div>
</div>
</template>UpdateView.vue
<template>
<div class="container mt-3">
<h1 class="display-1 text-center">사용자 수정</h1>
<form>
<div class="mb-3 mt-3">
<label for="name" class="form-label">이름:</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력하세요." name="name" readonly="readonly">
</div>
<div class="mb-3 mt-3">
<label for="email" class="form-label">이메일:</label>
<input type="email" class="form-control" id="email" placeholder="이메일를 입력하세요." name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">비밀번호:</label>
<input type="password" class="form-control" id="pwd" placeholder="비밀번호를 입력하세요." name="pwd">
</div>
<div class="d-flex">
<div class="p-2 flex-fill">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="1" checked>남성
<label class="form-check-label" for="radio1"></label>
</div>
</div>
<div class="p-2 flex-fill">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="2">여성
<label class="form-check-label" for="radio2"></label>
</div>
</div>
</div>
</form>
<div class="d-flex">
<div class="p-2 flex-fill d-grid">
<a href="/user/findById" class="btn btn-primary">저장</a>
</div>
<div class="p-2 flex-fill d-grid">
<a href="/user/findById" class="btn btn-primary">취소</a>
</div>
</div>
</div>
</template>SelectView.vue
<template>
<div class="container mt-3">
<h1 class="display-1 text-center">사용자 정보</h1>
<form>
<div class="mb-3 mt-3">
<label for="name" class="form-label">이름:</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력하세요." name="name" readonly="readonly">
</div>
<div class="mb-3 mt-3">
<label for="email" class="form-label">이메일:</label>
<input type="email" class="form-control" id="email" placeholder="이메일를 입력하세요." name="email" readonly="readonly">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">비밀번호:</label>
<input type="password" class="form-control" id="pwd" placeholder="비밀번호를 입력하세요." name="pwd" readonly="readonly">
</div>
<div class="d-flex">
<div class="p-2 flex-fill">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="1" checked>남성
<label class="form-check-label" for="radio1"></label>
</div>
</div>
<div class="p-2 flex-fill">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="2">여성
<label class="form-check-label" for="radio2"></label>
</div>
</div>
</div>
</form>
<div class="d-flex">
<div class="p-2 flex-fill d-grid">
<a href="/user/editById" class="btn btn-primary">수정</a>
</div>
<div class="p-2 flex-fill d-grid">
<a href="/user" class="btn btn-primary">삭제</a>
</div>
<div class="p-2 flex-fill d-grid">
<a href="/user" class="btn btn-primary">취소</a>
</div>
</div>
</div>
</template>homeView.vue는 아래 같이 수정
<template>
<div class="home">
<a href="/user">사용자 목록</a>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
<style scoped>
a {
color: black;
text-decoration: none;
font-weight: bold;
font-size: 1.5rem;
}
</style>2. 라우터 지정 (주소, 뷰 패스 지정)
경로 : [projectroot]/vue-app/src/router
index.js작성
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
//뷰 전환을 위한 라우팅하는 파일
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
// {강의 내용에서는 네비는 필요없다 하여 삭제
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
// },
{
path: '/user',
name: 'ListView',
component: () => import(/* webpackChunkName: "user" */ '../views/ListView.vue')
},
{
path: '/user/findById',
name: 'SelectView',
component: () => import(/* webpackChunkName: "UserSelect" */ '../views/SelectView.vue')
},
{
path: '/user/editById',
name: 'UpdateView',
component: () => import(/* webpackChunkName: "UserUpdate" */ '../views/UpdateView.vue')
},
{
path: '/user/save',
name: 'CreateView',
component: () => import(/* webpackChunkName: "UserCreate" */ '../views/CreateView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
스프링과 다르게 서버를 켜놓고도 화면 변환이 바로 보여서 편한거 같다.
내가 바란 건 한 개 뿐이야