veu spring 저장 기능
vue service함수 만들기
DeptService.js파일에 저장 함수인 create()를 만들어주어야한다.
create(dept){
return http.post("/basic/dept", dept);// post는 객체를 전달 해야하므로 axios의 post함수는 controller의 url와 객체를 리턴 값으로 전달한다.
}
update(dno, dept){
return http.put(`/basic/dept/${dno}`, dept);
}-
post는 객체를 전달 해야하므로 axios의 post함수는 controller의 url와 객체를 리턴 값으로 전달한다.
-
특정 dno로 값을 업데이트 해야하므로 dno와 dept를 전달한다. put방식이므로 put함수를 사용해야한다.
vue 파일 만들기
화면에 보일 vue파일을 만들어 보자. 저장하는 기능은 입력이 되야하므로 화면에 입력을 할수 있는 페이지를 보여야한다.
일단 먼저 router에 등록을 해주자.
router에 저장기능 페이지 등록하기
{
path: '/add-dept',
component: () => import("../views/basic/dept/AddDept.vue")
},url은 '/add-dept'로 주었다.
사용할 속성 정의하기
export default {
data() {
return {
dept: {},// 배열이 아니고 하나의 객체만 필요하므로 중괄호. 대괄호는 배열일때 사용
submitted: false, // 저장버튼클릭시 true로 바뀐다.
}
},
};저장은 하나의 객체만 저장하기에 배열이 아니고 하나의 객체만 필요하므로 중괄호. 대괄호는 배열일때 사용한다.
submitted는 저장을 할때 사용할 변수이다. 이것을 이용해서 이 변수가 거짓이면 저장폼화면이, 참이면 제출이 된것이니까 저장이 잘 되었다는 메세지를 뜨게할 것이다.
사용할 메서드 정의하기
import DeptService from '@/services/basic/DeptService';
export default {
methods: {
async saveDept(){ // axios함수를 사용할 때는 비동기함수로 만들어야한다.
try{
let data = {
dname: this.dept.dname,
loc: this.dept.loc
}
let response = await DeptService.create(data); // 왜 this dept로 하지 않는가.
console.log(response)
this.submitted = true;
// 백엔드로 객체 추가 요청
}catch(e){
console.log(e)
}
},
newDept(){
// 뷰는 변수값을 조작하면 화면이 자동 갱신됨. 이것을 이용해서 제출후 저장화면으로 이동이 가능하다.
this.submitted = false; // false를 해줌으로 초기화면으로 돌아간다. 이걸false로 바꿔주는 순간 화면이 갱신된다.
this.dept = {}; // dept도 아무것도 없는 상태로 초기화 시켜준다.
}
},
};-
axios함수를 사용하려면 예외처리를 해주어야한다.
-
서비스 파일에서 만든 create를 사용하여 프론트에서 들어온 dept객체를 저장했다.
-
뷰는 변수값을 조작하면 화면이 자동 갱신된다. 이것을 이용해서 제출후 저장화면으로 이동이 가능하다. newDept()함수로 돌아가기 버튼을 누르면 submitted를 다시 false로 바꿔주어 저장화면으로 다시 돌아가게 해줄 것이다. 또한 this.dept = {};로 dept를 초기화 해주어야한다.
vue 페이지 만들기
조건문으로 화면 보여주기
<div v-if="!submitted">
저장화면
</div>
<div v-else>
<h4>You submitted successfully!</h4>
<button class="btn btn-success" @click="newDept">돌아가기</button>
</div>submitted가 false일때 저장화면이 보이게 했고 true이면 아래그림이 나오게 했다.
돌아가기 버튼을 누르면 submitted가false가 되면서 다시 저장화면이 보이게 된다.
dname입력칸
<div class="col-9">
<input
type="text"
id="dname"
required
class="form-control"
placeholder="dname"
name="dname"
v-model="dept.dname"
/>
</div>우리가 정의해준 변수에 값이 들어올 수 있게 v-model처리를 해주었다.
loc입력칸
<div class="col-9">
<input
type="text"
id="loc"
required
class="form-control"
placeholder="loc"
name="loc"
v-model="dept.loc"
/>
</div>여기도 v-model처리를 해주었다.
저장버튼
<div class="row g-3 mt-3 mb-3">
<button class="btn btn-outline-primary ms-2 col" @click="saveDept">저장</button>
</div>저장 버튼을 누르면 saveDept가 실행되어 값이 백엔드로 넘어가고 submitted는true로 바껴 돌아가기 버튼이 나오게 된다.
저장기능 controller만들기
이번에도 controller말고는 다 동일하기에 controller만 만들어주면된다.
코드
@PostMapping("/dept")
public ResponseEntity<Object> create(@RequestBody Dept dept){// jsp 에서는 @ModelAtrribute 를 사용했지만, vue 에서는 @RequestBody 를 사용해서 객체를 받아들인다.
try {
Dept dept2 = deptService.save(dept);
if (dept == null) {
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}else {
return new ResponseEntity<>(dept2, HttpStatus.OK);
}
}catch (Exception e){
e.getMessage();
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}저장을 하려면 프론트에서 객체를 받아와야한다. 그런데 jsp 에서는 @ModelAtrribute 를 사용했지만, vue 에서는 @RequestBody 를 사용해서 객체를 받아들인다.
예외처리는 안 해주어도 되지만 혹시 모르니 해주었다. if문으로 저장된 값이 없다면 메세지를 보내게 만들어줬다.
이 차이 말고는 똑같이 해주면된다.
결과
새로운 값이 잘 저장된다.
vue spring 수정페이지 만들기
수정 페이지로 연결 버튼
DeptList.vue파일에서 수정 버튼을 눌렀을때 수정 페이지가 열리게 링크를 달아줄 것이다.
이 때 a링크를 사용하면 전체 페이지를 초기화 하면서 성능저하가 발생한다. 그러나 routerlink를 사용하면 부분새로고침만 발생하여 성능 저하되는것을 최소할 수 있다.
아래와 같이 url을 연결해주었다. 이때 dno는 변경되는 값이기에 따옴표 밖에 빼주고 "+"로 연결해주어야한다.
수정페이지 url등록하기
{
path: '/dept/:dno',
component: () => import("../views/basic/dept/AddDept.vue")
},dno는 변하는 값으로 주어야한다. 그래서 index에 url을 넣어줄 때에dno에 콜론(:)을 붙여줘야한다.
vue service함수 만들기
get(dno){
return http.get(`/basic/dept/${dno}`)
}
update(dno, dept){
return http.put(`/basic/dept/${dno}`, dept);
}
-
수정전의 정보를 화면에 보이기 위해 상세조회 함수를 만들었다. 똑같이 get함수를 사용하면된다. 대신 dno로 하나의 객체만 가져오므로 dno를 ${}안에 넣어주고 controller에선 @Pathvariable을 사용할 것이다.
-
axios의 put함수를 이용해서 update함수를 만들었다. dno에 따라서 값을 수정해야하므로 dno를 변수로 받고, 수정된 dept를 전달해야하므로 dept도 변수에 넣어줬다. 그리고 url에 ${dno}를 해주어 controller에서 dno를 인식할 수 있게 해줄 것이다.
vue파일 만들기
변수 정의하기
data() {
return {
dept: null,
message:"", // 수정 성공시 화면 성공 메세지 출력하는 변수
}
},dept객체를 띄울것이기에 dept를 해주었고,if문에 사용하기위해 null을 넣어주었다. null이있으면 if문에선 false값을 띄는데 이걸 이용해 html을 코딩 할 것이다.
수정을 성공하면 화면에 메세지를 출력할거기 때문에 message속성도 만들어 주었다.
메소드 정의하기
import DeptService from '@/services/basic/DeptService';
export default {
methods: {
// 상세 조회 함수
async getDept(dno){ // dno는 어디서 나온 값? == mounted에서 getDept가 실행된때 이 페이지의 url의 dno를 받는다.
try {
let response = await DeptService.get(dno);
this.dept = response.data;
console.log(response.data);
} catch (e) {
console.log(e)
}
},
async updateDept(){
try {
let response = DeptService.update(this.dept.dno, this.dept);
console.log(response);
} catch (error) {
console.log(e);
}
},
},
mounted() {
this.message = "";
this.getDept(this.$route.params.dno); // 주소에서 변수 가져오기 방법이다. this.$route.params.변수명을 해줘서 이 url인 '/dept/:dno'에서 dno를 사용한다는 뜻
},
};-
수정전의 정보를 화면에 보이기 위해 상세조회 함수를 만들었다. dno를 받아서 상세조회를 할 것이기에 dno를 매개변수로 주었다.
-
이 dno는 페이지가 뜨면 this.route.params.변수명"을 해줘서 이 url인 '/dept/:dno'에서 dno를 사용한다는 뜻이다.
-
updateDept함수는 이미 getDept에 의해 Dept값이 다 세팅이 됐으므로 this.dept를 사용할 수 있다. 이것을 받아서 미리만든 update함수를 실행하면된다.
vue페이지 만들기
if문으로 화면전환
<template>
<!-- 5) -->
<div v-if="dept">
수정 화면
</div>
<div v-else>
<br />
<p>Please click on a Dept...</p>
</div>
</template>dept를 찾지 못하면 Please click on a Dept...멘트가 뜨게 만들었다. if문 안이 null이면 false이므로 거짓이 되어 위 멘트가 뜬다.
delete버튼
<button class="btn btn-outline-danger ms-3 col" @click="deleteDept">
Delete
</button>클릭시 deleteDept함수가 실행되야 하므로 위 함수를 @click의 값으로 걸어주었다.
update버튼
<button
type="submit"
class="btn btn-outline-success ms-2 col"
@click="updateDept"
> Update
</button>클릭이 되면 updateDept함수가 실행되게 해주었다.
수정기능 controller만들기
수정 페이지 controller
@GetMapping("/dept/{dno}")
public ResponseEntity<Object> findByDno(@PathVariable int dno){
try {
Optional<Dept> dept = deptService.findById(dno);
if (dept == null) {
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}else {
return new ResponseEntity<>(dept,HttpStatus.OK);
}
}catch (Exception e){
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
@PutMapping("/dept/{dno}")
public ResponseEntity<Object> update(@PathVariable int dno,
@RequestBody Dept dept){
try {
Dept dept1 = deptService.save(dept);
return new ResponseEntity<>(dept1, HttpStatus.OK);
}catch (Exception e){
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}-
@PathVariable로 dno를 받아 예외처리를 해주고 dno로 찾은 값을 return 해주었다.
-
해당 dno의 값을 update해야하므로 dno를 변수로 받고, 받은 dept로 수정을 해야하므로 dept를 변수로 뱓는다. 그리고 예외처리로 저장이 잘 되면 ok 사인을 보내고 잘 안되면 에러메세지를 보냈다.
vue spring 삭제하기 기능
vue service 함수 만들기
delete(dno){
return http.delete(`basic/dept/deletion/${dno}`);
}dno 를 인식해 삭제할 객체를 정하기에 dno를 변수로 받고 url에도 spring이 인식할 수 있게 넣어준다.
함수 정의하기
async deleteDept() {
try {
if (confirm("정말로 삭제하시겠습니까?")) {
// 삭제 동작을 수행하는 코드
let response = await DeptService.delete(this.dept.dno);
console.log(response);
alert("삭제되었습니다.");
this.$router.push("/dept"); // 강제이동 코드. 지정한 url로 강제이동 해준다.
} else {
// 삭제를 취소하는 코드
alert("삭제가 취소되었습니다.");
this.$router.push("/dept");
}
} catch (e) {
console.log(e);
}
},
반복 하던거라 따로 언급은안한다.
Controller 삭제 기능 만들기
@DeleteMapping("/dept/deletion/{dno}")
public ResponseEntity<Object> delete(@PathVariable int dno) {
try {
boolean success = deptService.deleteById(dno);
if (success) {
return new ResponseEntity<>(HttpStatus.OK);
}else {
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}
} catch (Exception e) {
return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}deleteById를 사용해서 삭제를 하는데 잘 되었는지 아닌지 확인하기 위해 if 문으로 삭제가 되면 ok 안되면 no content신호를 보내게 만들었다.
마지막으로 에러처리를 해주어서 에러가나면 500신호를 보내게 만들었다.
수정과 삭제 기능을 배웠다. vue는 자체 서버를 가지기에 spring에서 전달 하는 정보를 사용하려면 axios함수를 사용하고 이것을 임포트해서 vue파일에서 사용해야한다. 대신 jsp와는 달리 자체적인 서버가 있기에 페이지 전환을 스프링에서 관리 하지 않아도 된다는 장점이 있다.
