YoYoCms.AbpProjectTemplate
1.0.0
먼저 이 프로젝트에 대해 이야기해보자. 제목처럼 VUE+.NET을 기반으로 개발된 프레임워크이며, 그룹 멤버들이 Vue 버전을 원했던 ABP 프레임워크이기도 합니다. 먼저 홈페이지를 살펴보겠습니다.
정말 멋지네요. 데모 계정을 제공해 드리겠습니다.
데모 주소: http://vue.yoyocms.com/ 계정: 데모 비밀번호: bb123456 물론 확인을 위해 계정을 직접 등록할 수도 있습니다.
먼저 ABP 프레임워크를 모르는 학생들을 위해 ABP 프레임워크가 무엇인지 설명해 보겠습니다.
ABP는 "ASP.NET Boilerplate Project(ASP.NET 샘플 프로젝트)"의 약어입니다. ASP.NET Boilerplate는 모범 사례와 대중적인 기술을 사용하여 최신 WEB 응용 프로그램을 개발하기 위한 새로운 출발점입니다. 이는 보편적인 WEB 응용 프로그램 프레임워크 및 프로젝트 템플릿이 되는 것을 목표로 합니다. 프레임워크 ABP는 최신 ASP.NET CORE, ASP.NET MVC 및 Web API 기술을 기반으로 하는 애플리케이션 프레임워크입니다. 그리고 널리 사용되는 프레임워크와 라이브러리를 사용하여 권한 부여, 종속성 주입, 유효성 검사, 예외 처리, 지역화, 로깅, 캐싱 등과 같은 사용하기 쉬운 공통 기능을 제공합니다. 아키텍처 ABP는 다중 계층 아키텍처(도메인 계층, 애플리케이션 계층, 인프라 계층 및 프레젠테이션 계층)는 물론 도메인 중심 설계(엔티티, 리포지토리, 도메인 서비스, 애플리케이션 서비스, DTO 등)를 구현합니다. 종속성 주입과 같은 모범 사례를 구현하기 위해 좋은 인프라도 구현 및 제공됩니다. 템플릿 ABP는 프로젝트에 대한 시작 템플릿을 쉽게 생성합니다. 기본적으로 가장 일반적으로 사용되는 프레임워크와 라이브러리가 포함되어 있습니다. 또한 단일 페이지(Angularjs) 또는 다중 페이지 아키텍처, EntityFramework 또는 NHibernate를 ORM으로 선택할 수 있습니다. 자세한 내용은 공식 웹사이트를 방문하세요.
이번에 선정된 프로젝트의 구성은 다음과 같습니다.
이전 글 [ABP 프레임워크] Dynamic Web Api의 가로채기 사용법에서는 인증 확인을 위해 토큰을 사용하는 방법에 대해 설명했으며 현재 쿠키 방식을 사용하여 확인하고 있습니다. 그러나 프런트엔드 및 백엔드 개발 방법에는 영향을 미치지 않습니다. 로그인 페이지를 살펴보십시오.
####프론트엔드 1.vue에서 사용되는 프레임워크
2.vuex
3.vue-라우터
4.jquery
1.element-ui
2.파도
3.부트스트랩
4.BSBADMIN
다음은 vue 인터페이스 개선을 위해 시간을 내어 주신 Huixin666님에게 감사드립니다.
개발을 진행하기 전에
es6,sass,vue,vue-router및vuex에 대한 기본 기술 기반이 있다고 가정합니다.
You Yuxi의 조언을 읽어보는 것이 좋습니다.프런트엔드 종속성 설치
Web项目에 Assets 디렉터리를 입력하세요.
$ npm i
프로젝트 실행
먼저 배경을 시작하는 것을 잊지 마세요
$ npm run dev
webpack은 Express를 사용하여 포트 8986으로 웹 서버를 시작합니다.
$ npm run build
이 명령은 모든 파일을
dist디렉터리로 컴파일합니다. 위의 프로젝트 구조 다이어그램을 참조하세요.
src/views 로 이동하여 모듈 디렉터리를 만듭니다.administration 라는 디렉토리를 추가했습니다. 각 모듈에는 components 와 assets 디렉토리도 포함될 수 있습니다. 즉, 해당 모듈의 구성 요소와 리소스는 현재 모듈에만 속합니다.Index.vue 를 상위 라우팅 페이지로 추가하여 이 모듈 아래의 모든 페이지를 제어하세요.User.vue 와 같이 필요한 페이지를 추가하세요.methods 에 fetchData 라는 메소드를 추가하세요. 이 메소드에서는 데이터를 가져온 후 abp.view.setContentLoading(false) 호출하여 콘텐츠 영역의 로딩 마스크 레이어를 닫아야 합니다. (User.vue를 참고하시면 됩니다) src/router 디렉터리에 들어가서 라우팅 모듈 폴더를 추가하고 해당 폴더에 index.js 라는 파일을 추가합니다.src/router/index.js 에 현재 추가된 라우팅 정보를 등록합니다. src/services 디렉터리 roleService.js roleService.js 에서 내보낸 개체는 abp.services.yoyocms.role 에 해당합니다. 이렇게 사용하면 균일하게 관리하고 확장할 수 있다는 장점이 있습니다.위는 ABP vue 버전의 기본 상황입니다.
Vue 버전의 오픈 소스 주소: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate Vue 버전의 데모 주소: http://vue.yoyocms.com/ AngleJS 버전의 오픈 소스 주소: https //github.com/ltm0203/YoYoCms angleJS 버전 데모 주소: http://www.yoyocms.com
좋은 제안이나 버그 피드백이 있으면 github에 문제를 제출해 주세요.
