ASP에 CRUD 기능을 추가하는 방법10분 이내에 NET Core 어플리케이션 사용 가능

문제.

대부분의 업무 응용 프로그램의 첫 번째 작업 중 하나는 응용 프로그램이 사용하는 주요 실체에 대해 CRUD(창설, 읽기, 업데이트, 삭제) 작업을 수행하는 것이다.
각 개발자는 과제의 일부로서 다음과 같은 문제에 직면해 있습니다.

은 CRUD 페이지와 양식을 작성하는 데 시간이 많이 걸립니다.나를 믿어라, 나는 이미 여러 번 가 보았다.

은 수동으로 실행하면 속도가 매우 느리고 오류가 발생하기 쉽다(필드 누락, 검증 프로그램 잊어버리기 등).

은 물론 VisualStudio에서 제공하는 비계 도구를 사용할 수 있습니다.
그러나 이것은 모든 모델 클래스에 이 도구를 실행해야 하기 때문에 빠른 과정이 아닙니다.
결국 너는 많은 것을 얻었다.정무사 사장 및cshtml 파일, 기본 행동이나 외관 중의 일부 내용이 사용자의 요구에 부합되지 않으면 수동으로 이 파일들을 편집해야 합니다.
모델 클래스가 변경되면 생성된 컨트롤러와 페이지를 수동으로 업데이트해야 합니다
또는 영향을 받은 모든 모델 클래스를 위해 코드와 폼을 처음부터 다시 생성합니다.

또한 내장된 비계라도 페이지 나누기나 검색 같은 중요하고 일반적인 기본적인 기능을 제공할 수 없다.

솔루션: EasyData 라이브러리

대부분의 문제를 해결하기 위해 우리는 EasyData library을 창설했다.
EasyData의 주요 장점은 성명식 방법을 채택했다는 것이다.
전체 과정은 두 가지 주요 단계로 나눌 수 있다.

처리하려는 데이터(엔티티 및 속성) 및
응용 프로그램은 이 데이터(유형, 제약, 실체 간의 관계 등)를 어떻게 처리해야 하는가.

은 이러한 정보를 바탕으로 EasyData 라이브러리는 CRUD 작업에 대한 API 단점과 JavaScript 기반의 일반 사용자 인터페이스를 구축했다
이러한 작업은 API를 통해 수행할 수 있습니다.

여기서 가장 기묘한 것은 실체 프레임의 핵심을 사용할 때
첫 번째 단계(설명 데이터)에 필요한 것은 DbContext뿐입니다.
EasyData는 라이브러리에 "보내기"만 하면 API 끝점 및 CRUD UI 생성에 필요한 모든 정보를 자동으로 추출합니다.

빠른 프레젠테이션

다음은 EasyData의 작동 방식을 설명하는 작은 동영상입니다.

개시하다

먼저 EasyData를 테스트하려면 이 저장소에서 사용할 수 있는 sample projects 중 하나를 열고 실행할 수 있습니다.
프로젝트에 EasyData를 설치하려면 다음 세 가지 간단한 절차가 필요합니다.

1. EasyData NuGet 패키지 설치

EasyData.AspNetCore

EasyData.EntityFrameworkCore.관계형

2. 시작 시 EasyData 중간부품을 추가합니다.프로비저닝

using EasyData.Services;
.    .    .    .    .

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapEasyData(options => {
            options.UseDbContext<AppDbContext>();
        });

        endpoints.MapRazorPages();
    });

중간부품 옵션에서는 메타데이터 소스로 사용할 DbContext 객체의 유형도 지정합니다.

3. 모든 CRUD 작업에 대한 전체 페이지 설정

Razor 페이지를 사용하는 경우 새 페이지(예: EasyData.chstml)를 추가합니다.MVC라면 컨트롤러와 보기가 필요합니다.
이 페이지에서는 특정 접두어로 시작하는 모든 URL을 캡처합니다(기본값은 /easydata이지만 구성 가능).따라서, 우리는 루트 정의 ("/easydata/{**entity}") 에서 특수한catch all 파라미터를 사용했다.
또한 EasyData 스타일과 스크립트 파일(easydata.min.js)을 추가하여 데이터 관리 UI를 구현하고 클라이언트에서 모든 CRUD 작업을 처리합니다.

@page "/easydata/{**entity}"
@{
    ViewData["Title"] = "EasyData";
}
<link rel="stylesheet" href="https://cdn.korzh.com/ed/1.2.2/easydata.min.css" />

<div id="EasyDataContainer"></div>

@section Scripts {
    <script src="https://cdn.korzh.com/ed/1.2.2/easydata.min.js" type="text/javascript"></script>
    <script>
        window.addEventListener('load', function () {
            new easydata.crud.EasyDataViewDispatcher().run()
        });
    </script>
}

이렇게이제 웹 응용 프로그램을 실행하여 /easydata URL을 열고 CRUD 기능을 사용할 수 있습니다.
결과는 다음과 같습니다.

엔티티의 목록 보기 화면:

레코드 편집 대화 상자:

찾기 대화 상자(레코드 편집에서 열기):

작업 원리

이 마법들이 어떻게 작용하는지 간단하게 살펴보자.
앞서 언급한 바와 같이 EasyData는 주로 세 가지 일을 책임진다.

데이터베이스 메타데이터를 수집합니다.

은 주요 때가 끼는 조작을 위해 API를 구축했다.

은 UI(메타데이터 기반)를 구현하고 UI의 모든 사용자 상호 작용을 처리합니다.

이 모든 부분을 상세하게 토론합시다.

