[Top of the Full Stack] Node.js + Vue.js 풀스택 개발 Honor of Kings 모바일 공식 웹사이트 및 관리 백엔드
이 프로젝트는 Bilibili의 스택 상단 비디오 튜토리얼 https://github.com/wxs77577/node-vue-moba의 관련 소스 코드입니다. 지속적으로 업데이트되고 있습니다... 관심을 가져주세요.
1. 시작하기
- 프로젝트 소개
- 도구 설치 및 환경 구축(nodejs, npm, mongodb)
- 프로젝트 초기화
2. 경영배경
Element UI 기반 기본 백엔드 관리 인터페이스 구축
카테고리 생성
카테고리 목록
분류 수정
카테고리 삭제
하위 카테고리
일반 CRUD 인터페이스
장비관리
이미지 업로드(멀터)
영웅 관리
Hero 편집(연관, 다중 선택, el-select, 다중)
스킬 편집자
기사 관리
서식 있는 텍스트 편집기(퀼)
홈 광고 관리
관리자 계정 관리(bcrypt)
로그인 페이지
로그인 인터페이스(jwt, jsonwebtoken)
서버 로그인 확인
클라이언트 라우팅 제한(beforeEach, 메타)
업로드된 파일에 대한 로그인 확인(el-upload, 헤더)
3. 모바일 홈페이지
- "도구 스타일" 개념 및 SASS(SCSS)
- 스타일 재설정
- 웹사이트 색상 및 글꼴 정의(색상, 텍스트)
- 범용 Flex 레이아웃 스타일 정의(Flex)
- 일반적으로 사용되는 여백 정의(margin, padding)
- 홈 페이지 프레임 및 상단 메뉴
- 홈페이지 상단 캐러셀 이미지 (vue swiper)
- 스프라이트 사용
- 글꼴 아이콘 사용(iconfont)
- 카드 구성요소(카드)
- 목록 카드 구성요소(목록 카드, 탐색, 스와이프)
- 홈 뉴스 및 정보-데이터 입력(+백엔드 버그 수정)
- 홈 뉴스 및 정보-데이터 인터페이스
- 홈 뉴스 및 정보-인터페이스 디스플레이
- 홈페이지 영웅 목록 - 공식 웹사이트 데이터 추출
- 홈페이지 영웅 목록 - 데이터 입력
- 홈페이지 영웅 목록 인터페이스 표시
- 뉴스 세부정보 페이지
- 뉴스 세부정보 페이지가 완벽함
- 히어로 상세페이지-1-프론트엔드 준비
- 영웅 세부정보 페이지-2 - 백엔드 편집
- 영웅 상세페이지-3-프론트엔드 상단
- 영웅 세부 정보 페이지-4-완벽
4. 출시 및 배포(Alibaba Cloud)
- 프로덕션 환경용으로 컴파일
- 도메인 이름 및 서버 구입
- 도메인 이름 확인
- Nginx 설치 및 구성
- MongoDB 데이터베이스 설치 및 구성
- git 설치 및 구성 ssh-key
- Node.js는 Taobao 이미지를 설치하고 구성합니다.
- 코드를 가져와서 pm2를 설치하고 프로젝트를 시작하세요.
- Nginx 역방향 프록시 구성
- 로컬 데이터를 서버로 마이그레이션(mongodump)
5. 고급
- 무료 SSL 인증서로 HTTPS 보안 연결 활성화
- Alibaba Cloud OSS 클라우드 스토리지를 사용하여 업로드된 파일 저장