springboot2-vue3
중복 기능 없이 권한 관리 및 공통 기능만 있는 springboot2 및 vue3 기반의 공통 배경 템플릿입니다 . 프런트엔드 및 백엔드 분리 프로젝트, 코드는 Alibaba 코딩 규칙 스캐닝 및 버그 찾기 90% 통과
새 버전 주소
시작하기 가이드
다음 가이드는 개발 및 테스트를 위해 로컬 컴퓨터에 프로젝트를 설치하고 실행하는 데 도움이 됩니다. 본 프로젝트를 온라인 환경에 배포하는 방법에 대한 자세한 내용은 배포 섹션을 참조하세요.
설치 요구 사항 및 단계
- Java 환경 JDK1.8 설치 및 구성
- mysql 8을 설치하고, 데이터베이스(utf8mb4)를 생성하고 sql을 가져옵니다(doc 디렉터리에 있음).
- redis를 설치하려면 다운로드하여 설치하세요.
- 개발 도구는 lombok 플러그인을 설치해야 합니다. (개발 도구는 IDEA 권장)
- --- 백엔드 작업(문제가 있는 경우 일반적으로 yml 구성 파일의 데이터 소스 구성에 오류가 있음)
- 노드 환경 설치 및 구성
- vue-cli3을 설치하고, vue 디렉토리에 들어가서
npm install
실행하세요. - ---프런트 엔드에서
npm run serve
실행합니다( WebStorm 또는 IDEA는 package.json 파일의 6행 왼쪽에 있는 녹색 삼각형을 직접 클릭할 수 있음).
데모 주소
- 온라인 데모 주소
- 사용자 이름:슈퍼관리자
- 비밀번호:111111
- 팁: 동시에 로그인하는 여러 사용자가 쫓겨날 수 있습니다.
- 팁: 데모 환경에서는 추가, 삭제 및 수정 작업이 금지되어 있으므로 오류를 무시하십시오.
- 팁: 다른 예외가 있는 경우 페이지를 강제로 새로고침하세요. (캐시 문제일 수 있습니다.)
- 인터페이스 문서
- 스웨거 부트스트랩
- 팁: 요청 시 404 메시지가 표시됩니다. 요청 앞에 /github을 수동으로 추가하세요.
배포
- springboot 디렉터리에서
mvn clean package
명령을 실행하여 패키징하면 생성된 파일은 /target/build 디렉터리에 있습니다.- config 디렉터리에는 구성 파일이 저장됩니다.
- lib 디렉토리는 maven이 의존하는 jar 패키지입니다.
- 정적 디렉토리는 정적 파일을 저장합니다.
- jar 파일은 생성된 jar 패키지입니다. (pom 종속성이 나중에 변경되지 않은 경우 jar 패키지만 교체할 수 있습니다.)
- vue 디렉터리에서
npm run build
명령을 실행하여 패키징하면 생성된 파일은 /dist 디렉터리에 있습니다.- 패키징 구성은 .env 파일과 vue.config.js 파일에 있습니다.
- 배포 서버는 JDK1.8 , mysql 8 및 redis 환경을 구성해야 합니다.
- jar 패키지는
nohup java -jar springboot.jar &
실행하고 백그라운드에서 실행되어 현재 디렉터리의 nohup.out 파일에 로그를 출력할 수 있습니다. - 배포 서버에 대해 nginx를 구성하는 것이 좋습니다. Vue는 패키지되어 nginx 아래에 배치됩니다. 구성되지 않은 경우 jar 패키지와 동일한 디렉터리의 static 아래에 배치할 수 있습니다.
일반적인 실수
-
java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
- 오류: 데이터베이스를 기반으로 엔터티 클래스 생성
- 해결 방법: resources/config/generator-config.xml의 6번째 줄에 있는 jar 패키지 경로를 자신의 jar 패키지 경로로 변경하세요.
-
npm install
- 오류: vue 설치 종속성 오류, 일반적으로 node-sass
- 해결 방법: Taobao 이미지를 변경하거나
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
-
/login ------请求失败-----error: Error: Cannot find module './q/Index'
- 오류: 백그라운드에서 새 메뉴를 생성하고(하위 메뉴가 없음) 메뉴 추가 권한을 얻은 후 다시 로그인하면 이 오류가 발생합니다.
- 해결 방법: 메뉴 디렉터리와 Index.vue 파일을 vue 프로젝트의 /src/views/index/ 경로에 추가하세요.
뒤쪽 끝:
스프링부트, 마이바티스, 레디스
- 소개
- springboot 템플릿을 기반으로 생성된 프로젝트
- 기본 구성
- .yml 파일은 관련 정보를 구성할 수 있습니다.
- config 디렉터리에는 일반적인 모듈 구성이 포함되어 있습니다.
- 필터는 크로스 도메인 , IP 필터링 , 매개변수 필터링 등으로 구성됩니다.
- 매개변수 필터링 요청은 Jsoup을 사용하여 html 태그를 필터링하여 선행 및 후행 공백을 자동으로 제거합니다 (필터링 수준은 사용자 정의 가능).
- 권한 관리
-
@AdminAuthToken
주석과의 인터페이스, 요청 헤더에 액세스하려면 토큰이 있어야 함 - vue 프런트 엔드 페이지와 협력하여 라우팅을 동적으로 렌더링하고 표시 버튼을 숨깁니다. 버튼은
$store.state.role['buttons']
(프런트 엔드)에 저장됩니다. - 인터페이스 수준 권한에 맞게 기능 관리 의 메뉴 또는 버튼에 해당하는 API를 개선해야 합니다. 그렇지 않으면 토큰이 존재한 후 기본적으로 허용됩니다.
- 패키징 팩토리는 CURD를 사용하고 BaseService만 상속합니다.
-
baseInsert()
및 baseUpdate()
null 값이 있는 필드를 자동으로 필터링합니다. -
baseUpdate()
매개변수를 필터링하거나 할당 작업을 위한 새 엔터티 클래스를 생성하세요.
- 데이터베이스를 기반으로 엔터티 클래스 자동 생성
- org.mybatis.generator.plugin.MyBatisTest.main() 메소드를 실행하십시오.
- 특정 구성 resources/config/generator-config.xml
- 로그는 매일 저장되며 구체적인 구성은 resources/config/logback-spring.xml 에 있습니다.
- 관리자 사용자 로그를 자동으로 기록하고
@SystemLog
주석을 컨트롤러 에 배치할 수 있습니다.
프런트 엔드:
뷰:
소개
- vue cli3를 기반으로 생성된 프로젝트
- 인터페이스 UI: element-ui
- 네트워크 요청: axios
- 전역 호출 메서드
this.$axios({ url: '', data: {}, success(data) {} });
- url: 도메인 이름 뒤의 주소만 필수입니다.
- 성공: 콜백은 코드가 200인 경우만 처리하면 됩니다.
- 전역 변수와 메소드는 /src/utils 디렉토리에 있습니다.
- /src/assets/sass/element-variables.scss 파일에서 element-ui 스타일을 재정의합니다.
- iconfont 글꼴 라이브러리 소개
- /src/assets/font/iconfont 디렉토리의 파일을 덮어쓰세요.
- 인용문
<i class="iconfont iconfont-address"></i>
- 대부분의 프로젝트에는 댓글이 있습니다.
기본 구성
- 백엔드와 협력하여 동적 라우팅 구현: 기능 관리 양식에 경로를 입력하세요. 기본 루트 경로는 /src/views/index/ 입니다.
- .env.production/development 파일과 vue.config.js 는 구성 파일입니다.
일반적으로 사용되는 캡슐화된 구성 요소( 자세한 설명은 /src/views/index/system/sysUser/를 참조하세요 )
- 대화상자:팝업 상자
- 세부정보: 제목 + 내용 형식으로 데이터 표시
- form: 양식 제출,
@submit
양식 확인 후에만 상황을 처리해야 합니다. - 색인: 일반 팝업 상자
- 테이블: 테이블
- 다음 형식으로 허용되는 반환 예:
{"list":[],"pageNum":1,"pageSize":10}
- 테이블 데이터 요청
tableDataRequest: { url: '', data: {} }
- url: 요청 주소
- 데이터: 상위 검색에 사용되는 추가 매개변수
- 테이블 표시
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ]
배열 허용 ---layui 테이블 참조- 포맷터: 복잡한 디스플레이, dom을 반환할 수 있음
감사의 말
우선, springboot , vue , element-ui 및 기타 훌륭한 오픈 소스 프로젝트 덕분에 두 번째로, 이 프로젝트는 많은 온라인 예제를 참조하고 있다면 답은 하나뿐입니다.