vue-tree-list

tree-list는 보통 홈페이지의 관리자 모드에서 자주보이죠.
사용자가 쉽게 컨트롤할 수 있고 DOM을 빠르게 파악 하기 위해 이용합니다.

본 피드는 모든 소스코드를 제공하지 않습니다.

npm vue-tree-list

↗바로가기
npm i vue-tree-list

이번에 사용한 npm은 vue-tree-list 입니다.
개발하다보니 vue, vuex를 쉽게 파악하고 구조를 정확히 인지하여야 쉽게 만들 수 있습니다.
필자는 Spring-boot와 DB를 연결하여 만들었습니다.

GitHub

↗바로가기

소스코드가 난잡하고 설명이 부족하지만 어떤 방향으로 vue를 작성했는지 파악하시는 용도로 확인해주시면 좋을 것 같습니다.

사용용도

Page

CRUD로 형성되어있으며 각 각의 고유한 url을 가지고 있습니다.
해당 url을 곧 router에서 권한을 체킹해 사용할 예정입니다.

Menu

메뉴는 기본 트리 구조입니다.
상위 메뉴에서 하위 메뉴가 존재하며 Page와 연결되는 관계성 테이블이 별도로 존재합니다.

IMG

1) 전체구조

전체 UI

2) 메뉴

메뉴 컴포넌트

• 사용자는 메뉴를 클릭하면 메뉴 정보를 확인할 수 있습니다.
• 사용자는 메뉴에 커서를 위치할 시 폴더추가, 파일추가, 삭제 기능을 이용하실 수 있습니다.
  
• '폴더추가'는 트리구조의 level 1만 해당됩니다.
• '파일추가'는 트리구조의 level 1,2만 해당됩니다.
• '삭제'는 트리구조에 관계없이 모두 사용할 수 있습니다.

3) 페이지 추가

페이지 추가 컴포넌트(구현중)

• 사용자는 해당 페이지 추가 기능으로 아직 미연결된 메뉴들을 테이블로 확인할 수 있습니다.
• 추가 버튼을 이용해서 선택된 메뉴에 연결되어 DB에 저장됩니다.

4) 페이지 정보

페이지 정보 컴포넌트

• 선택된 메뉴에 따라 연결된 모든 페이지가 나타납니다.
• 삭제 버튼을 이용해서 선택된 메뉴와의 연결을 해제할 수 있습니다.
• 연결된 모든 데이터는 DB에서 삭제되고, 트리를 재구성하여 불러오게 됩니다.