بناء تطبيق CRUD كامل باستخدام SvelteKit و Prisma
مقدمة
تشرح هذه المقالة كيفية بناء تطبيق CRUD (إنشاء، قراءة، تحديث، حذف) أساسي باستخدام SvelteKit و Prisma. يوفر SvelteKit إطار عمل قويًا لبناء تطبيقات الويب، وتبسط Prisma التفاعلات مع قواعد البيانات.
المتطلبات الأساسية
- تثبيت Node.js و npm (أو pnpm أو yarn)
- معرفة أساسية بـ Svelte و SvelteKit
- Docker (اختياري، لقاعدة بيانات محلية)
إعداد المشروع
-
إنشاء مشروع SvelteKit جديد:
npm create svelte@latest my-crud-app cd my-crud-app npm install
-
تثبيت Prisma:
npm install @prisma/client prisma --save-dev npx prisma init --datasource-provider postgresql
(عدّل مزود مصدر البيانات حسب الحاجة، على سبيل المثال،
mysql
،sqlite
.) -
حدّث ملف
.env
الخاص بك بعنوان URL لقاعدة البيانات. إذا كنت تستخدم Docker، يمكنك استخدام شيء مثل:DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"
-
حدد نموذج البيانات الخاص بك في
prisma/schema.prisma
. على سبيل المثال، نموذجTodo
بسيط:generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" // أو المزود الذي اخترته url = env("DATABASE_URL") } model Todo { id Int @id @default(autoincrement()) text String completed Boolean @default(false) createdAt DateTime @default(now()) }
-
قم بإنشاء عميل Prisma وتشغيل عمليات الترحيل:
npx prisma generate npx prisma migrate dev --name init
بناء نقاط نهاية API (مسارات SvelteKit)
أنشئ نقاط نهاية API في src/routes/api/todos/+server.ts
(GET و POST) و src/routes/api/todos/[id]/+server.ts
(GET و PUT و DELETE):
src/routes/api/todos/+server.ts
(GET & POST)
import { json } from '@sveltejs/kit';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function GET() {
const todos = await prisma.todo.findMany();
return json(todos);
}
export async function POST({ request }) {
const { text } = await request.json();
const todo = await prisma.todo.create({
data: { text },
});
return json(todo, { status: 201 });
}
src/routes/api/todos/[id]/+server.ts
(GET, PUT & DELETE)
import { json, error } from '@sveltejs/kit';
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function GET({ params }) {
const { id } = params;
const todo = await prisma.todo.findUnique({
where: { id: parseInt(id) },
});
if (!todo) {
throw error(404, 'Todo not found');
}
return json(todo);
}
export async function PUT({ params, request }) {
const { id } = params;
const { text, completed } = await request.json();
const todo = await prisma.todo.update({
where: { id: parseInt(id) },
data: { text, completed },
});
return json(todo);
}
export async function DELETE({ params }) {
const { id } = params;
await prisma.todo.delete({
where: { id: parseInt(id) },
});
return json({ success: true });
}
إنشاء الواجهة الأمامية لـ Svelte
-
عرض المهام (
src/routes/+page.svelte
)<script> import { onMount } from 'svelte'; let todos = []; let newTodo = ''; async function fetchTodos() { const response = await fetch('/api/todos'); todos = await response.json(); } async function addTodo() { if (newTodo.trim() === '') return; const response = await fetch('/api/todos', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: newTodo }), }); if (response.ok) { newTodo = ''; await fetchTodos(); } } async function deleteTodo(id) { const response = await fetch(`/api/todos/${id}`, { method: 'DELETE', }); if (response.ok) { await fetchTodos(); } } onMount(fetchTodos); </script> <h1>تطبيق المهام</h1> <input bind:value={newTodo} placeholder="أضف مهمة" /> <button on:click={addTodo}>إضافة</button> <ul> {#each todos as todo (todo.id)} <li> {todo.text} <button on:click={() => deleteTodo(todo.id)}>حذف</button> </li> {/each} </ul>
تشغيل التطبيق
-
ابدأ خادم تطوير SvelteKit:
npm run dev -- --open
خاتمة
يوفر هذا المثال تطبيق CRUD أساسيًا باستخدام SvelteKit و Prisma. يمكنك التوسع في هذا الأساس عن طريق إضافة ميزات مثل تعديل المهام، ووضع علامة عليها كمكتملة، وتنفيذ مصادقة المستخدم. تذكر التعامل مع الأخطاء بأمان وإضافة التحقق المناسب.