Utilisation de Nuxt et Supabase pour une application de blogging multi-utilisateurs

Ce didacticiel montre la création d'une application de blogs multi-utilisateurs à l'aide de nuxt.js et de supabase, tirant parti de Tailwind CSS pour le style et Vue Simplemde pour un éditeur de texte riche. Nuxt.js, une extension de Vue.js, fournit un rendu côté serveur, une génération de sites statique et d'autres améliorations de performances. Supabase propose une alternative open-source rationalisée à Firebase, avec une base de données Postgres, une API en temps réel, une authentification et un stockage de fichiers.

L'attrait de Supabase réside dans sa facilité d'utilisation et la puissance des Postgres, relevant des défis d'évolutivité souvent rencontrés avec les solutions NOSQL BAAS. Ses capacités de requête robustes et ses fonctionnalités intégrées en temps réel minimisent l'effort de développement backend. Supabase simplifie également l'autorisation avec ses politiques de sécurité au niveau des lignes intuitives, et prend en charge une large gamme de fournisseurs d'authentification (nom d'utilisateur / mot de passe, Magic Link, Google, Facebook, Apple, etc.).

Cette application couvre les fonctionnalités de base de base: authentification des utilisateurs, gestion de l'identité côté client, routage, stockage de fichiers (implicitement via Supabase), interaction de base de données, couche API et autorisation API.

Fonctionnalité d'application:

Les utilisateurs non authentifiés peuvent afficher les publications publiques. Les utilisateurs enregistrés peuvent créer, modifier et supprimer leurs propres publications et gérer leurs profils. L'authentification utilise le système de liaison magique pratique de Supabase.

Construire la demande:

1. Configuration Supabase: créez un nouveau projet Supabase. Ensuite, utilisez SQL pour créer le tableau posts avec des stratégies de sécurité au niveau des lignes appropriées pour contrôler l'accès des utilisateurs (créer, lire, mettre à jour, supprimer).

2. Nuxt.js Project: Initialisez un nouveau projet nuxt.js à l'aide de yarn create nuxt-app (ou npm init nuxt-app ), en sélectionnant Tailwind CSS comme cadre d'interface utilisateur.

3. Dépendances: Installez les packages nécessaires: @supabase/supabase-js , vue-simplemde , marked et Tailwind CSS Dépendances. Configurer CSS Tailwind et le plugin Vue Simplemde dans nuxt.config.js . Créez un plugin client Supabase pour injecter l'instance client Supabase dans l'application Nuxt.

4. Composant de mise en page: Créez un composant layouts/default.vue Ce composant utilise $supabase.auth.user() pour vérifier l'état de l'authentification.

5. Pages: Développez les pages suivantes:

   • pages/index.vue (home): affiche une liste de tous les messages.
   • pages/profile.vue : gère l'inscription / signin de l'utilisateur (via le lien magique) et la déconnexion.
   • pages/create-post.vue : permet aux utilisateurs de créer de nouveaux articles à l'aide de l'éditeur Vue Simplemde.
   • pages/posts/_id.vue : affiche les détails du post individuel à l'aide d'un paramètre d'itinéraire dynamique.
   • pages/my-posts.vue : affiche une liste des messages de l'utilisateur actuellement connectés, avec des fonctionnalités d'édition et de suppression.
   • pages/edit-post.vue : permet aux utilisateurs de modifier leurs publications existantes.

6. Réponction des données: utilisez le client Supabase dans chaque composant de page pour récupérer et manipuler des données à l'aide de méthodes intuitives comme .from('posts').select('*').filter(...) .

7. Test: Exécutez l'application localement à l'aide de npm run dev (ou yarn dev ).

Cette description améliorée fournit un aperçu plus structuré et complet du processus d'architecture et de développement de l'application. Le lien du référentiel GitHub doit être inclus à la fin pour l'accès complet au code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!