무테키
- 소개
- vue3.0은 springboot와 vue를 기반으로 프론트엔드와 백엔드를 분리한 백엔드 관리 템플릿으로, 프론트엔드에 인터페이스(Restfull API)를 제공하여 빠르게 개발도 가능합니다.
- 이 코드는 Alibaba 코딩 규칙 스캔 및 버그 찾기의 90%를 통과했습니다.
- WEB 측은 다중 단말기 로그인을 지원하며 단말기를 개별적으로 관리할 수 있습니다.
- 사용자 관리, 역할 관리, 부서 관리, 권한 관리, 메뉴 관리, 로그 관리 등
- vue3 ant-design-vue 버전과 vue2 element 버전이 있습니다.
- 이 프로젝트는 완전히 오픈 소스 MIT입니다.
- 별똥별처럼 빛나라!
개발 문서
원래 프로젝트 주소
시작하기 가이드
다음 가이드는 개발 및 테스트를 위해 로컬 컴퓨터에 프로젝트를 설치하고 실행하는 데 도움이 됩니다. 본 프로젝트를 온라인 환경에 배포하는 방법에 대한 자세한 내용은 배포 섹션을 참조하세요.
설치 요구 사항 및 단계
- Java 환경 JDK1.8 설치 및 구성
- mysql 8을 설치하고, 데이터베이스( utf8mb4 , utf8mb4_general_ci )를 생성하고 sql을 가져옵니다(doc 디렉터리 아래).
- redis를 설치하려면 다운로드하여 설치하세요.
- 개발 도구는 lombok 플러그인을 설치해야 합니다. (개발 도구는 IDEA 권장)
- --- 백엔드 작업(문제가 있는 경우 일반적으로 yml 구성 파일의 데이터 소스 구성에 오류가 있음)
- 노드 환경 설치 및 구성
- vue-cli를 설치하고, vue 디렉토리에 들어가서
npm install 실행하세요. - ---프런트 엔드에서
npm run serve 실행합니다( WebStorm 또는 IDEA는 package.json 파일의 6행 왼쪽에 있는 녹색 삼각형을 직접 클릭할 수 있음).
데모 주소
배포
- 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 패키지 경로로 변경하세요.
뒤쪽 끝:
스프링부트, 마이바티스, 레디스
- 소개
- springboot 템플릿을 기반으로 생성된 프로젝트
- 기본 구성
- .yml 파일은 관련 정보를 구성할 수 있습니다.
- config 디렉터리에는 일반적인 모듈 구성이 포함되어 있습니다.
- 필터는 크로스 도메인 , 매개변수 필터링 등으로 구성됩니다.
- 매개변수 필터링 요청은 Jsoup을 사용하여 html 태그를 필터링하여 선행 및 후행 공백을 자동으로 제거합니다 (필터링 수준은 사용자 정의 가능).
- 권한 관리
-
@AuthToken 주석과의 인터페이스, 요청 헤더에 액세스하려면 토큰이 있어야 함 - vue 프런트 엔드 페이지와 협력하여 라우팅을 동적으로 렌더링하고 표시 버튼을 숨깁니다. 버튼은
this.$globalFun.getSessionStorage('buttonMap') (프런트 엔드)에 저장됩니다. - 인터페이스 수준 권한에 맞게 기능 관리 의 메뉴 또는 버튼에 해당하는 API를 개선해야 합니다. 그렇지 않으면 토큰이 존재한 후 기본적으로 허용됩니다.
- 패키징 팩토리는 CURD를 사용하고 BaseService를 상속합니다.
-
baseInsert() 및 baseUpdate() null 값이 있는 필드를 자동으로 필터링합니다.
- 데이터베이스를 기반으로 엔터티 클래스 자동 생성
- org.mybatis.generator.plugin.MyBatisTest.main() 메소드를 실행하십시오.
- 특정 구성 resources/config/generator-config.xml
- 로그는 매일 저장됩니다. 특정 구성은 resources/config/logback-spring.xml에 있습니다.
- 데이터베이스를 기반으로 데이터베이스 문서 자동 생성
- org.screw.ScrewTest.testScrew() 메서드를 실행합니다.
프런트 엔드:
뷰:
소개
- vue cli를 기반으로 생성된 프로젝트
- 인터페이스 UI: element-ui
- 네트워크 요청: axios
- 전역 호출 메서드
this.$axios({ url: '', data: {}, success(data) {} });- url: 도메인 이름 뒤의 주소만 필수입니다.
- 성공: 콜백은 코드가 200인 경우만 처리하면 됩니다.
- 전역 변수 및 메소드는 /src/utils 디렉토리에 있습니다.
- /src/assets/sass/element-variables.scss 파일에서 element-ui 스타일을 재정의합니다.
- 대부분의 프로젝트에는 댓글이 있습니다.
기본 구성
- 백엔드와 협력하여 동적 라우팅을 구현합니다. 기능 관리 양식에 경로를 입력합니다. 기본 루트 경로는 /src/views/main/**/*/Index.vue/ 입니다.
- .env.production/development 파일과 vue.config.js 는 구성 파일입니다.
패키지에서 일반적으로 사용되는 구성 요소
- 대화상자:팝업 상자
- 세부정보: 제목 + 내용 형식으로 데이터 표시
- form: 양식 제출,
@submit 양식 확인 후에만 상황을 처리해야 합니다. - 색인: 일반 팝업 상자
- 테이블: 테이블
- 다음 형식으로 허용되는 반환 예:
{"list":[],"pageNum":1,"pageSize":10} - 테이블 데이터 요청
tableDataRequest: { url: '', data: {} }- url: 요청 주소
- 데이터: 상위 검색에 사용되는 추가 매개변수
- 테이블 표시
tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] 배열 허용 ---layui 테이블 참조- 포맷터: 복잡한 디스플레이, DOM을 반환할 수 있음
감사의 말
우선, springboot , vue , element-ui 및 기타 우수한 오픈 소스 프로젝트 덕분에 두 번째로, 이 프로젝트는 많은 온라인 예제를 참조하고 있다면 답은 하나뿐입니다.
