spring rest admin
1.0.0
이 프로젝트는 Vue 및 ElementUI를 기반으로 하는 관리 데스크 프런트엔드 프로젝트입니다. Spring-Rest Backend와 함께 사용됩니다. 프레임워크 코드는 Vue-Element-Admin에서 제공되며 이를 기반으로 일부 변경되었습니다. 주로 권한 관리 기능을 최적화했습니다. 온라인 데모에 액세스하려면 여기를 클릭하십시오 .
메뉴 권한은 라우팅 구성에 따라 자동으로 생성되고 관리자에 의해 백엔드 데이터베이스에 동기화됩니다.
동기화된 메뉴 권한에서 버튼 권한을 추가, 수정, 삭제할 수 있습니다.
버튼 권한 외에도 메뉴 권한 및 인터페이스 권한의 메타데이터는 각각 프런트엔드와 백엔드에서 자동으로 생성됩니다. 모든 데이터베이스 레코드가 지워지더라도 관리자는 테이블 레코드를 수동으로 삽입하지 않고 다시 동기화하기만 하면 됩니다.
버튼 권한 추가 시 접두어가 자동으로 생성되며 필요한 부분만 채워서 형식의 혼동을 방지합니다.
메뉴 권한 및 버튼 권한을 인터페이스 권한과 연결하는 기능이 추가되었습니다. 역할은 메뉴 권한 및 버튼 권한에만 직접적으로 관련됩니다.
페이지 요소를 인증할 때 열거형 상수를 사용하면 유지 관리를 용이하게 하기 위해 권한 문자열을 직접 사용하지 않도록 할 수 있습니다.
중복성을 제거하고 코드 재사용을 개선하기 위해 백그라운드 인터페이스 클래스 계층과 일치하도록 API 인터페이스 호출 클래스 계층을 정의합니다.
el-scrollbar 구성 요소의 버그 수정: 브라우저가 어느 정도 축소되면 원래 숨겨진 스크롤 막대가 노출됩니다. 축소 비율이 클수록 현상이 더 뚜렷해집니다.
Node.js 버전은 v12를 사용하는 것이 좋습니다. 다른 버전도 괜찮은 것 같습니다.
Linux 및 MacOS에서는 Node.js 버전 관리를 위해 nvm을 사용하는 것이 좋습니다. nvm은 Windows를 지원하지 않지만 대체 nvm-windows를 사용할 수 있습니다.
Windows의 nvm-windows를 예로 들어 보겠습니다(git bash에서 실행).
# 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/
# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org
# 查看可用的 Node.js版本
$ nvm list available
# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1
# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >
# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v참고: 관리 콘솔의 프런트엔드를 실행하기 전에 먼저 서버 백그라운드를 실행하는 것이 가장 좋습니다.
$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install 참고: npm install 명령을 실행할 때 오류가 발생하고 오류 메시지가 npm ERR! Failed at the [email protected] install script. 인 경우 다음 명령을 실행한 후 npm install 실행할 수 있습니다.
$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrivernpm 설치 단계에서 다른 오류가 보고되는 경우 일부 패키지를 Taobao 미러 스테이션에서 다운로드할 수 없고 액세스할 수 없는 일부 외부 네트워크 주소에서 직접 다운로드해야 하기 때문일 수 있습니다. 그러나 다운로드에 실패할 수 있습니다. 프록시 구성을 나중에 다시 시도해 보세요.
$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port npm install 이 성공적으로 실행되고 오류가 보고되지 않으면 계속 실행할 수 있습니다.
$ npm run serve 잠시 후 브라우저가 자동으로 열리고 http://localhost:9527/login 주소로 이동합니다. 직접 로그인하려면 내장된 사용자를 선택하세요.
참고: 성공적으로 로그인하려면 먼저 서버 배경을 시작해야 합니다.
vue-element-admin은 여러 환경 구성을 지원합니다. 환경 구성 파일 이름의 형식은 .env.[环境名] 입니다. 이 환경 구성 정보를 로컬에서만 사용해야 하는 경우 끝에 .local 접미사를 추가하세요. 파일 이름을 지정하면 구성 파일이 git 에 의해 저장소에 업로드되지 않고 로컬에만 보관됩니다.
참고: 개발 환경 구성 .env.development 및 .env.development.local 외에도 다른 환경 구성 파일은 NODE_ENV = production 으로 설정해야 합니다. 환경 이름 ENV .env 와 .local 사이의 부분에 해당해야 합니다. 또한, 인터페이스 호출 주소 접두사 VUE_APP_BASE_API 도 수정해야 합니다.
참고: 구성 파일에서 다른 환경 변수를 정의하려면 VUE_APP_ 로 시작하고 코드에서 process.env.VUE_APP_xxxx 통해 가져와야 합니다.
참고: 패키징하기 전, npm install , npm run serve 오류 없이 정상적으로 실행되는지 확인하시기 바랍니다.
패키징 명령은 다음과 같습니다. npm run build -- --mode <环境名> 예를 들어 위 그림에서 패키징 명령은 다음과 같습니다.
$ npm run build -- --mode vm-centos7명령이 성공적으로 실행되면 패키징 결과 파일은 dist 디렉터리에 저장됩니다.
참고: 코드 압축 플러그인 compression-webpack-plugin 이전 버전 v6만 사용할 수 있고, 최신 v7 버전은 사용할 수 없으며, 그렇지 않으면 오류가 보고될 것으로 보입니다.
또한 이 프로젝트의 라우팅 모드는 히스토리 모드로 구성되어 있습니다. 이 모드에서 실행하려면 nginx를 그에 맞게 구성해야 합니다(자세한 내용은 history.pushState 사용한 라우팅 참조). 동시에 gzip 관련 구성을 추가해야 합니다(이 구성 줄만 필요함).
location / {
gzip_static on ;
try_files $uri $uri / /index.html;
}
