Menggunakan NUXT dan Supabase untuk aplikasi blog pelbagai pengguna

Tutorial ini menunjukkan membina aplikasi blogging berbilang pengguna menggunakan NUXT.js dan Supabase, memanfaatkan CSS Tailwind untuk gaya dan Vue Simplemde untuk editor teks yang kaya. Nuxt.js, lanjutan Vue.js, menyediakan penyiaran sisi pelayan, penjanaan tapak statik, dan peningkatan prestasi lain. Supabase menawarkan alternatif sumber terbuka kepada Firebase, yang menampilkan pangkalan data Postgres, API masa nyata, pengesahan, dan penyimpanan fail.

Rayuan Supabase terletak pada kemudahan penggunaannya dan kuasa postgres, menangani cabaran skalabilitas yang sering dihadapi dengan penyelesaian NoSQL BaaS. Keupayaan pertanyaan yang mantap dan fungsi masa nyata terbina dalam meminimumkan usaha pembangunan backend. Supabase juga memudahkan kebenaran dengan dasar keselamatan peringkat baris intuitif, dan menyokong pelbagai penyedia pengesahan (nama pengguna/kata laluan, pautan sihir, Google, Facebook, Apple, dll.).

Aplikasi ini merangkumi ciri-ciri stack penuh teras: Pengesahan Pengguna, Pengurusan Identiti Side Pelanggan, Routing, Storan Fail (secara tersirat melalui Supabase), Interaksi Pangkalan Data, Lapisan API, dan Kebenaran API.

Fungsi Aplikasi:

Pengguna yang tidak disahkan boleh melihat jawatan awam. Pengguna berdaftar boleh membuat, mengedit, dan memadam jawatan mereka sendiri, dan menguruskan profil mereka. Pengesahan menggunakan sistem pautan sihir mudah Supabase.

Membina permohonan:

1. Persediaan Supabase: Buat projek Supabase baru. Kemudian, gunakan SQL untuk membuat jadual posts dengan dasar keselamatan peringkat baris yang sesuai untuk mengawal akses pengguna (membuat, membaca, mengemas kini, memadam).

2. Projek Nuxt.js: Inisialisasi Projek Nuxt.js baru menggunakan yarn create nuxt-app (atau npm init nuxt-app ), memilih CSS Tailwind sebagai rangka kerja UI.

3. Ketergantungan: Pasang pakej yang diperlukan: @supabase/supabase-js , vue-simplemde , marked , dan ketergantungan CSS tailwind. Konfigurasikan CSS Tailwind dan plugin Vue Simplemde dalam nuxt.config.js . Buat plugin klien Supabase untuk menyuntik contoh klien Supabase ke dalam aplikasi NUXT.

4. Komponen Layout: Buat layouts/default.vue Komponen untuk menguruskan navigasi, memaparkan pautan untuk rumah, profil, buat pos (untuk pengguna yang disahkan), dan menguruskan siaran (untuk pengguna yang disahkan). Komponen ini menggunakan $supabase.auth.user() untuk memeriksa status pengesahan.

5. Halaman: Membangunkan halaman berikut:

   • pages/index.vue (Laman Utama): Memaparkan senarai semua jawatan.
   • pages/profile.vue : Mengendalikan pendaftaran pengguna/signin (melalui pautan sihir) dan signout.
   • pages/create-post.vue : Membolehkan pengguna membuat jawatan baru menggunakan editor Vue Simplemde.
   • pages/posts/_id.vue : Memaparkan butiran pos individu menggunakan parameter laluan dinamik.
   • pages/my-posts.vue : Memaparkan senarai jawatan pengguna yang sedang dilog masuk, dengan mengedit dan memadam fungsi.
   • pages/edit-post.vue : Membolehkan pengguna mengedit catatan sedia ada mereka.

6. Pengambilan data: Gunakan klien supabase dalam setiap komponen halaman untuk mengambil dan memanipulasi data menggunakan kaedah intuitif seperti .from('posts').select('*').filter(...) .

7. Ujian: Jalankan aplikasi secara tempatan menggunakan npm run dev (atau yarn dev ).

Keterangan yang dipertingkatkan ini memberikan gambaran yang lebih berstruktur dan komprehensif mengenai proses seni bina dan pembangunan aplikasi. Pautan repositori GitHub hendaklah dimasukkan pada akhir untuk akses kod lengkap.

Atas ialah kandungan terperinci Menggunakan NUXT dan Supabase untuk aplikasi blog pelbagai pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!