본고에서, 나는 명세서 프로그램을 만들어서 웹 응용 프로그램을 만드는 기초 지식을 가르쳐 줄 것이다.ASP NET Core는 생성CRUD API, Vue는 프런트엔드 사용자 인터페이스를 생성하는 데 사용됩니다.이곳에서 얻은 지식을 활용하면 인터넷 앱을 만들기 시작할 수 있을 것이다.GitHub repository에서 전체 솔루션을 찾을 수 있습니다.
먼저 구축 API에서 시작하여 Vue 클라이언트로 이동합니다.

목록 생성 API

먼저 VisualStudio에서 새로운 ASP NET 핵심 웹 API 프로젝트를 만듭니다.


명세서 프로젝트 모델을 만드는 것부터 시작합시다.Models라는 폴더를 만들고 ChecklistItem이라는 파일을 만듭니다.대테러 엘리트

public class ChecklistItem
{
    public int Id { get; set; }
    public string Text { get; set; }
}

데이터베이스에 저장할 때, 이 항목과 텍스트 속성을 유일하게 표시하고, 목록 항목에 입력한 텍스트를 포함하는 Id를 주었습니다.
다음에 우리는 데이터베이스를 설정할 것이다.본 강좌를 간소화하기 위해서 나는 메모리 데이터베이스를 사용했다.이것은 테스트와 프레젠테이션에 좋지만, 실제 응용 프로그램에 대해서는 데이터베이스를 설정해야 합니다. (코드에 있어서는 EF 핵심 옵션에서 데이터 공급자를 변경하는 것처럼 간단합니다.)
먼저 다음 NuGet 패키지를 설치합니다.

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.InMemory

그런 다음 프로젝트의 루트 폴더 AppDbContext에 새 파일을 만듭니다.대테러 엘리트:

using ASPNETCoreVueChecklist.Models;
using Microsoft.EntityFrameworkCore;

namespace ASPNETCoreVueChecklist
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions options) : base(options)
        {
        }

        public DbSet<ChecklistItem> ChecklistItems { get; set; }
    }
}

EF Core는 C# 코드와 데이터베이스 간의 상호 작용을 단순화하는 ORM(객체 관계 맵)입니다.AppDbContext 클래스는 데이터베이스의 레코드에 액세스하는 방법을 제공합니다.ChecklistItems라는 속성과 DbSet 유형을 제공하여 EF Core가 데이터베이스에서 ChecklistItems라는 테이블을 찾을 수 있도록 설정합니다. 이 테이블의 열은 저희 모델에 의해 정의됩니다.
그리고 이 AppDbContext 클래스를 사용하고 메모리에 있는 데이터베이스를 사용하도록 프로그램을 설정하려면 시작한 Configure 서비스 방법으로 가십시오.cs 및 다음 코드 행을 추가합니다.

services.AddDbContext<AppDbContext>(options =>
{
    options.UseInMemoryDatabase(nameof(AppDbContext));
});

마지막으로 ASP NET Core에서 API의 끝점을 정의하는 컨트롤러를 만들어야 합니다.먼저 ChecklistController를 만듭니다.컨트롤러 폴더의 cs 파일:

using Microsoft.AspNetCore.Mvc;

namespace ASPNETCoreVueChecklist.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class ChecklistController : ControllerBase
    {
        private readonly AppDbContext _dbContext;

        public ChecklistController(AppDbContext dbContext)
        {
            _dbContext = dbContext;
        }
    }
}

현재 컨트롤러에는 ApiController 속성이 있습니다. 이 속성은 컨트롤러를 API(표준 ASP NET MVC 컨트롤러가 아님)에 사용하도록 구성합니다. 라우팅 속성은 모든 엔드포인트가 컨트롤러 이름(검사표)을 접두어로 사용됨을 나타냅니다.목록 항목에 액세스하기 위해 AppDbContext 클래스의 인스턴스를 컨트롤러에 주입하고 있습니다.
이제 각 CRUD 방법을 디렉터에 추가하는 프로세스를 안내합니다. 먼저

[HttpPost]
public async Task<int> Create(ChecklistItem item)
{
    _dbContext.ChecklistItems.Add(item);
    await _dbContext.SaveChangesAsync();

    return item.Id;
}