메타데이터

메타데이터는 데이터에 관한 데이터이다. 데이터베이스에 어떤 실체(표)가 저장되어 있는지,
그것들이 어떻게 연결되었는지, 그것들의 어떤 속성(필드)이 있는지, 속성의 유형이 무엇인지
우리가 이 속성에 저장할 수 있는 값에 대한 구속은 무엇입니까?
EasyData는 메타데이터를 수집하여 MetaData 클래스의 실례에 저장합니다.
이 객체에는 엔티티(테이블) 목록, 각 엔티티의 속성(필드), 엔티티 간의 연결,
UI 렌더링 및 프로세싱에 사용된 API 및 추가 정보
메타데이터 대상을 채우기 위해 메타데이터 불러오는 프로그램을 지정했습니다.위의 예에서 우리는 UseDbContext 호출을 사용하여 이 점을 실현했다.
따라서 메타데이터는 DbConext 객체에서 로드됩니다.현재 (버전 1.2에서) 유일하게 사용할 수 있는 메타데이터 로더입니다.
향후 릴리즈에서는 DbConnection 객체에서 메타데이터를 직접 로드하거나 다른 방법으로 메타데이터를 로드할 수 있습니다.

EasyData 중간부품

EasyData 중간부품은 CRUD뿐만 아니라 클라이언트가 시작한 모든 CRUD 작업에 대해 REST API를 설정합니다.
파이프에 중간부품을 추가하려면 MapEasyData 구성 위임에서 UseEndpoints 확장 함수를 사용합니다.

   app.UseEndpoints(endpoints =>
    {
       endpoints.MapEasyData(options => {
            options.UseDbContext<AppDbContext>();
        });
    }

이 전화는 MapMvc 또는 MapRazorPages 전에 걸어야 합니다.
기본적으로 EasyData 중간부품은 /api/easydata endpoint에 할당되지만 매개 변수에서 전달되는 구성 함수(작업)를 통해 변경할 수 있습니다.MapEasyData을 설정하는 데 필요한 유일한 일은 메타데이터를 어디에 두는지 알려주는 것이다.
현재 DbContext에서 메타데이터를 가져오는 옵션은 하나만 사용할 수 있습니다.
그래서 이것이 바로 우리가 위의 예에 UseDbContext<AppDbContext>() 호출을 추가한 이유이다.
메타데이터를 가져오는 것 외에 UseDbContext은 우리의 중간부품에 CRUD 조작을 실행하는 모든 방법을 제공했다. (DbContext 대상을 통해)

EasyData 사용자 인터페이스 루트 페이지

EasyData 설정 프로세스의 세 번째 부분은 CRUD 사용자 인터페이스를 보여주는 페이지입니다.
일망타진이라는 Razor 페이지 또는 MVC 뷰여야 합니다.
기본적으로 이 페이지는 /easydata/ 접두사로 시작하는 모든 경로에서 열어야 합니다.
따라서 /easydata/student 또는 /easydata/invoice과 같은 모든 경로는 이 페이지에서 처리해야 합니다.
참고: /easydata은 기본 접두어입니다.
다른 이름을 사용할 수 있지만, 이 예에서는 RootDispatcherView 대상의 옵션에서 지정해야 합니다.
모든 HTML 요소를 포함하는 원샷 페이지입니다.
그러나 CRUD UI가 시각화되고 제대로 작동하는지 확인하려면 다음 네 가지 요소가 포함되어야 합니다.

<link> 요소, EasyData CSS 파일 참조(easydata.min.cs)

용기(빈 div 원소), 그 중에서 우리의 인터페이스를 표시합니다.
기본적으로 ID EasyDataContainer이 있어야 하지만 옵션을 사용하여 구성할 수도 있습니다.

<script> 원소, 참고 easydata.min.js.

과 페이지를 불러올 때 EasyDataViewDispatcher 대상을 만들고 시작하는 작은 스크립트입니다.

너는 위의 입문 부분에서 가장 간단한'일망타진'페이지의 예를 볼 수 있다.

마무리

현재는 EasyData를 사용할 수 있습니다.NET Core 3.1 및깨끗하다
분명히 모든 ASP.NET 코어 및 솔리드 프레임 코어 버전은 의 지정된 버전과 함께 사용할 수 있습니다.NET(코어) 지원.
그러나 이전 버전에 대한 지원을 추가하는 데는 문제가 없을 것이다.순핵심 심지어.NET 프레임 4.x.
필요한 사람이 있으면 EasyData의 GitHub 저장소에서 submit an issue을 찾으십시오.
EasyData는 새로운 프로젝트의 원형을 신속하게 만들거나 POC(개념 검증)를 만들 수 있는 좋은 도구입니다.
우리가 어떤 데이터를 필요로 하는지 알고 있지만, 그 데이터를 사용하는 가장 간단한 조작에 너무 많은 시간을 들이고 싶지 않을 때.
그러나 우리는 최종적으로 생산 환경에서 이 해결 방안을 충분히 사용할 수 있기를 바란다.
따라서, 우리는 당신의 어떤 의견이나 건의를 받기를 기대합니다.물론 GitHub에서 EasyData 저장소를 광고하는 것을 잊지 마십시오. 특히 이 라이브러리가 당신을 도와주고 시간을 절약할 수 있다면.
따라서, 우리는 당신의 어떤 의견이나 건의를 받기를 기대합니다.
물론 EasyData repository on GitHub에 별을 하나 더 주는 것을 잊지 마세요.
특히 이 도서관이 시간을 좀 절약해 줄 수 있다면