حتماً برات پیش اومده که داری یه پروژه خفن فرانت‌اند (با ری‌اکت، ویو، آنگولار یا حتی جاوا اسکریپت خام) میزنی و کلی هم روی خوشگلی UI و انیمیشن‌هاش وقت گذاشتی. حالا وقت چیه؟ وقت اینه که به یه دیتابیس وصل بشی و دیتاها رو به صورت واقعی رندر کنی.

اما یه مشکل بزرگ وجود دارد: بکند پروژه هنوز آماده نیست! یا شاید اصلاً داری یه پروژه شخصی می‌زنی و اصلاً دلت نمی‌خواد درگیر یادگیری Node.js، ساخت API با Express، ست کردن دیتابیس ‌های غول ‌بی ‌شاخ ‌و دمی مثل MongoDB یا SQL و جنگیدن با CORS بشی. شما فقط یه بکند تستی و سریع می‌خوای تا کارت رو راه بندازه.

اینجاست که ابزاری به اسم JSON Server وارد می‌شه و کاری می‌کنه که توی ۱۰ ثانیه، یه دیتابیس و REST API کامل و واقعی داشته باشی؛ اونم بدون نوشتن حتی یک خط کد بکند!

JSON Server اصلاً چیه و چرا نجات‌دهنده‌ست؟

به زبان خیلی ساده، JSON Server یه ابزار بر پایه Node.js هست که یک فایل ساده با پسوند .json رو ازت می‌گیره و اون رو تبدیل می‌کنه به یه REST API کامل.

جذابیت ماجرا اینجاست که این API فقط برای نمایش دیتا (GET) نیست؛ تو می‌تونی بهش دیتای جدید بفرستی (POST)، دیتاها رو آپدیت کنی (PUT/PATCH) و یا حذفشون کنی (DELETE). هر تغییری هم که ایجاد کنی، فوراً روی همون فایل JSON ذخیره می‌شه. یعنی یه دیتابیس واقعی و زنده!

راه اندازی دیتابیس در ۳ قدم

برای شروع، تنها چیزی که نیاز داری اینه که Node.js روی سیستمت نصب باشه. حالا مراحل زیر رو برو تا جادو رو ببینی:

قدم اول: ساخت فایل دیتابیس

توی پوشه پروژه‌ات یه فایل به اسم db.json بساز و یه سری دیتای فرضی (مثلاً برای یک وبلاگ یا فروشگاه) داخلش بنویس. شکلش باید این‌طوری باشه:

{
  "posts": [
    { "id": "1", "title": "یادگیری ری‌اکت در نیم ساعت", "views": 120 },
    { "id": "2", "title": "چرا JSON Server خیلی خفنه؟", "views": 450 }
  ],
  "comments": [
    { "id": "1", "text": "پست اول عالی بود!", "postId": "1" }
  ],
  "profile": { "name": "Milad" }
}

قدم دوم: روشن کردن موتور بکند!

ترمینال (یا همون CMD) رو توی پوشه پروژه‌ات باز کن و این دستور رو بنویس و اینتر بزن:

npx json-server --watch db.json --port 8000

نکته: آپشن --watch باعث می‌شه که هر تغییری توی فایل دیتابیس دادی فوراً اعمال بشه و --port 8000 هم پورت سرور رو روی ۸۰۰۰ تنظیم می‌کنه تا با پورت‌های پیش‌فرض فرانت‌اندت تداخل نداشته باشه.

قدم سوم: تماشا و لذت بردن!

تمام شد! سرور تستی تو آماده‌ست. اگر توی مرورگرت آدرس http://localhost:8000/posts رو باز کنی، می‌بینی که تمام پست‌ها رو به صورت جفت‌وجور بهت تحویل میده.

چطوری از این دیتابیس استفاده کنیم؟

وقتی JSON Server رو روشن می‌کنی، بر اساس کلیدهایی که توی فایل db.json نوشتی (مثل posts و comments)، به صورت خودکار برات مسیر (Route) می‌سازه. به جدول زیر نگاه کن تا ببینی چقدر راحت می‌تونی با جاوا اسکریپت و متد fetch یا کتابخونه axios باهاش کار کنی:

نوع درخواست (Method) آدرس (URL) کارایی
GET /posts گرفتن لیست تمام پست‌ها
GET /posts/1 گرفتن اطلاعات پست شماره ۱
POST /posts ساختن یک پست جدید (با فرستادن اطلاعات در body)
PUT / PATCH /posts/1 ویرایش اطلاعات پست شماره ۱
DELETE /posts/1 حذف کامل پست شماره ۱

مثلاً برای اضافه کردن یه پست جدید از سمت فرانت‌اند، کافیه چنین کدی بزنی:

fetch('http://localhost:8000/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'مقاله جدید من', views: 0 })
})
.then(res => res.json())
.then(data => console.log("با موفقیت ذخیره شد:", data));

به محض اجرای این کد، اگه بری فایل db.json رو نگاه کنی، می‌بینی که خود این ابزار یه id خودکار به پست جدیدت داده و اون رو ته فایل ذخیره کرده! این یعنی معجزه!

امکانات پیشرفته

فکر نکن چون ساده‌ست، امکاناتش کمه. JSON Server کلی قابلیت خفن درون‌خودش داره که فقط با دستکاری آدرس مرورگر (Query Parameters) می‌تونی ازشون استفاده کنی:

  • فیلتر کردن دیتا (Filter): می‌خوای فقط پست‌هایی رو بگیری که تعداد لایک یا بازدید مشخصی دارن؟http://localhost:8000/posts?views=450

  • مرتب‌سازی (Sorting): می‌خوای پست‌ها بر اساس بیشترین بازدید مرتب بشن؟ http://localhost:8000/posts?_sort=views&_order=desc

  • صفحه‌بندی (Pagination): برای ساختن دکمه‌های «صفحه بعد و قبل»، به راحتی دیتا رو صفحه‌بندی کن (مثلاً صفحه ۱، هر صفحه ۵ تا آیتم): http://localhost:8000/posts?_page=1&_limit=5

  • جستجو (Full-text search): می‌خوای یه باکس سرورست سرچ بسازی؟ کلمه مورد نظرت رو به q پاس بده تا توی کل دیتابیس بگرده:http://localhost:8000/posts?q=ری‌آکت

جمع بندی

به عنوان یک توسعه‌دهنده وب، زمان طلاست. نباید وقتت رو برای ساختن بکندهای موقتی که قراره بعداً با بکند اصلی تیم تعویض بشن تلف کنی. JSON Server این فرصت رو بهت میده که تمام تمرکز رو بذاری روی منطق فرانت‌اند، کامپوننت‌ها و استایل‌ها.