Vue.js + node.js +Mysql | 직원 검색 & 수정 Part3

꾸밈없는 간단한 직원 검색창 + 수정 가능한 창이다. 그리고 간단히 css로 페이지를 내리지않아도 다 확인할 수 있다.

결과

2022-09-25  Vue3 로 진행했다. 아직까지는 Vue3 의 Vuetify가 적용되지 않는 시점이다. Vue 시작한지 한 달이 되지 않았다. 제대로 한 건 이해하는데 일주일, 혼자 만드는데 2주 안되게 걸렸다.

부족함이 많은 것을 알기에, 누군가 본다면 참고만하길 바랍니다.

 

먼저 하나의 component에 다 몰아서 만들었다.

동작 방법의 큰 틀은 

1.프론트엔드로 틀을 만든다.

2.라우터로 App.vue에서 동작시키게한다.  ----이건 이전 게시물인 part2에 나와있음-------
3.proxy 설정을 통해 node.js 즉 백엔드에서 동작하게 한다. ---이건 이전 게시물인 part2에 나와있음-------
(백엔드에서 동작시키는 이유는 데이터를 Mysql이라는 DB로부터 받아서 사용할 수 있기 때문이다.)

4.프론트엔드로 axios 라이브러리를 통해 axios post로 데이터를 보내주고 .then(res)로 데이터를 요청한다.

5.백엔드 역시 axios 라이브러리를 통해 router.post로 통해 데이터를 받고, connection.query("명령문")을 통해 프론트엔드가 원하는 데이터를 조건설정을 한 후, res.send(rows)러 보낸다.

6.데이터를 받은 프론트엔드는 창을 보여준다.

7.실행은 백엔드에서 해서 백엔드에서 보여준다. -----이건 그냥 백엔드 터미널에서 npm start 한다는 이야기임------

 

1,4,5가 핵심이니 핵심만 작성. 여기 위에 번호를 보면서 잘 이해하기를 바란다. 1의 1번은 1.1 , 4번의 1번은 4.1 이다

Vue.js의 틀이다. 

먼저 나는 검색창 1개와 테이블을 3개를 만들었고, v-show 라는 함수를 넣어서 display를 on off 시키면서 보여주었다.

3개의 테이블은 1.1 처음에 모든 데이터를 보여주는 테이블 | 1.2 검색후에 데이터를 보여주는 테이블 | 1.3. 직원을 추가 시킬 때 나오는 테이블 이다.

1.1 처음에 모든 데이터를 보여주는 테이블 틀

문법을 다 설명할 수는 없다. 핵심이 v-for 이라는 것만 알기를 바란다. 그리고 v-model="모델명" 은 {{모델명}} 형식으로 사용 할 수 있다. 또 한 데이터를 입력하면 입력한 데이터가 즉각적으로 바인딩이 된다.

v-show를 보면, 이름을 guard_down이라 해두었는데 이는 처음에는 True로 지정되어있다가, 다른 테이블이 나오면 false로 바뀔 것이다.

 

4.1 데이터불러온 화면 + 검색창에 대한 프론트엔드

1.1 에 보면 검색창에 v-for로 board in options 하는데, options는 여기 4.1 date() 부분에서 객체배열을 가져온 것이다. 배열안에 객체가 있는 것을 말함. 그래서 Name,Dep,Team 이 안에 넣어진다. 그리고 검색어를 입력하는 칸에는 input을 가져왔다. 그리고 검색어를 입력한 데이터가 v-model 로 searchkeyword 에 들어가는 것이다.  4.1에 data를 보면 searchkeyword 가 ' ' , 로 되어 있는데 이거는 처음에는 빈 값을 이야기한다. 그리고 1.1에 search가 클릭되면 4.1에 있는 methods에 함수를 만들 수 있는데 search () 함수 만든 것을 보면 동작 과정을 알 수 있다. axios post로 options 라는 것과, searchkeyword 라는 데이터가 url의 주소를 통해 들어간 것이다. 

 

5.1 데이터 불러오는 백엔드 부분 처리 + 검색 창 백엔드 부분

4.1에 search() 부분을 보면 /y 로 post를 해서 데이터를 넘겼다. 그러니, 그 데이터를 받으려면 백엔드 5.1에서 받으려면 /y로 데이터를 받아야한다. 여기서 중요한건 저기 ? 가 ,(컴마)후에 쓴 req.body.searchkeyword 이 값이 ? 로 들어가는 것이다. 그러니 만약 req.body.options == 'Name' 으로 옵션이 Name이 되어 왔다면 내가 검색창에 어떤 값을 뭐 홍길동 이라는 값을 입력했을 것이고, 그러면 node.js와 mysql을 connection 시키고 .query를 통해서 원하는 데이터를 가져오는 것이다.

그리고 4.1에 보면 결국 res.data를 this.change_tbl에 넣는다. 그리고 이 change_tbl를 다시 화면에 추출해야하는 것이다.

 

1.2 검색 후에 나오는 데이터를 보여주는 테이블

그러면 내가 검색한 데이터를 통한 결과가 화면에 나타난다. 

 1.2를 보면 input v-show 되어 있는 것이 있다. 이는 내가 수정 하면 input창이 나타나서 그 창에 직접 text로 입력하면 데이터가 v-model를 통해 바뀌고 바뀐 데이터가 

업데이트 라는 버튼을 누르면 백엔드의 sql connecttion + query를 통해 데이터가 들어가는 것이다. 5.2 백엔드를 보고 이해해보자.

 

5.2 수정버튼

4.3 수정버튼

나머지는 다 비슷하다.

 

4.4 삭제버튼 && 5.3 삭제버튼

1.3 직원 추가하는 테이블

4.5 추가하는 버튼

5.4 추가하는 버튼