위의 메서드에는 HttpPost 속성이 있으며, 이는 POST 메서드를 사용하여 Http 요청 방문만 보낼 수 있음을 의미합니다.이것은 API에서 레코드를 생성하는 표준입니다.이 메서드에 전달된 텍스트 매개 변수를 사용하여 ChecklistItem의 새 인스턴스를 만듭니다.항목이 데이터베이스에 저장될 때 고유한 Id가 자동으로 설정되므로 사용자가 직접 Id를 설정하는 것은 걱정할 필요가 없습니다.다음 줄에서 이 항목을 데이터베이스에 추가한 다음 저장합니다.우리는 최종적으로 새로운 프로젝트 Id를 클라이언트에게 되돌려 주었다.
이어서 우리는 계속 읽을 것이다.이러한 API에는 일반적으로 두 가지 읽기 방법이 있습니다. 하나는 모든 항목을 나열하는 데 사용되고, 다른 하나는 제공된 Id와 일치하는 항목을 반환하는 데 사용됩니다.

[HttpGet]
public async Task<IEnumerable<ChecklistItem>> Get()
{
    var items = await _dbContext.ChecklistItems.ToListAsync();

    return items;
}

[HttpGet("{id}")]
public async Task<ChecklistItem> Get(int id)
{
    var item = await _dbContext.ChecklistItems.FirstOrDefaultAsync(item => item.Id == id);

    return item;
}

첫 번째 방법은 컨트롤러에서 HTTP GET 방법(/checklist)을 사용할 때 모든 목록 항목의 목록을 반환하도록 설정합니다.두 번째는 URL에서 테이블 항목을 검사해야 하는 Id (/checklist/1) 로 설정하는 것과 유사합니다.이것은 Id를 매개 변수로 하고 데이터베이스에서 이 Id를 가진 항목을 검색합니다. 그러면 하나의 Id를 클라이언트에게 되돌려줍니다.
다음 방법은 업데이트입니다.

[HttpPut("{id}")]
public async Task<bool> Update(int id, ChecklistItem item)
{
    var existingItem = await _dbContext.ChecklistItems.FirstOrDefaultAsync(i => i.Id == id);
    existingItem.Text = item.Text;
    var result = await _dbContext.SaveChangesAsync();

    return result > 0;
}

일반적으로 업데이트는 HTTP PUT 방법을 통해 이루어지며, 업데이트를 원하는 항목의 Id (목록/1) 로 루트를 설정합니다.먼저 업데이트할 항목을 검색하고 텍스트를 수정한 다음 데이터베이스에 저장합니다.SaveChangeAsync의 반환 값은 업데이트된 항목의 수를 나타내는 정수입니다.따라서 업데이트 항목의 수가 0보다 많은지 확인함으로써 업데이트가 성공했음을 알 수 있습니다.
마지막으로 삭제 방법:

[HttpDelete("{id}")]
public async Task<bool> Delete(int id)
{
    var item = await _dbContext.ChecklistItems.FirstOrDefaultAsync(item => item.Id == id);
    _dbContext.ChecklistItems.Remove(item);
    var result = await _dbContext.SaveChangesAsync();

    return result > 0;
}

이전 방법과 마찬가지로 삭제할 항목의 ID가 URL에 포함되어 있지만 이번에는 HTTP DELETE 메서드를 사용합니다.이것은 약간 이상한 것 같지만 EF Core에서 항목을 삭제하는 방법은 먼저 데이터베이스에서 항목을 검색하고 삭제하도록 설정한 다음에 데이터베이스(레코드 삭제)를 저장하는 것이다.
우리가 해야 할 마지막 일은 창업 회사에 가는 것이다.Configure 메서드에 CORS 정책을 추가합니다.이것은 응용 프로그램 사이에 나타날 것이다.HttpSreDirection() 및 애플리케이션을 사용합니다.UseRouting() 행.이것은 웹 API가 클라이언트로부터 요청을 받아들일 수 있도록 합니다. (주의: 새 Vue 프로그램의 기본 포트는 8080이지만, 포트가 다르면 클라이언트의 포트를 사용하도록 코드를 업데이트하십시오.)

 app.UseCors(builder =>
{
    builder
        .WithOrigins("http://localhost:8080")
        .AllowAnyMethod()
        .AllowAnyHeader();
});

이것이 바로 우리가 지금 완성한 API다.모든 CRUD 작업은 HTTP 방법을 사용하여 액세스할 수 있습니다.이제 Vue 프런트엔드를 계속 생성하여 이러한 API 메소드에 액세스할 수 있습니다.

목록 클라이언트 만들기

먼저 Vue CLI가 설치되어 있는지 확인합니다.없으면 this page를 방문하십시오.그런 다음 프로젝트의 루트 폴더로 이동하여 다음 명령을 실행하여 Vue 프로젝트를 만듭니다.

vue create checklist-client

