다중 사용자 블로그 앱에 nuxt 및 supabase 사용

이 튜토리얼은 Nuxt.js 및 Supabase를 사용하여 다중 사용자 블로깅 응용 프로그램을 구축하여 스타일링 용 테일 윈드 CSS를 활용하고 풍부한 텍스트 편집기의 경우 Vue Simplemde를 보여줍니다. vue.js의 확장 인 nuxt.js는 서버 측 렌더링, 정적 사이트 생성 및 기타 성능 향상을 제공합니다. Supabase는 Postgres 데이터베이스, 실시간 API, 인증 및 파일 스토리지를 특징으로하는 간소화 된 오픈 소스 대안을 제공합니다.

Supabase의 매력은 사용 편의성과 Postgr의 힘에 있으며, NOSQL BAAS 솔루션에서 종종 발생하는 확장 성 문제를 해결합니다. 강력한 쿼리 기능과 내장 실시간 기능은 백엔드 개발 노력을 최소화합니다. Supabase는 또한 직관적 인 행 수준 보안 정책으로 승인을 단순화하고 광범위한 인증 제공 업체 (사용자 이름/암호, Magic Link, Google, Facebook, Apple 등)를 지원합니다.

이 응용 프로그램은 핵심 전체 스택 기능과 같은 사용자 인증, 클라이언트 측 ID 관리, 라우팅, 파일 스토리지 (Supabase를 통해), 데이터베이스 상호 작용, API 계층 및 API 인증을 다룹니다.

응용 프로그램 기능 :

인증되지 않은 사용자는 공개 게시물을 볼 수 있습니다. 등록 된 사용자는 자신의 게시물을 작성, 편집 및 삭제하고 프로필을 관리 할 수 ​​있습니다. 인증은 Supabase의 편리한 Magic Link 시스템을 사용합니다.

응용 프로그램 구축 :

1. Supabase 설정 : 새로운 Supabase 프로젝트를 만듭니다. 그런 다음 SQL을 사용하여 사용자 액세스를 제어하기 위해 적절한 행 수준 보안 정책으로 posts 테이블을 만듭니다 (작성, 읽기, 업데이트, 삭제).

2. nuxt.js 프로젝트 : yarn create nuxt-app (또는 npm init nuxt-app )를 UI 프레임 워크로 선택합니다.

3. 종속성 : 필요한 패키지 설치 : @supabase/supabase-js , vue-simplemde , marked 및 tailwind css 종속성. nuxt.config.js 내에서 Tailwind CSS 및 Vue Simplemde 플러그인을 구성하십시오. Supabase 클라이언트 플러그인을 만들려면 Supabase 클라이언트 인스턴스를 NUXT 응용 프로그램에 주입하십시오.

4. 레이아웃 구성 요소 : layouts/default.vue 구성 요소를 만들고, 내비게이션을 관리하고, 홈, 프로필을위한 링크를 표시하고 (인증 된 사용자의 경우) 게시물 관리 (인증 된 사용자의 경우). 이 구성 요소는 $supabase.auth.user() 사용하여 인증 상태를 확인합니다.

5. 페이지 : 다음 페이지 개발 :

   • pages/index.vue (홈) : 모든 게시물의 목록을 표시합니다.
   • pages/profile.vue : 사용자 가입/사인 (Magic Link) 및 가입을 처리합니다.
   • pages/create-post.vue : 사용자는 vue simplemde 편집기를 사용하여 새 게시물을 만들 수 있습니다.
   • pages/posts/_id.vue : 동적 경로 매개 변수를 사용하여 개별 게시물 세부 정보를 표시합니다.
   • pages/my-posts.vue : 기능을 편집하고 삭제하여 현재 로그인 한 사용자 게시물 목록을 표시합니다.
   • pages/edit-post.vue : 사용자가 기존 게시물을 편집 할 수 있습니다.

6. 데이터 가져 오기 : 각 페이지 구성 요소 내에서 supabase 클라이언트를 사용하여 .from('posts').select('*').filter(...) .

7. 테스트 : npm run dev (또는 yarn dev )를 사용하여 로컬로 응용 프로그램을 실행하십시오.

이 향상된 설명은 응용 프로그램의 아키텍처 및 개발 프로세스에 대한보다 체계적이고 포괄적 인 개요를 제공합니다. 완전한 코드 액세스를 위해 Github 리포지토리 링크가 끝에 포함되어야합니다.

위 내용은 다중 사용자 블로그 앱에 nuxt 및 supabase 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!