환경 준비
- Node.js v14.15.5
- 몽고DB v4.2.17
MongoDB 데이터베이스 설치
다운로드하려면 공식 웹사이트에 들어가세요. 버전은 4.2.17, 플랫폼은 Windows, 설치 패키지는 msi 형식입니다.
프로젝트 개발
1. 프로젝트를 로컬로 복제합니다.
2. 프런트엔드, 백엔드(관리자, 웹) 및 백엔드(서버) 프로젝트 종속성을 설치합니다.
3. 프런트엔드, 백엔드(관리자, 웹) 및 백엔드(서버) 프로젝트를 실행합니다.
4. 브라우저 미리보기 열기:
http://localhost:8080은 프런트 엔드 로컬 페이지를 열고, http://localhost:8088은 백그라운드 로컬 페이지를 엽니다.
처음 백엔드 관리자로 로그인할 때 사용자를 등록해 주세요. 로그인 후 등록 버튼을 숨겨 로그인 계정이 유출되는 것을 방지할 수 있습니다.
백엔드 관리 시스템
새 카테고리 추가
카테고리 목록(추가, 삭제, 수정, 확인)
새 기사 추가
기사 목록(추가, 삭제, 수정, 확인)
기사 댓글 목록
친구 링크 추가
친숙한 링크 목록(추가, 삭제, 수정, 확인)
메시지 목록
메시지 사용자 목록
마크다운 편집기 통합
이미지 업로드 기능
새 사용자 추가
사용자 목록(추가, 삭제, 수정, 확인)
범용 추가, 삭제, 수정 및 쿼리 인터페이스 구현(미들웨어 리소스미들웨어)
로그인 등록 기능
로그아웃 기능
JWT 인증 추가 (1. 사용자 이름 검색 2. 비밀번호 인증 3. 토큰 반환)
http 인터셉터(요청, 응답) 추가
블로그 시스템
- 블로그 홈 페이지 UI
- 블로그 홈 페이지 인터페이스 구현
- 블로그 아카이브 페이지 UI
- 블로그 아카이브 페이지 인터페이스 구현
- 블로그 태그 페이지 UI
- 블로그 태그 페이지 인터페이스 구현
- 블로그 게시물 페이지 UI
- 블로그 기사 페이지 인터페이스 구현
- 블로그 친구 링크 페이지 UI
- 블로그 친구 링크 페이지 인터페이스 구현
- 블로그 메시지 페이지 UI
- 블로그 메시지 페이지 인터페이스 구현
구성 참고 사항
- 댓글 페이지에 있는 다른 사람의 댓글에 답변하려면 QQ 메일함을 동기화 알림에 사용합니다.
server/plugins/sendEmail.js
에서 메일함을 구성해야 합니다. QQ 메일함 인증 코드를 얻는 방법은 아래 그림과 같습니다. QQ 메일함 설정-계정 페이지에서)
- 댓글용 메인 계정 구성(메인 계정은 이메일 답장용이므로 댓글용 계정 이메일은 이전 단계에서 QQ 메일함 인증 코드용 이메일과 동일해야 합니다.)
web/src/commentConfig.js
에 계정을 설정해야 합니다. ( topNickName
은 댓글로 생성된 기본 계정의 닉네임과 일치해야 합니다. topParentId
기본 계정이 삭제된 경우 백그라운드 페이지에서 얻을 수 있습니다.) 다시 구성해야 합니다. - 배경 이미지 업로드와 관련하여: 기본값은 로컬에 업로드하는 것입니다. 이 방법은 서버에 대한 요구 사항이 더 높으므로 당연히 업로드 및 저장에 Alibaba Cloud의 OSS를 사용하도록 선택할 수 있습니다.
server/routes/admin/index.js
하고 로컬 이미지 업로드 코드를 주석 처리한 후 마지막으로 Alibaba Cloud oss 구성을 입력해야 합니다.
프로젝트 패키징 및 배포
- 웹 및 관리 프로젝트 패키징(루트 디렉터리에서
pnpm build-all
명령 실행) - 도메인 이름 구매
- 도메인 이름 확인
- 리눅스 클라우드 서버 구매
- Git 설치, SSH 키 추가
- pm2 프로세스 관리
- ngnix 구성
- 몽고디비 구성
- mongodb 데이터를 로컬에서 서버로 마이그레이션
- 전체 사이트에 대한 Qiniuyun CDN 무료 가속
온라인 서버 배포에 대해서는 이 가이드를 참조하세요.
블로그 백엔드 관리 시스템
블로그 시스템
WelcomeStar,이슈
- Your Star는 지속적인 업데이트와 유지 관리에 대한 동기 부여입니다! ! !
- 사용 중 문제가 있으면 언제든지 Issues를 통해 알려주세요.
할 일 목록
- 성능 최적화, 이미지를 압축하고 미리 로드해야 함
- 블로그 게시물 페이지에 검색 기능 추가
- 브라우저 호환성 문제, 모바일 적응. 저는 제 컴퓨터의 구글 크롬 브라우저 개발과 휴대폰 적응 효과만 사용했습니다. 다른 방법은 시도해 본 적이 없습니다. 그러나 컴퓨터 로그인 효과는 권장하지 않습니다.
- Vue의 SEO 문제와 렌더링 페이지 새로 고침의 지터 문제를 해결합니다. 당분간 Vue 사전 렌더링을 수행할 예정입니다. 향후 Vue 서버 측 렌더링이나 nuxt.js 서버 측 렌더링을 배제하지 않습니다.
- 코드를 구성하고 구성요소로 분할합니다. 구조를 더 명확하게 만들고 코드 양을 줄입니다.
- TypeScript를 사용하여 전체 프로젝트 리팩터링
- 재미있는 기능은 생각나는 대로 차차 추가될 예정이며, 계속해서 개발 중입니다...