node와 vue로 구현한 영화 사이트

1. 스마트 웹 디자인
종합 설계 프로젝트
작성자: 추영호
학번: 1960052

2. 목차
1. 시스템구성도
2. 작품설계
3. UI설계
4.서버API및로직설계

3. Part 1
시스템구성도

4. 시스템구성도
Part 2
이용자 관리
DB
Internet
로그인
로그아웃
회원가입 화면
사용자 페이지
정보 수정
좋아요한 영화
현재 예매 순위
상영 예정작
메인화면
Client
관리자 페이지
영화 관리 서버
기본 서비스
서버

5. Part 2
작품설계

6. 작품설계
Part 2
사용자 UI 설계
(메인화면, 로그인,
로그아웃,
사용자 페이지)
데이터 베이스 설계
(이용자 DB)
Server API 설계
(사용자 관리
사용자 관리,
영화 관리 등 확인
Back-end 통신하여 데
이터를
수정하고 관리
Front-end Back-end 관리자 앱
STEP 4

7. -좋아요한 영화 데
이터가 실시간으로
가져오고 보내는 것
Pc에 적응적인 레이아
웃 적용
- 이용자 등록 관리
- 실시간 예매 순위
영화
-이용자가 좋아요
한 영화 유저 페이
지에 보여주기
작품설계(요구사항)
Part 2
S
T
E
P
4
기능요구사항 성능요구사항 인터페이스요구사항
S
T
E
P
4

8. 작품설계(시나리오)
Part 2
이용자
메인 화면
로그인
회원가입
홈페이지에 접근
이용자 확인 혹은 이용자 정보 취득
이용자
로그아웃 및 홈페이지 나가기
홈페이지 이용
(영화 순위, 계봉 예정작,
앞으로 볼 영화 체크)
관리자 서버를 통한 사용자 정보 관리

9. 시스템구성도(데이터흐름)
Part 2
이용자 관리
DB
Internet
로그인
로그아웃
회원가입 화면
사용자 페이지
정보 수정
좋아요한 영화
현재 예매 순위
상영 예정작
메인화면
Client
관리자 페이지
영화 관리 서버
기본 서비스
서버
1
2
2
3
4
5
6
7
8
9
10
11

10. 시스템구성도(데이터흐름)
Part 2
1. 이용자가사이트에접근
2. 영화 서버와기본서비스서버를사용자에게전달
3. 이용자가로그인을시도
4. DB에서이용자정보가있는지를관리자서버로 보내준다.
5. 관리자는해당유저가있으면로그인,없으면해당계정이없음을알려준다.
6. 이용자가해당정보를입력한다
7. DB서버에서사용자의정보를저장하고,관리자서버로넘겨준다.
8. 관리자서버는가입한이용자의정보를받고관리한다.
9. 이용자는메인페이지에서 영화정보를얻고, ‘자신이볼영화’를좋아요형식으로누른다.
10. 자신의정보에서 그‘좋아요’한영화정보를볼수있는공간이있다.
11. 이용자가로그아웃하고홈페이지에서나간다.
데이터흐름

11. Part 3
UI설계

12. UI설계
Part 3
-로그인
*아이디, 비닐번호
-로그아웃
-회원가입
*이름,전화번호,아이디,비닐번호,주소등
-메인화면
*현재인기인영화
*개봉예정작인 영화작품
*검색창
*일일박스오피스등
-사용자정보
* 내가좋아요한영화
*화면에표시할주요항목(사용자)
-이용자현황
*접속일시
*이용자정보
* 좋아요한영화
* 이용자가검색한단어 혹은영화
*화면에표시할주요항목(관리자)

13. UI설계(메뉴구성사용자)
Part 3
로그아웃
회원가입
로그인
메인 화면 메인
사용자 정보
서브 메뉴
영화 목록
일일 박스오피스
주간 박스오피스
주간 박스오피스 영화사 목록
영화인 목록

14. UI설계(메뉴구성관리자)
Part 3
관리자 계정 관리
접속 일시
이용자 정보
‘좋아요’한 영화
이용자가 검색한
영화 혹은 단어

15. 사용자/메인페이지
Part 3
영화 사이트
일일 박스오피스 현황(슬라이드 형식)
주간 박스오피스 현황(슬라이드 형식)
검색하는 곳

16. 사용자/메인페이지
Part 3
영화 사이트
일일 박스오피스 현황(슬라이드 형식)
주간 박스오피스 현황(슬라이드 형식)
검색하는 곳
LOGIN
아이디:
비밀번호:
로그인
회원가입 아이디 /비밀번호 찾기
회원가입
아이디
비밀번호
이름
전화 번호
이메일
주소
가입하기

17. 사용자/메인페이지
Part 3
영화 사이트
일일 박스오피스 현황(슬라이드 형식)
주간 박스오피스 현황(슬라이드 형식)
영화 장르
Ex)코미디
액션 등
검색하는 곳

