BAI_SHOP
1.0.0
프로젝트 소개: 이 프로젝트는 프런트엔드와 백엔드 분리 개발 모델을 채택합니다. vue_api_server는 백엔드 코드 파일이고, vue_shop은 프런트엔드 개발 코드 파일이며, vue_shop_server는 프런트엔드 프로덕션 코드 파일입니다. , vue_shop_server를 직접 실행하는 것이 vue_shop보다 훨씬 쉽습니다.
| 프런트엔드 프로젝트 기술 스택 | 설명하다 |
|---|---|
| 뷰 | 사용자 인터페이스 구축을 위한 진보적인 프레임워크 |
| Vue 라우터 | vue-router는 vue.js의 공식 라우팅 관리자입니다 . |
| 요소 UI | ElementUI Element 는 개발자, 디자이너 및 제품 관리자를 위해 준비된 Vue 2.0 기반 구성 요소 라이브러리로, 웹 사이트를 빠르게 구성하는 데 도움이 되는 지원 디자인 리소스를 제공합니다. |
| 액시오스 | axios는 node.js 환경과 브라우저에서 사용할 수 있는 Promise 기반 Http 라이브러리입니다. |
| 전자 차트 | 간단히 말해서 ECharts는 인터넷 개발 프로그램 프로세스에서 데이터를 그래픽에 매핑하기 위해 백엔드 데이터베이스에서 사용하는 플러그인입니다. |
| 백엔드 프로젝트 기술 스택 | 설명하다 |
|---|---|
| Node.js | nodejs는 서버 측에서 실행되는 C++로 개발된 언어로, 웹 사이트 백그라운드 프로그램을 작성하고 서버 측 애플리케이션 개발을 수행할 수 있습니다. |
| 표현하다 | Express는 Node.js 플랫폼을 기반으로 하는 미니멀하고 유연한 웹 애플리케이션 개발 프레임워크로, 다양한 웹 및 모바일 장치 애플리케이션을 만드는 데 도움이 되는 일련의 강력한 기능을 제공합니다. |
| wxya | json 웹 토큰은 웹 애플리케이션 환경에서 청구를 전달하기 위해 구현된 json 기반 개방형 표준입니다. |
| MySQL | 데이터 베이스 |
| 속편화하다 | Sequelize.js는 데이터베이스 항목을 객체에 매핑하거나 객체를 데이터베이스 항목에 매핑하여 MySQL, MariaDB, SQLite 및 PostgreSQL 데이터베이스에 대한 간단한 액세스를 제공합니다. 쉽게 말하면 ORM(Object-Relational-Mapper)입니다. Sequelize.js는 전적으로 JavaScript로 작성되었으며 Node.js 환경에 적합합니다. |
config 구성 파일 디렉터리default.json 기본 구성 파일(데이터베이스 구성, jwt 구성 포함)dao 데이터 액세스 계층DAO.js 에서 제공하는 공용 데이터베이스 액세스 방법models 특정 데이터베이스 ORM 모델 파일을 저장합니다.modules 프로젝트 모듈authorization.js API 권한 확인 모듈database.js 데이터베이스 모듈(데이터베이스 로딩은 nodejs-orm2 라이브러리 로딩을 기반으로 함)passport.js Passport의 로그인 모듈을 기반으로 구축되었습니다.resextra.js API 통합 반환 결과 인터페이스node_modules 프로젝트가 의존하는 타사 모듈routesapi API 인터페이스를 제공합니다mapp 모바일 앱 인터페이스를 제공합니다.mweb 모바일 웹사이트를 제공합니다services 서비스 계층, 비즈니스 논리 코드가 이 계층에 작성되고 다양한 인터페이스를 통해 얻은 데이터가 통합 프런트 엔드에 필요한 데이터로 변환됩니다.app.js 메인 프로젝트 항목 파일package.json 프로젝트 구성 파일 dist 폴더 프로젝트 패키징 후 생성된 폴더(프로덕션 환경용)
css , fonts , img , js , favicon.ico 및 index.html 포함합니다. public 폴더에는 정적 리소스가 저장됩니다.
favicon.ico 및 index.html 파일이 포함되어 있습니다. src 폴더는 소스 프로그램이 저장되는 폴더입니다.
assets : 그림, 글꼴 등과 같은 프로젝트의 더 큰 리소스 파일을 저장합니다.
components : 프로젝트 vue 하위 구성 요소를 저장합니다.
plugins : 프로젝트에서 도입한 element-ui 구성 요소
router : 프로젝트 라우팅 index.js
tools : 프로젝트 도구 클래스
App.vue : vue 루트 구성 요소
main.js : 웹 입구
기타 구성 파일
.browserslistrc : 이 구성은 다양한 프런트엔드 도구에서 대상 브라우저와 nodejs 버전을 공유할 수 있습니다. 이러한 도구는 대상 브라우저에 따라 자동으로 구성될 수 있습니다..editorconfig : 개발자가 다양한 편집기와 IDE에서 일관된 코딩 스타일을 정의하고 유지하는 데 도움이 됩니다..eslintignore : eslint로 확인되지 않은 파일 설정( ESLint 는 플러그인이자 구성 가능한 JavaScript 문법 규칙 및 코드 스타일 검사 도구입니다).eslintrc.js : eslint 구성 파일.gitignore : git이 무시하는 파일 설정.prettierrc : 마우스 오른쪽 버튼 클릭 형식을 사용하면 자동으로 기호를 완성하는 데 도움이 됩니다. 그러나 일부 기호는 eslint에서 구문 오류를 보고하므로 .prettierrc를 통해 파일을 구성할 수 있습니다.babel.config.js : Babel 구성 파일( Babel은 현재 및 이전 버전의 브라우저 또는 기타 환경에서 실행될 수 있도록 ECMAScript 2015+ 버전 코드를 이전 버전과 호환되는 JavaScript 구문으로 변환하는 데 주로 사용되는 도구 체인입니다 )dist 폴더에 vue_shop 으로 패키징된 프로덕션 환경 프로젝트 파일css , fonts , img , js , favicon.ico 및 index.html 포함합니다.node_modules 종속성 패키지를 삭제한 후 vue_shop_server 디렉터리에 들어가서 npm install 실행하여 새 종속성 패키지를 다시 다운로드하세요.nodemon app.js 명령을 실행하고 http://localhost:3000 방문하여 프로젝트의 프런트엔드 페이지를 확인합니다.app.js 파일 서버는 서버에 대한 몇 가지 기본 구성이 포함된 항목 파일을 실행합니다. 1. BAI_SHOP.zip 다운로드하고 압축을 푼다.
2. vue_api_server/db 폴더에 들어가서 db 폴더 아래의 mydb.sql 데이터베이스 파일을 mysql 데이터베이스로 가져옵니다.
3. 데이터를 성공적으로 가져온 후 config 폴더에서 default.json 파일을 열고 그 안에 db_config 구성합니다.
4. doc 명령 창을 열고 vue_api_server 디렉터리를 입력한 후 npm install 명령을 실행하여 프로젝트에 필요한 종속성을 로드합니다.
5. 종속성이 로드된 후 nodemon app.js 실행하여 실행합니다.
6. 새 doc 명령 창을 열고 vue_shop 디렉터리를 입력한 후 npm install 명령을 실행하여 프로젝트에 필요한 종속성을 로드합니다.
7. 종속성이 로드된 후 현재 창에서 npm run serve 명령을 실행하여 프로젝트를 실행합니다. Compiled successfully in xxxxms 메시지가 표시되면 브라우저를 열고 localhost:8080 방문합니다.
8. 추신: 일반적으로 개발 모드의 프로젝트는 성공적으로 실행됩니다! 참고: 먼저 nodejs 환경이 있어야 합니다! 그리고 nodemon 종속성 코드를 전역적으로 설치해야 합니다: npm install nodemon -g
프로덕션 모드에서 프로젝트를 마운트하려면 위의 vue_shop 파일 설명과 vue_shop_server 파일 설명을 참조하세요. dist 폴더는 vue 프로젝트가 패키징된 후의 파일이므로 서버에 마운트하기만 하면 됩니다.
