Vue 3 및 Composition API를 사용하여 보고 애플리케이션을 만드는 방법은 무엇입니까?

Vue는 개발자가 웹 애플리케이션을 만들 수 있는 JavaScript 프레임워크입니다. 주로 단일 페이지 웹 애플리케이션을 구축하는 데 사용됩니다. vue를 사용하여 간단한 구조, 경량, 구성 요소 기반 아키텍처 등과 같은 웹 애플리케이션을 만들면 많은 이점이 있습니다.

이 튜토리얼을 시작하기 전에 보고 애플리케이션 및 구성 API를 살펴보겠습니다.

보고 애플리케이션은 유용한 데이터를 적절한 형식(예: 표 형식)으로 표시하는 단일 또는 다중 페이지 웹 애플리케이션입니다. 특정 형식으로 데이터를 표시하는 보고서에 사용됩니다.

Composition API를 사용하면 개발자가 수명 주기가 아닌 논리를 기반으로 코딩할 수 있습니다. Vue 애플리케이션에서 유지 관리가 더 용이하고 모듈화된 코드를 만들 수 있습니다.

이제 "https://jsonplaceholder.typicode.com/posts" API를 사용하여 Vue 애플리케이션에서 데이터를 가져오고 테이블의 모든 데이터 형식을 지정하겠습니다.

사용자는 Vue 애플리케이션 생성을 시작하려면 아래 단계를 따라야 합니다.

• 1단계 - 첫 번째 단계에서 사용자는 로컬 컴퓨터에 vue를 설치해야 합니다. 터미널을 열고 다음 명령을 실행합니다.

으아악

• 2단계 - 이제 터미널에 다음 명령을 입력하여 Vue 애플리케이션을 시작합니다. 여기서 "reporting-app"은 애플리케이션 이름입니다.

으아악

• 3단계 - vue 애플리케이션이 성공적으로 생성되었습니다. 이제 터미널에서 다음 명령을 실행하여 프로젝트 디렉터리로 들어갑니다.

으아악

• 4단계 - 다음으로 터미널에서 다음 명령을 실행하여 vue 애플리케이션에 필요한 종속성을 설치해야 합니다.

으아악

우리는 API 요청을 만들기 위해 axios를 설치하고 애플리케이션 라우팅을 처리하기 위해 vue-router를 설치했습니다.

• 5단계 - 이제 “src” 프로젝트 디렉토리에 “router.js” 파일을 생성합니다. 그런 다음 파일에 다음 코드를 추가합니다.

파일 이름 – router.js

으아악

위 코드의 HomeView 및 ReportTable 구성 요소를 관련 파일에서 가져왔습니다. 그런 다음 "/" 및 "/report" 라우터를 생성하고 내보냈습니다.

• 6단계 - "main.js" 파일에서 애플리케이션의 라우터 구성을 설정합니다. main.js 파일에 다음 코드를 추가합니다.

파일 이름 – main.js

으아악

위 코드에서는 라우터 구성 요소를 가져와서 app.use() 메서드를 통해 애플리케이션과 함께 사용했습니다.

• 7단계 - 다음으로 특정 라우터 기반 구성 요소를 표시하려면 "App.vue" 파일을 설정해야 합니다. App.vue 파일에 다음 콘텐츠를 추가합니다.

파일 이름 – App.vue

으아악

• 8단계 - 이제 웹페이지에 렌더링될 구성요소를 생성하겠습니다. 먼저 'src' 디렉토리에 'views' 폴더를 만들고 그 안에 'homeview.vue' 파일을 만듭니다.

이후 파일에 다음 코드를 추가하세요.

파일 이름 – Homeview.vue

으아악

위 코드에서는 웹페이지에 "Home"을 렌더링합니다.

• 9단계 - 이제 "views" 디렉터리에 ReportTable.vue 구성 요소를 만들어야 합니다. 그런 다음 파일에 다음 코드를 추가합니다.

파일 이름 – ReportTable.vue

으아악

위 코드에서는 구성 API의 "reactive" 함수를 사용하여 "reports" 배열을 포함하는 반응 상태 객체를 생성합니다.

구성 요소가 웹 페이지에 마운트될 때마다 "onMount()" 메서드를 사용하여 axios를 통해 API에서 데이터를 가져옵니다. 그런 다음 보고서 배열에 응답을 저장하고 상태 개체를 반환합니다.

템플릿 코드의 데이터를 표현하기 위해 테이블을 만들었습니다. 그런 다음 States 객체에서 보고서 배열에 액세스하고 for 루프를 사용하여 모든 데이터를 반복하고 테이블 행에 표시합니다. 또한 테이블 스타일도 지정했습니다.

여기서 사용자는 구성 API를 사용하여 상태 객체를 반응형으로 만들기 때문에 구성 요소 수명 주기를 사용하여 데이터를 업데이트하지 않는다는 것을 알 수 있습니다. 따라서 API의 응답이 업데이트될 때마다 자동으로 데이터를 다시 렌더링합니다.

• 10단계 - 프로젝트 디렉터리에서 다음 명령을 실행하여 프로젝트를 실행합니다.

으아악

이제 사용자는 http://192.168.110.33:8080/report URL을 열어 API 데이터를 표 형식으로 확인해야 합니다. 아래와 같이 출력이 표시됩니다.

사용자는 이 튜토리얼에서 구성 API의 기능을 사용하는 방법을 배웠습니다. 위에서 언급했듯이 구성 API를 사용할 때 "reactive()" 함수를 사용하여 변수나 객체를 반응형으로 만들 수 있으므로 라이프 사이클을 처리할 필요가 없습니다. 또한 사용자는 데이터를 업데이트하는 구성 API를 시험해 보고 반응 변수가 업데이트될 때 웹 페이지가 어떻게 다시 렌더링되는지 관찰할 수 있습니다.

위 내용은 Vue 3 및 Composition API를 사용하여 보고 애플리케이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!