우선 빈 목록을 만듭니다.vue 파일은components 폴더에 있습니다.응용 프로그램에 들어갑니다.목록 구성 요소를 간단하게 표시하기 위해 vue를 업데이트합니다.

<template>
  <div id="app">
    <Checklist/>
  </div>
</template>

<script>
import Checklist from './components/Checklist.vue'

export default {
  name: 'App',
  components: {
    Checklist,
  }
}
</script>

다음은 명세서를 엽니다.vue 파일.먼저 목록 항목을 만들기 위한 입력을 만들 것입니다.

<template>
  <div>
    <input type="text" v-model="newItemText" />
    <button @click="onClickSave"> Save </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItemText: ''
    }
  },
  methods: {
    async onClickSave() {
      await fetch('https://localhost:5001/checklist', {
        method: 'POST',
        data: this.newItemText
      })

      this.newItemText = ''
    }
  }
}
</script>

여기에 newItemText 데이터 속성에 바인딩된 값을 입력합니다. 이것은 값에 대한 변경 사항이 입력과 속성에 반영된다는 것을 의미합니다.이 단추를 눌렀을 때 onClickSave 방법을 호출하는save 단추를 만들었습니다.onClickSave 방법에서/checklist 단점에 있는 API에 POST 요청을 보냅니다.데이터는 입력 필드에 포함된 텍스트일 뿐입니다.요청이 성공하면 입력 텍스트가 지워집니다.
내가 사용하는 포트는 당신과 다를 수 있으니 주의하십시오.API 항목을 확인하고 API가 실행 중인 포트를 확인하십시오.
이 단계에서 우리는 새로운 명세서 항목을 만들 수 있지만, 우리는 그것들을 볼 수 없다.데이터베이스에서 추출한 항목 목록을 만듭니다.먼저 items라는 데이터 속성을 만듭니다.

data() {
  return {
    newItemText: '',
    items: []
  }
},

그런 다음 methods 객체에 loadItems 메서드를 작성합니다.

async loadItems() {
  await fetch('https://localhost:5001/checklist', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ text: this.newItemText })
  })

  this.newItemText = ''
}

이것은/checklist를 HTTP GET 호출합니다. (fetch의 기본 설정이기 때문에 명시적으로 정의할 필요가 없습니다.)그리고 응답을 JSON으로 처리하고 결과 항목 목록을 새로 만든items 속성으로 설정합니다.
우리는 페이지를 처음 방문할 때 이 데이터를 불러오기를 희망합니다.이를 위해 Vue 객체의 루트 디렉토리에 있는 mounted 메서드를 사용합니다.자세한 내용은 GitHub repo 참조) 페이지가 처음 로드될 때 호출됩니다.

async mounted() {
  await this.loadItems()
},

또한 새 항목을 만들 때 목록을 업데이트하려면 onClickSave 메서드의 끝에 이 줄(wait this.loadItems()을 추가해야 합니다.
그런 다음 태그에 목록 항목을 작성하여 방금 가져온 항목을 표시합니다.

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

우리가 해야 할 마지막 일은 사용자가 기존 항목을 삭제할 수 있도록 하는 것이다.이를 실현하기 위한 방법을 만들겠습니다.

async onClickDelete(id) {
  await fetch(`https://localhost:5001/checklist/${id}`, {
    method: 'DELETE'
  })

  await this.loadItems()
}

그리고 모든 목록 항목에 이 목록 항목을 삭제하는 단추를 만듭니다.프로젝트 Id는 onClickDelete 메서드에 전달되고 이 메서드는 URL 매개 변수로/checklist/: Id 엔드포인트에 전달됩니다.

<li v-for="item in items" :key="item.id">
  {{ item.text }}
  <button @click="onClickDelete(item.id)"> Delete </button>
</li>

이렇게두 항목이 모두 실행 중인지 확인하고 브라우저에서 Vue 항목을 엽니다.이제 새 항목을 만들고, 기존 항목의 목록을 보고, 기존 항목을 삭제할 수 있어야 합니다.

결론

이 문서에서, 나는 ASP NET Core를 사용하여 기본적인 CRUD API를 만들고, 이를 Vue 전단에 연결해서 명세서 웹 응용 프로그램을 만드는 방법을 보여 드리겠습니다.GitHub 재구매 계약here을 찾을 수 있습니다.
나의 게시물은 주로 무더기에 관한 것이다.NET 및 Vue 웹 개발어떤 댓글도 놓치지 않도록 본 블로그와subscribe to my newsletter를 주목해 주십시오.만약 당신이 이 문장이 매우 유용하다고 생각한다면, 좋아하고 공유해 주십시오.너도 인터넷에서 나를 찾을 수 있다.