CRUD dengan Server Actions
Laksanakan operasi Cipta, Baca, Kemas Kini dan Padam (CRUD) pada pangkalan data anda menggunakan Server Actions.
CRUD dengan Server Actions ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.
CRUD: Memudahkan Tindakan Pangkalan Data
Selamat datang ke operasi CRUD dengan Tindakan Pelayan Next.js! CRUD ialah singkatan bagi Cipta, Baca, Kemas Kini dan Padam. Keempat-empatnya ialah operasi asas untuk berinteraksi dengan mana-mana pangkalan data.
Tindakan Pelayan menyediakan cara yang berkuasa untuk menjalankan operasi ini secara terus pada pelayan, sekali gus mengecilkan himpunan sisi klien dan meningkatkan keselamatan.
Imbas Kembali: Prisma & Tindakan Pelayan
Dalam pelajaran sebelumnya, kita telah menyediakan Prisma. Kita akan menggunakan Klien Prisma untuk berinteraksi dengan pangkalan data. Ingat, Tindakan Pelayan ialah fungsi tak segerak yang dijalankan pada pelayan.
Tindakan ini boleh ditakrifkan secara terus dalam komponen atau dalam fail actions.js yang berasingan. Kita akan menggunakan model Post yang ringkas untuk contoh kita.
Cipta: Menambahkan Data Baharu
Mari mulakan dengan Cipta. Operasi ini melibatkan penambahan rekod baharu ke pangkalan data anda. Kita akan mencipta borang ringkas yang menggunakan Tindakan Pelayan untuk menambahkan siaran baharu.
Perhatikan bahawa atribut action borang memanggil fungsi pelayan kita secara terus. Ini mengelakkan penggunaan JavaScript sisi klien untuk penghantaran borang.
Cipta: Contoh Kod
Begini cara mencipta siaran baharu menggunakan Tindakan Pelayan. Kita mengimport klien Prisma dan menggunakan kaedah create miliknya.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export default function CreatePostPage() {
async function createPost(formData: FormData) {
'use server';
const title = formData.get('title') as string;
const content = formData.get('content') as string;
await prisma.post.create({
data: { title, content, published: false },
});
revalidatePath('/posts'); // Refresh the posts list
}
return (
<form action={createPost}>
<input type="text" name="title" placeholder="Title" />
<textarea name="content" placeholder="Content"></textarea>
<button type="submit">Add Post</button>
</form>
);
}Baca: Mendapatkan Data Sedia Ada
Operasi Baca mendapatkan data daripada pangkalan data anda. Dalam Penghala Aplikasi Next.js, anda boleh mendapatkan data secara terus dalam Komponen Pelayan.
Ini bermakna logik mendapatkan data anda dijalankan pada pelayan sebelum komponen dihantar kepada klien, sekali gus mempercepatkan masa pemuatan awal.
Baca: Contoh Kod
Berikut ialah Komponen Pelayan yang mendapatkan semua siaran dan memaparkannya. Panggilan await prisma.post.findMany() dijalankan sepenuhnya pada pelayan.
import { prisma } from '@/lib/prisma';
export default async function PostsPage() {
const posts = await prisma.post.findMany();
return (
<div>
<h1>All Posts</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<b>{post.title}</b>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}Kemas Kini: Mengubah Rekod
Operasi Kemas Kini mengubah rekod sedia ada. Biasanya, anda mengenal pasti rekod menggunakan ID uniknya, kemudian menyediakan data baharu.
Sama seperti operasi Cipta, tindakan kemas kini boleh dicetuskan melalui penghantaran borang atau klik butang, lalu melaksanakan logik pada sisi pelayan.
Kemas Kini: Contoh Kod
Tindakan Pelayan ini mengemas kini status penerbitan siaran. Kita mengenal pasti siaran menggunakan id dan menggunakan kaedah update Prisma.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export async function updatePostStatus(id: number, published: boolean) {
'use server';
await prisma.post.update({
where: { id },
data: { published: !published },
});
revalidatePath('/posts');
}
// Example usage in a component:
// <button onClick={() => updatePostStatus(post.id, post.published)}>
// Toggle Publish
// </button>Padam: Mengalih Keluar Data
Akhir sekali, operasi Padam mengalih keluar rekod daripada pangkalan data. Operasi ini sering dicetuskan oleh butang dan memerlukan pengecam unik rekod tersebut.
Sentiasa berhati-hati dengan operasi padam kerana operasi ini biasanya tidak boleh dibuat asal!
Padam: Contoh Kod
Berikut ialah Tindakan Pelayan untuk memadam siaran. Kita menggunakan prisma.post.delete dengan klausa where untuk menentukan rekod yang hendak dialih keluar.
import { prisma } from '@/lib/prisma';
import { revalidatePath } from 'next/cache';
export async function deletePost(id: number) {
'use server';
await prisma.post.delete({
where: { id },
});
revalidatePath('/posts'); // Refresh the posts list
}
// Example usage in a component:
// <button onClick={() => deletePost(post.id)}>
// Delete Post
// </button>Semakan Operasi CRUD
Anda telah mempelajari empat operasi teras CRUD. Operasi manakah yang digunakan untuk mendapatkan data sedia ada daripada pangkalan data?
Imbas Kembali: CRUD dengan Tindakan
Hari ini, anda telah menguasai operasi Cipta, Baca, Kemas Kini dan Padam (CRUD) menggunakan Tindakan Pelayan Next.js dan Prisma.
- Cipta: Menambahkan rekod baharu.
- Baca: Mendapatkan rekod daripada pangkalan data.
- Kemas Kini: Mengubah rekod sedia ada.
- Padam: Mengalih keluar rekod.
Tindakan Pelayan menjadikan operasi ini cekap dan selamat kerana operasi dijalankan secara terus pada pelayan. Anda biasanya memerlukan revalidatePath untuk mengemas kini antara muka pengguna selepas perubahan. Seterusnya, kita akan meneroka migrasi skema pangkalan data!
Pelajari TypeScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Soalan Lazim
Adakah pelajaran “CRUD dengan Server Actions” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “CRUD dengan Server Actions”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “CRUD dengan Server Actions”?
Laksanakan operasi Cipta, Baca, Kemas Kini dan Padam (CRUD) pada pangkalan data anda menggunakan Server Actions. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “CRUD dengan Server Actions” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?
Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyediakan Prisma ORM
- CRUD dengan Server Actions
- Migrasi Skema Pangkalan Data
- Pengisian Awal Pangkalan Data dan Pengumpulan Sambungan