18. 사용자/내정보
Part 3
내 정보
최근 검색한 영어 (최대 10개)
내가 ‘좋아요’한 영화
내 정보 수정하기
비밀번호 변경

19. 사용자/내정보
Part 3
내 정보
최근 검색한 영어 (최대 10개)
내가 ‘좋아요’한 영화
내 정보 수정하기
비밀번호 변경
내 정보 수정하기
이름
전화 번호
이메일
주소
수정하기
비밀번호 변경하기
기존 비밀번호 입력
바꿀 비밀번호 입력
바꿀 비밀번호 재입력
변경하기

20. 사용자/관리자
Part 3
영화 사이트 관리자 ID: password:
ID password 이름 전화번호 이메일 주소 관리
123334 1234 Cho0 010- gmail 대전
이용자 정보 관리
수정 삭제 보기
ID 좋아요 한 영화 검색어 ID 접속 일시
이용자 선호 관리 이용자 접속 관리

21. Part 4
서버API및로직설계

22. 서버API
Part 4
메소드 경로 설명
GET /users 모든 users 정보를 조회합니다.
GET /users/:id 특정 users 정보를 조회합니다.
POST /users
users를 추가 합니다.
{ “usersId”:
“usersPassword”:
“name”:
“phoneNumber”:
“email”:
“address”: }
POST /users/:id
특정 users가 검색한 영화 정보 및 ‘좋아요한 영화’를 업로드
한다.
{ “usersId”:
“serach”:
“movielike”: }
POST /users/connect/:id
특정 user의 접속을 하면 업로드한다.
{“usersId”:
“connectdate”:}
DELETE /users/:id 특정 users의 정보를 제거합니다.

23. 서버로직설계
Part 4
처리
번호
요청
비즈니스 로직
(요청을 처리하기 위한 내부 절차)
응답
1 로그인
이용자의 ID와 로그인 정보를 받고,
관리자 서버에 정보를 비교
해당 아이디가 있으면 정상처리,
없으면 아이디가 없음을 보내줌
2 회원가입
회원가입 정보창을 입력 받고, 회원가
입하면 그 데이터를 database로 보내
고 관리자 서버에도 보낸다.
회원가입 정보창을 보낸다.
3 로그아웃
사용자각 로그아웃 버튼을 누르면 해
당 id를 종료한다.
로그아웃이 되면 정상처리를 해줌

24. 서버로직설계
Part 4
처리
번호
요청
비즈니스 로직
(요청을 처리하기 위한 내부 절차)
응답
4 수정
이용자가 정보를 수정하면 데이터베
이스와 관리자 서버의 정보가 같이 바
꾼다.
정보 수정이 되면, 정상처리가 됐다고
보내준다.
5 좋아요한 영화
이용자가 좋아요한 영화가 있으면
해당 이용자에 그 정보를 database에
저장하고 내 정보에 보여주기를 만들
어준
내 정보에서 좋아요한 영화를 볼 수
있게 해준다.
6 검색
이용자가 검색한 영화을 데이터 베이
스에 저장하고 있다가 최근 검색에 해
당 정보를 넘겨준다.(최대 10개, 최신
순으로 업데이트)
자신이 검색한 영화를 최근 검색에 볼
수 있게 해준다.

25. 서버로직설계
Part 4
처리
번호
요청
비즈니스 로직
(요청을 처리하기 위한 내부 절차)
응답
7 영화 메뉴
영화의 장르를 나열하여 이용자에게
보여준다
영화의 장르별로 이용자에게 보여준
다.
8 영화 장르 선택
영화 장르를 선택해서 들어가면
그 영화 장르의 정보를 사용자에게 보
여준다.(영화 API)
그 장르의 영화를 보여준다.

26. Part 5
데이터베이스

27. 데이터베이스설계
Part 4