헤드리스 CMS를위한 vue 프론트 엔드를 만드는 방법

현대적이고 효율적인 블로그 플랫폼 구축 : vue.js와 graphcms의 완벽한 조합

코어 포인트 :

<.> vue.js 및 graphcms를 사용하여 현대적이고 효율적인 블로그 플랫폼을 구축하여 JavaScript의 속도와 유연성과 GraphQL의 강력한 쿼리 기능을 완전히 플레이합니다. GraphCMS는 GraphQL을 통해 컨텐츠를 제공 할 수 있기 때문에 선택됩니다. 이는 하나의 요청에서 복잡한 쿼리가 여러 모델에서 데이터를 추출 할 수 있기 때문에 효율성의 전통적인 휴식보다 낫습니다. Babel 및 Router와 같은 기본 기능을 포함하여 VUE CLI를 사용하여 vue.js 프로젝트를 설정하고 API 상호 작용을위한 부트 스트랩 뷰 및 Axios를 사용하여 UI 구성 요소를 향상시킵니다.

vue.js에서 동적 라우팅을 구현하여 다양한 컨텐츠 범주와 개별 게시물보기를 처리하여 원활한 사용자 탐색 경험을 보장합니다.

카테고리 또는 개별 슬러그를 기반으로 기사를 검색하고 이러한 쿼리를 vue.js 구성 요소에 통합하는 GraphQL 쿼리를 작성하여 GraphCMS에서 기사를 가져오고 표시합니다.
• GraphQL 돌연변이를 사용하여 새로운 주석을 만들고 페이지를 다시로드하지 않고 UI를 즉시 업데이트하여 댓글 시스템과 같은 블로그의 대화식 기능을 확장합니다.
• 이 안내서는 vue.js 및 GraphCMS (헤드리스 CMS 플랫폼)를 사용하여 최신 블로그 웹 사이트를 구축하는 방법을 안내합니다.
오늘 블로그를 빨리 시작하려면 WordPress를 직접 사용하는 것이 좋습니다.
• 그러나 미디어 거인이고 가능한 한 빨리 여러 장치에 콘텐츠를 전달하고 싶다면 어떻게해야합니까? 콘텐츠를 광고 및 기타 타사 서비스와 통합해야 할 수도 있습니다. WordPress 로이 작업을 수행 할 수 있지만이 플랫폼에서 문제가 발생합니다.
• 추가 기능을 구현하려면 플러그인을 설치해야합니다. 플러그인이 많을수록 웹 사이트가 느려집니다.
PHP는 대부분의 JavaScript 웹 프레임 워크에 비해 상당히 느립니다. 개발자의 관점에서 볼 때 JavaScript 기반 프론트 엔드에서 사용자 정의 기능을 구현하는 것이 훨씬 쉽고 빠릅니다.
브라우저로드 테스트에서 JavaScript는 PHP보다 더 잘 수행됩니다. 또한 현대 자바 스크립트와 생태계는 새로운 웹 경험을 빠르게 구축하는 데있어보다 즐거운 개발 경험을 제공합니다.
처음부터 vue.js를 배우고 싶습니까? 이 기사는 Advanced Library에서 발췌 한 것입니다. Sitepoint Premium에 가입하여 한 달에 $ 9의 기본, 프로젝트, 팁 및 도구를 다루는 Vue 책을 완전히 모으십시오.

따라서 헤드리스 CMS 솔루션 (콘텐츠 관리에 사용되는 백엔드)의 수가 증가했습니다. 이 접근법을 통해 개발자는 선택한 JavaScript 프레임 워크를 사용하여 빠르고 대화식 프론트 엔드를 구축하는 데 집중할 수 있습니다. JavaScript 기반 프론트 엔드를 사용자 정의하는 것은 WordPress 웹 사이트를 변경하는 것보다 훨씬 쉽습니다.

GraphCMS와 대부분의 헤드리스 CMS 플랫폼의 차이점은 휴식 대신 콘텐츠를 제공한다는 것입니다. 이 새로운 기술은 한 번의 요청에서 여러 모델에 속하는 데이터와 관련된 쿼리를 구축 할 수 있기 때문에 REST보다 낫습니다.

다음 모델 패턴을 고려하십시오

기사

ID : 숫자

제목 : 문자열 내용 : 문자열 주석 : 주석 배열

주석
ID : 숫자
• 이름 : 문자열 메시지 : 문자열
위의 모델에는 일대일이 있습니다 (논평 할 기사). 모든 링크 댓글 레코드가 첨부 된 단일 기사 레코드를 얻는 방법을 살펴 보겠습니다.
• 데이터가 관계형 데이터베이스에있는 경우 비효율적 인 SQL 문을 구성하거나 데이터를 깨끗하게 얻기 위해 두 개의 SQL 문을 구성해야합니다. 데이터가 NOSQL 데이터베이스에 저장되면 아래와 같이 Vuex ORM과 같은 최신 ORM을 사용하여 데이터를 쉽게 얻을 수 있습니다.
• 매우 간단합니다! 이 데이터를 REST를 통해 대상 클라이언트에게 쉽게 전달할 수 있습니다. 그러나 문제는 다음과 같습니다. 클라이언트의 데이터 요구 사항이 변경 될 때마다 백엔드 코드로 돌아와 기존 API 엔드 포인트를 업데이트하거나 필요한 데이터 세트를 제공하는 새 엔드 포인트를 생성해야합니다. 이 앞뒤 과정은 힘들고 반복적입니다.
클라이언트 수준에서 추가 작업을 수행하지 않고 필요한 데이터를 요청하면 백엔드가 데이터를 제공합니까? 글쎄, 그게 그래프 QL의 목적입니다.

전제 조건 우리가 시작하기 전에이 안내서는 고급 사용자에게 중간을위한 것이라고 지적하고 싶습니다. 기본 사항을 설명하지는 않지만 GraphCMS를 백엔드로 사용하여 vue.js 블로그를 빠르게 구축하는 방법을 보여줍니다. 다음 영역에서 능숙해야합니다.

es6 및 es7 javaScript

vue.js (CLI 버전 3 사용) GraphQL
• 이것은이 튜토리얼을 시작하기 위해 알아야 할 모든 것입니다. 또한 REST 사용에 대한 배경 지식은 자주 인용하므로 매우 유용합니다. 검토하려면이 게시물이 도움이 될 수 있습니다. "REST 2.0이 여기에 있고 이름은 GraphQL입니다".
프로젝트에 대해 우리는 기본 주석 시스템을 사용하여 매우 간단한 블로그 응용 프로그램을 구축 할 것입니다. 완성 된 프로젝트를보기 위해 액세스 할 수있는 링크는 다음과 같습니다.
• codesandbox.io demo github 저장소
• 는 읽기 전용 토큰이 데모에 사용되므로 주석 시스템이 작동하지 않습니다. 이 튜토리얼에 설명 된대로 공개 허가 토큰 및 엔드 포인트를 제공하여 작동하도록해야합니다.
GraphCMS Project 데이터베이스 생성 GraphCMS 웹 사이트로 이동하여 "무료로 빌드 시작"버튼을 클릭하십시오. 등록 페이지로 이동합니다.
선호하는 방법을 사용하여 등록하십시오. 계정 인증 및 확인 프로세스를 완료 한 후 기본 대시 보드에 액세스 할 수 있어야합니다. </prefer></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const post = Post.query() .with('comments') .find(1);
로그인 후 복사
로그인 후 복사

로그인 후 복사