ساختن یک API کوچک و تمیز با Node.js و Express از اون کارهاییه که مستقیم توی پروژههای واقعی به کار میاد؛ از اتصال React/Vue گرفته تا ساخت پنل ادمین یا حتی یه سرویس موبایل.
این مدل API رو میشه دقیقاً بر اساس داک رسمی Express جلو برد:
https://expressjs.com/en/starter/hello-world.html
ایدهمون 👇
یه REST API خیلی ساده برای مدیریت tasks میسازیم که از سمت Frontend (مثلاً React) قابل مصرف باشه:
• گرفتن لیست tasks
• اضافه کردن task جدید
نکته خوبش اینه که هم با ساختار یک Express app آشنا میشی، هم میفهمی چطور JSON رو هندل کنی و پاسخ استاندارد بدی.
اول باید Node.js نصب باشه. بعد توی یه فولدر خالی این کامندها رو بزن:
حالا فایل
حالا:
• با
• توی مرورگر برو به
• برای تست
این ساختار کوچیک، پایه خیلی از پروژههای جدیتره:
• میتونی بعداً auth اضافه کنی.
• میتونی به جای آرایه، از MongoDB یا PostgreSQL استفاده کنی.
• میتونی همین API رو به یه React یا Vue app وصل کنی و یه Todo ساده ولی تمیز بسازی.
امتحانش کن، سرور رو بالا بیار و یه بار واقعی باهاش دیتا رد و بدل کن؛ از اون چیزهاییست که بعدش کار با Backend خیلی طبیعیتر به نظر میرسه. اگر مفید بود، برای بقیه همتیمیها هم بفرست تا همه روی یک استک مشترک تمرین کنید.
🔖 #Web #وب #Frontend #Backend #Node_js #Express #REST_API #Backend #Frontend #JavaScript #Web_Development #Tutorial
👤 Developix
💎 Channel: @DevelopixWeb
این مدل API رو میشه دقیقاً بر اساس داک رسمی Express جلو برد:
https://expressjs.com/en/starter/hello-world.html
ایدهمون 👇
یه REST API خیلی ساده برای مدیریت tasks میسازیم که از سمت Frontend (مثلاً React) قابل مصرف باشه:
• گرفتن لیست tasks
• اضافه کردن task جدید
نکته خوبش اینه که هم با ساختار یک Express app آشنا میشی، هم میفهمی چطور JSON رو هندل کنی و پاسخ استاندارد بدی.
اول باید Node.js نصب باشه. بعد توی یه فولدر خالی این کامندها رو بزن:
npm init -y
npm install express cors
حالا فایل
index.js رو بساز و این کد رو بذار داخلش:const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 3000;
app.use(cors());
app.use(express.json());
let tasks = [
{ id: 1, title: "Learn Express", done: false },
{ id: 2, title: "Build a simple API", done: false }
];
// GET /api/tasks
app.get("/api/tasks", (req, res) => {
res.json(tasks);
});
// POST /api/tasks
app.post("/api/tasks", (req, res) => {
const { title } = req.body;
if (!title) {
return res.status(400).json({ error: "title is required" });
}
const newTask = {
id: tasks.length + 1,
title,
done: false
};
tasks.push(newTask);
res.status(201).json(newTask);
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});حالا:
• با
node index.js سرور رو بالا بیار.• توی مرورگر برو به
http://localhost:3000/api/tasks، باید یه آرایه JSON ببینی.• برای تست
POST از Postman یا افزونه REST Client یا حتی fetch در Frontend استفاده کن.این ساختار کوچیک، پایه خیلی از پروژههای جدیتره:
• میتونی بعداً auth اضافه کنی.
• میتونی به جای آرایه، از MongoDB یا PostgreSQL استفاده کنی.
• میتونی همین API رو به یه React یا Vue app وصل کنی و یه Todo ساده ولی تمیز بسازی.
امتحانش کن، سرور رو بالا بیار و یه بار واقعی باهاش دیتا رد و بدل کن؛ از اون چیزهاییست که بعدش کار با Backend خیلی طبیعیتر به نظر میرسه. اگر مفید بود، برای بقیه همتیمیها هم بفرست تا همه روی یک استک مشترک تمرین کنید.
🔖 #Web #وب #Frontend #Backend #Node_js #Express #REST_API #Backend #Frontend #JavaScript #Web_Development #Tutorial
👤 Developix
💎 Channel: @DevelopixWeb
❤3