vue-nodejs-elementUI-mysql-express-demo
Vue+nodejs 프런트엔드 및 백엔드 분리 프로젝트, 기본 입력 작업을 포함하여 사용법을 배웁니다. 프로젝트 생성부터 최종 배포까지의 구현 프로세스와 프로세스 중에 발생하는 몇 가지 문제에 대한 요약을 포함합니다.
프로젝트 미리보기 주소: 미리보기 주소--aixiaodou.cn
댓글 및 토론 주소: 개인 블로그-- https://blog.csdn.net/qq_32442967/article/details/103459148
데이터베이스 주소: express-demo/doc/demo2.sql
MySQL 데이터베이스
데이터베이스는 데모2입니다.
데모2 데이터베이스 생성 > SQL 문 실행
express-demo 프로젝트에서 model/connDb.js 데이터베이스 연결 구성 수정
express-demo-web: 프론트엔드 웹 프로젝트
# 安装依赖
npm install
# 运行项目
npm run dev
express-demo: 백엔드 nodejs 프로젝트
# 安装依赖
npm install
# 运行项目
npm start
이 프로젝트는 전면(vue)과 후면(nodejs) 끝 분리 모드를 사용하는 초급 프로젝트입니다.
주로 사용되는 기술:
- 프런트엔드: vue+ elementUI+ axios+ vue-cli+ webpack+ vue-router+ vuex+ js-cookie
- 백엔드: nodejs+ express+ jsonwebtoken
- 데이터베이스: mysql
- 배포 환경: nginx
- 배포 서버: Linux centos7
기존 기능 소개:
- toolsDown 도구 다운로드 모듈: 데이터베이스에서 목록을 쿼리하고 카테고리별로 표시합니다.
- 로그인, 등록 로그인, 등록, 로그아웃 모듈: 홈 페이지 및 도구 다운로드 페이지는 로그인 없이 미리 볼 수 있으며, 사용자 목록 페이지는 로그인 후에 표시됩니다. localstorage에 로그인한 후 쿠키와 userId에 sessionToken을 저장합니다. 로그인 여부에 따라 오른쪽 상단에 로그인 또는 아바타가 표시됩니다.
- userManage 사용자 목록 모듈: 페이징, 퍼지 검색, 사용자 편집 및 삭제 기능
- friend_link 친구 링크 인터페이스: 친구 링크와 파일링 정보를 데이터베이스에 넣습니다.
- 소프트웨어 다운로드 횟수 통계
- 사용자 수정 및 삭제 기능
V 1.0.2 통계다운로드/로그인등록인증(5~6항)
- 토큰 검증 최적화
- 소프트웨어 다운로드 횟수 통계
- 사용자 수정 및 삭제 기능
V 1.0.1 기본 기능 구현(항목 1-4) - 주로 발생한 일부 문제를 기록합니다.
프런트 엔드
- 로그인 후에만 해당 페이지에 접근할 수 있는지 제어: 토큰 기반으로 로그인 여부 판단, 라우터 참조 링크 구성
- 로그인 후 얻은 userId를 localstorage에 저장합니다. 사용자 정보 획득 시 userId를 가져와서 로그인한 사용자 정보를 획득하고 오른쪽 상단에 아바타를 표시합니다.
후방
- Nodejs는 MySQL 데이터베이스에 연결합니다. 연결 풀을 사용하는 경우 사용 후 연결을 해제해야 합니다. 그렇지 않으면 최대 연결 수가 초과됩니다. 참조 링크
배포
- nginx가 vue 프로젝트를 배포한 후 정상적인 액세스에는 문제가 없지만 새로 고칠 때 404 문제가 나타납니다.
- nodejs는 영원히 참조 링크를 사용하여 Linux에서 영구적으로 실행됩니다.
V 1.0.0 프론트엔드, 백엔드 프로젝트 생성
프런트 엔드
- vue-cli+ webpack을 사용하여 vue 프로젝트 생성
- 라우터, 저장소, 유틸리티, axios, elementUI, 포트 번호 구성...
후방
- express를 사용하여 nodejs 프로젝트 참조 링크 생성
- jsonwebtoken 종속성 패키지를 설치하고, 토큰을 생성하고, 로그인 성공 후 프런트엔드 참조 링크를 반환합니다.
- mysql 데이터베이스 종속성 패키지 설치
프런트엔드 및 백엔드 분리 프로젝트의 도메인 간 문제 해결(요청 헤더 설정) 참조 링크
- 프런트엔드: axios의 요청 인터셉터, sessionToken 설정, 허용된 서버인지 확인하기 위한 백엔드 확인으로 사용됨
- 백엔드: app.js에 요청 헤더 설정 - app.all() 추가
- 백엔드: 사용자 정의된 요청 헤더 sessionToken으로 인해 복잡한 도메인 간 요청의 경우 옵션 사전 요청이 있으며 메서드 옵션이 있는 요청은 빠르게 처리되어 200을 반환합니다.
데이터 베이스
- 데이터베이스 생성 > 테이블 [user, tools_down, friend_link]
- 시뮬레이션된 테스트 데이터
