Sl_ MSA 실전예제(1) - (0403)

--> 프론트엔드 (vue)

1. AddDept.vue (화면출력)

// AddDept.vue // vueInit
// html 작성
<template>
  <div class="row">
    <div v-if="!submitted">
      <div class="col-6 mx-auto">
        <div class="row g-3 align-items-center mb-3">
          <div class="col-3">
            <label htmlFor="dname" class="col-form-label"> Dname </label>
          </div>

          <div class="col-9">
            <input
              type="text"
              id="dname"
              required
              class="form-control"
              placeholder="dname"
              name="dname"
              v-model="dept.dname"
            />
          </div>
        </div>

        <div class="row g-3 align-items-center mb-3">
          <div class="col-3">
            <label htmlFor="loc" class="col-form-label"> Loc </label>
          </div>
          <div class="col-9">
            <input
              type="text"
              id="loc"
              required
              class="form-control"
              placeholder="loc"
              name="loc"
              v-model="dept.loc"
            />
          </div>
        </div>

        <div class="row g-3 mt-3 mb-3">
          <button class="btn btn-outline-primary ms-2 col"
                    @click="saveDept"
          >저장
          </button>
        </div>
      </div>
    </div>

    <div v-else>
      <h4>You submitted successfully!</h4>
      <button class="btn btn-success"
            @click="newDept"
      >저장페이지</button>
    </div>
  </div>
</template>
// js 작성
<script>
import DeptService from '@/services/basic/DeptService';

export default {
    // TODO: 데이터 바인딩 속성 정의
    data() {
        return {
            dept: {},         // 빈 객체
            submitted: false  // 저장버튼 클릭하면 true 바뀜
        }
    },
    // TODO: 함수 정의
    methods: {
        // TODO: 저장(추가:insert) 함수 : CRUD (비동기)
        // TODO: 비동기 코딩 : async ~ await 
        async saveDept() {
            try {
                // 임시 객체 변수 
                let data = {
                    dname: this.dept.dname,
                    loc:   this.dept.loc
                };

                // TODO: 벡엔드로 객체 추가 요청
                let response = await DeptService.create(data);
                // TODO: 콘솔에 결과 출력
                console.log(response);
                this.submitted = true; // 저장유무변수=true 변경
            } catch(e) {
                console.log(e);
            }
        },
        // 저장페이지 열기 함수 : 화면 초기화 
        newDept() {
            // TODO: 뷰/리액트 : 변수값을 조작하면 화면이 자동 갱신됨
            this.submitted = false;
            this.dept = {}
        }
    }
};
</script>
// css 작성
<style></style>

2. index.js (메뉴달기)

import { createRouter, createWebHistory } from 'vue-router'

// 메뉴(페이지) <-> url 연결작업 하는 곳 : 라우터
const routes = [
  // 부서
  {
    path: '/',
    alias: "/dept", // 추가 url1
    component: () => import('../views/basic/dept/DeptList.vue')
  },
   // /add-dept : 추가 페이지
   {
    path: '/add-dept',
    alias: "/dept", // 추가 url1
    component: () => import('../views/basic/dept/AddDept.vue')
  },
    // 사원
    {
      path: '/emp',
      alias: "/dept", // 추가 url1
      component: () => import('../views/basic/emp/EmpList.vue')
    }
   
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

화면출력

---

--> 백엔드

• ResponseEntity
  : 데이터 또는 신호를 전달하게 해주는 클래스
  => 신호 종류 : 성공(OK:200), 데이터없음(NO_CONTENT:203)

• 서버에러(INTERNAL_SERVER_ERROR:500) 등
  => 프론트가 벡엔드의 상황을 알수 있고 디버깅 용이 등 품질이 좋아짐

• @RequestBody
  : @ModelAttribute 유사하게 객체를 전달받는 어노테이션

-저장함수 : 저장버튼 (뷰) 클릭시 실행될 함수

-DeptController.java

//    TODO: 저장 함수
    @PostMapping("/dept")
    public ResponseEntity<Object> create(
            @RequestBody Dept dept
    ) {
        try {
//            DB 서비스 저장 함수 실행
            Dept dept2 = deptService.save(dept);

//            성공(OK) 메세지 + 저장된객체(dept2)
            return new ResponseEntity<>(dept2, HttpStatus.OK);

        } catch (Exception e) {
//            500 전송
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }