از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
مثال‌های Node.js Express: توسعه وب‌سایت‌های رندر شده، REST و Static از زمان رونق WWW در اواخر دهه 90، مسیر طولانی را طی کرده است. ما به عنوان توسعه دهندگان اکنون منابع و ابزارهای بی نهایتی در اختیار داریم. تطبیق پذیری محض ما شگفت انگیز است. با ظهور Node.js و npm، جاوا اسکریپت تبدیل به پرکاربردترین جاوا اسکریپت شده است…
سرفصلهای مطلب
توسعه وب از زمان رونق WWW در اواخر دهه 90 بسیار پیموده است. ما به عنوان توسعه دهندگان اکنون منابع و ابزارهای بی نهایتی در اختیار داریم. تطبیق پذیری محض ما شگفت انگیز است.
با ظهور Node.js و npm، جاوا اسکریپت به پرکاربردترین زبان برنامه نویسی در جهان تبدیل شده است. مثل این است که هر روز یک چارچوب جدید ظاهر می شود. آزار دهنده است، می دانم. اما، بیایید بگیریم روی آموزش هایپ را بخوانید و روش ساخت چیزهای جالب با Node.js را بررسی کنید. اگر هنوز آن را امتحان نکرده اید، آن را دوست خواهید داشت، مطمئنم!
امروز ما با استفاده از چهار نوع مختلف برنامه ایجاد خواهیم کرد Express.js، محبوب ترین فریم ورک Node.js.
قبل از اینکه وارد شویم، باید چند نکته را در مورد Node.js و Express مرور کنیم، فقط برای اینکه بتوانیم یاتاقان‌هایمان را درست کنیم.
پاهایتان را خیس کنید
Node یک رویداد ناهمزمان مبتنی بر زمان اجرا جاوا اسکریپت است روی موتور جاوا اسکریپت V8 کروم. این برای ساخت برنامه های کاربردی شبکه مقیاس پذیر طراحی شده است. جاوا اسکریپت تک رشته ای است، بنابراین قدرت Node در ماهیت ناهمزمان آن نهفته است. رویدادها را بدون مسدود کردن رشته اصلی اجرا مدیریت می کند. به همین دلیل است که Node فوق العاده سریع است، زیرا می تواند اتصالات را همزمان مدیریت کند.
دلیل واقعی منفجر شدن Node.js و محبوب شدن آن به اندازه امروز، مدیریت بسته ای است که برای سوار شدن به آن ارائه می شود. NPM محل ملاقات اصلی برای تمام بسته های Node است، از این رو نام آن است. Node Package Manager، خوب؟ در اینجا می‌توانید ماژول‌های کد مختلفی را برای استفاده در برنامه‌های خود پیدا کنید، یا در صورت تمایل، کد خود را منتشر کنید.
یکی از این ماژول ها Express.js است، یک چارچوب وب بسیار محبوب و مینیمالیستی برای ساخت سریع برنامه های Node.js. Express امروزه فریم ورک اصلی بالفعل برای استفاده با Node.js است. با دلایل زیادی واقعا این فقط یک لایه نازک از انتزاع بنیادی را بدون تغییر ویژگی های اصلی که Node به آن مشهور است، ارائه می دهد. ایجاد هر دو برنامه وب و REST API بدون دردسر را آسان می کند. در واقع آنقدر آسان است که بسیاری از فریمورک های دیگر مبتنی هستند روی بیان!
اکنون می‌پرسید چه نوع برنامه‌هایی را می‌توانید حتی با Express بسازید؟ بیایید یک ثانیه برای صحبت کردن در مورد آن. انواع اصلی که وب پشتیبانی می کند چیست؟ برنامه هایی با صفحات HTML ارائه شده توسط سرور وجود دارند که برای برخی از شما برنامه نویسان قدیمی آشنا هستند. این روش پیش‌فرض برای ایجاد برنامه‌ها در دوران تبلیغات پیش از جاوا اسکریپت بود.
سپس ما REST API ها را داریم. آنها معمولاً برای ارسال و دریافت بارهای JSON، معمولاً به و از پایگاه داده یا سرویس های دیگر استفاده می شوند.
در نهایت ما وب سایت های ساده ایستا داریم. در این سناریو از Express برای چرخش سرور و ارائه این فایل ها استفاده می شود. این یک راه سریع برای ایجاد صفحات فرود یا صفحات بازاریابی برای شرکت ها و استارت آپ ها است.
اول پریدن تو سر
یادگیری از طریق انجام بهترین اصل برای یادگیری هر چیزی است، به خصوص در برنامه نویسی. بیایید شیرجه بزنیم و در طول مسیر چیزهایی را توضیح دهیم.
برنامه های کاربردی ارائه شده توسط سرور
می‌توانید از روی عنوان درست حدس بزنید که این برنامه‌ها چگونه کار می‌کنند؟ صفحات HTML ارائه شده در مرورگر کاربر تولید و رندر می شوند روی سرور. این process رندر سرور نامیده می شود. برنامه هایی مانند این شامل موتورهای قالب و قالب هستند. موتورها HTML نهایی را تولید می کنند page ارائه شود. برخی از موتورهای محبوب عبارتند از Jade، Pug و EJS.
این موتورها چه ویژگی خاصی دارند؟ آنها یک چیز فانتزی به نام درون یابی دارند. این امکان درج متغیرها را در یک الگو یا رشته فراهم می کند. مانند این مثال با Jade: Hello #{world} جایی که world یک متغیر است.
بیایید آن را در عمل بررسی کنیم.
یک دایرکتوری جدید ایجاد کنید و a را باز کنید terminal پنجرهinit npm را در دایرکتوری قرار داده و ماژول های زیر را نصب کنید.
$ npm init
$ npm install --save express jade
ساختار این پروژه بسیار ساده است. یک فایل app.js برای همه پیکربندی‌های برنامه، یک فایل server.js برای چرخاندن سرور http و یک پوشه views که در آن همه قالب‌های ما ذخیره می‌شوند. ابتدا فایل app.js را ایجاد کنید و این قطعه کد را در آن قرار دهید.
// copy this into your app.js
const express = require('express');
const path = require('path');
const app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.get('/', function(req, res, next) {
res.render('index', { title: 'Hello World!' });
});
module.exports = app;
باشه چه خبره روی اینجا؟ ما نیاز داریم express و نمونه سازی app هدف – شی. این path ماژول یک ماژول Node داخلی است که راهی برای کار با فایل ها و دایرکتوری ها ارائه می دهد. ما از آن در این مثال استفاده می کنیم تا مطمئن شویم مسیرهای فایل ما کار می کنند روی همه پلتفرم ها
سپس موتور view و پوشه ای که قالب های ما در آن قرار دارند را تنظیم می کنیم. موتور نمایشی که در این نمونه استفاده خواهیم کرد، خواهد بود یشم، اما هر موتور دید در اینجا خوب است.
حالا قسمت سرگرم کننده می آید، ببینید .get() روش روی شی برنامه؟ 2 پارامتر می گیرد. ابتدا یک مسیر، سپس یک تابع تماس. هنگامی که مسیر ‘/’ زده می شود، تماس برگشتی فراخوانی می شود. این کار رندر قالب شاخص را با یک متغیر درون یابی به نام آغاز می کند title با ارزش “سلام جهان!”. بالاخره ما export برنامه برای دسترسی به آن در فایل های دیگر.
عالی! با این کار، اجازه دهید فایل server.js را ایجاد کرده و این قطعه را اضافه کنیم.
const app = require('./app');
const port = 3030;
app.listen(port, function() {
console.log('Express server listening روی port ' + port);
});
در اینجا ما به فایل app.js نیاز داریم و به آن می‌گوییم که گوش کند روی پورت 3030.
فقط یک کار دیگر وجود دارد، ایجاد پوشه “views” با چند الگو. ادامه دهید و اکنون پوشه “views” را اضافه کنید و این دو الگو را رها کنید.
<!-- layout.jade -->
doctype html
html
head
title= title
body
block content
<!-- index.jade -->
extends layout
block content
h1= title
p Welcome to #{title}
همانطور که می بینید نحو موتور قالب jade در مقایسه با HTML معمولی بسیار عجیب است. اما اجازه ندهید شما را گول بزند. در پایان به صورت HTML معمولی در مرورگر رندر می شود. نگاه خنده دار را ببینید #{title}? این همان درون یابی است که در بالا ذکر کردم. این title متغیر از تابع callback به نما منتقل شد و به عنوان مقدار ارائه شده رندر شد.
ساختار پوشه نهایی شما در برنامه نمونه باید چیزی شبیه به این باشد.
> node_modules
> views
- index.jade
- layout.jade
- app.js
- package.json
- package-lock.json // this file will be present only if you have NPM version 5 or above.
- server.js
نگاهی به مخزن برای جبران اگر برخی از مراحل را از دست دادید.
وای، بالاخره ما می توانیم برنامه را اجرا کنیم تا ببینیم چه شکلی است. به عقب برگردید terminal و اجرا:
$ node server.js
شما باید “Express Server listening روی پورت 3030” دوباره به سیستم خود وارد شوید terminal. در مرورگر خود، به http://localhost:3030 و باید متن “Hello World!” و “به Hello World خوش آمدید!” روی صفحه نمایش
REST APIها
آماده اید تا دنیای خود را وارونه کنید؟ خوش آمدید به باقی مانده API ها مخفف مخفف است Reارائه دهنده استیت تیرانده اما هرگز نیازی به یادآوری آن نخواهید داشت. با این حال، آنچه مهم است، درک منطق پشت این است که REST چگونه کار می کند و چرا آن نوع ارجح تحویل داده است.
هسته اصلی در ایجاد یک نهفته است API، یک آکاربرد پروگرام منnterface، برای ارسال و دریافت داده ها با فرمت JSON. API های REST برای تعامل با پایگاه های داده برای ذخیره داده ها به شیوه ای مداوم استفاده می شوند. خوشبختانه برای ما، استفاده از REST با Express آسان است.
بیایید آن را در عمل بررسی کنیم.
برای این مثال فقط به دو ماژول نیاز داریم. اکسپرس و تجزیه کننده بدن. یک فهرست پروژه جدید ایجاد کنید و اجرا کنید:
$ npm init && npm install --save express body-parser
ما فقط به دو فایل نیاز داریم تا برنامه نمونه کار کند، بنابراین ادامه دهید و یک app.js و یک server.js ایجاد کنید.
این قطعه ها را در فایل ها کپی کنید.
'use strict';
//
// app.js
//
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function(req, res) {
let data = {
message: 'Hello World!'
};
res.status(200).send(data);
});
app.post('/', function(req, res) {
let data = {
response: 'You sent: ' + req.body.message
};
// Do something, like query a database or save data
res.status(200).send(data);
});
module.exports = app;
'use strict';
//
// server.js
//
const app = require('./app');
const port = 4040;
app.listen(port, function() {
console.log('Express server listening روی port ' + port);
});
طرح‌بندی app.js بسیار شبیه به مثال ارائه‌شده توسط سرور است. تنها تفاوت واقعی این است که ما یک شی JSON را به عنوان پاسخ ارسال می کنیم get() روش. بیایید آن را تجزیه کنیم.
در بالا ما دوباره نیاز داریم express، و ایجاد کنید app هدف – شی. اما، ما نیز نیاز داریم body-parser. این یک ماژول میان‌افزار Express عالی برای تجزیه بدنه درخواست HTTP ورودی است. یک شی به Express اضافه می کند req شی در داخل app مواد و روش ها. بنابراین هنگامی که ما برخی از داده ها را در مسیر ‘/’ ارسال می کنیم، به آن داده ها در مسیر دسترسی داریم req.body هدف – شی. عالی!
برای آزمایش این موضوع، ابزاری مانند Postman یا هر ابزار تست مشتری REST دیگری را که دوست دارید راه اندازی کنید. اگر قبلاً این مورد را نشنیده اید، نترسید، شما می توانید آن را در اینجا بررسی کنید..
server.js را روشن کنید و Postman را باز کنید.
$ node server.js
در Postman (یا هر ابزار مشتری REST دیگر) با ارسال یک درخواست GET شروع کنید http://localhost:4040/:
اکنون یک درخواست POST به همان آدرس اینترنتی ارسال کنید:
یک “پیام” را به عنوان داده های JSON در متن درخواست وارد کنید (در این مورد از “x-www-form-urlencoded” استفاده کنید) و “ارسال” را فشار دهید. پیامی که به نقطه پایانی ارسال می کنید باید به این صورت برای شما ارسال شود:
{
"response": "You sent: Hello World!"
}
به کد بازگردید و اجازه دهید توضیح دهیم که چه اتفاقی می افتد روی. در مسیر POST، مقدار را از آن می گیریم req.body.message و آن را به data متغیر با پیام کوتاه خودمان. سپس داده ها را با وضعیت 200 در پاسخ ارسال می کنیم.
درخواست هایی مانند اینها که صرفاً به عنوان ابزاری برای انتقال داده به و از یک سرور استفاده می شود برای ذخیره داده ها در ذخیره سازی دائمی مانند پایگاه های داده استفاده می شود. این همان چیزی است که API های REST در آن عالی هستند. در دنیای امروزی آنها رشد می‌کنند، زیرا با برنامه‌های موبایل و وب به‌عنوان ذخیره‌سازی داده‌ها، هماهنگ کار می‌کنند.
اگر مراحلی را از دست دادید، می توانید کد را بررسی کنید اینجا.
وب سایت های استاتیک
اگر نیازی به رندر قالب جالب یا تعامل با پایگاه داده نداشته باشیم، چه؟ اگر فقط یک فرود خنک بخواهیم چه می شود page، یک اثبات عالی از مفهوم page، یا یک سرور فایل ثابت؟
بیایید همه موارد استفاده پیچیده ای را که در بالا ذکر کردیم نادیده بگیریم و تمرکز کنیم روی پایه هایی که وب جهانی بر آن ها بنا شده است. ارائه اسناد HTML
Express می تواند به یک وب سرور HTTP ساده برای ارائه صفحات HTML ایستا تبدیل شود. این process ساده است آنچه لازم است تعیین مکانی است که به عنوان یک فهرست ثابت مشاهده شود.
بیایید شیرجه بزنیم
یک دایرکتوری جدید ایجاد کنید، دو فایل مشابه مثال های بالا ایجاد کنید، یک app.js و یک server.js. برای این مثال فقط باید express را نصب کنید.
$ npm init && install express --save
// app.js
const express = require('express');
const app = express();
app.use('/', express.static('html'));
module.exports = app;
برنامه تنظیم شده است .use() پوشه HTML برای ارائه فایل های استاتیک. به این معنی که مسیر دسترسی به منبع در URL به دنبال مسیرها در برنامه Express نخواهد بود، در عوض در سیستم فایل فایل درخواستی را جستجو کنید.
شما به سادگی می توانید از نمونه های بالا از server.js مجددا استفاده کنید.
// server.js
const app = require('./app');
const port = 5050;
app.listen(port, function() {
console.log('Express server listening روی port ' + port);
});
یک پوشه به نام html ایجاد کنید و دو فایل به نام اضافه کنید index.html و about.html. محتوای فایل ها مهم نیست، من فقط مقداری متن اضافه کردم تا بدانم کدام کدام است.
<!-- index.html -->
<h1>index</h1>
<!-- about.html -->
<h1>about</h1>
همین. پیش بروید، سرور را بچرخانید و یک مرورگر باز کنید و به آن بروید http://localhost:5050، که باید الف را نشان دهد page با کلمه “شاخص” روی آی تی.
شما می توانید با درخواست مسیر ‘/’، را ببینید index.html به طور پیش فرض بارگیری شده است. شما می توانید به /about.html و فایل HTML ‘about’ بارگذاری می شود. این اصل با هر نوع فایلی کار می کند. می‌توانید یک تصویر را نیز به این پوشه اضافه کنید و اگر از طریق URL به آن بروید، به همین شکل نمایش داده می‌شود.
اگر مراحلی را از دست دادید، کمی استراحت کنید و کد را بررسی کنید اینجا.
برنامه های ترکیبی
نه، قرار نیست در مورد تویوتا پریوس صحبت کنیم. این نوع دیگری از هیبرید است. بیایید بگوییم، شما تطبیق پذیری، قدرت و سهولت استفاده از REST API و همچنین سرعت یک برنامه تک صفحه ای (SPA) را می خواهید.
اطلاعات سریع: SPA ها برنامه های کاربردی جاوا اسکریپت جلویی هستند که فقط یک اصلی دارند index.html فایل. تمام فایل های HTML دیگر قالب هایی هستند که در صورت نیاز به فایل اصلی تزریق می شوند. زیرا منطق و مسیریابی انجام می شود روی قسمت جلویی آنها فوق العاده سریع هستند. اما در نهایت، آنها مانند یک وب ثابت ساده رفتار می کنند page وقتی نوبت به خدمت به آنها می رسد.
اگر اینطور است، ممکن است به این سناریو فکر کنید. چرا یک REST API را با یک SPA ارائه شده به صورت ایستا اجرا نکنید روی همان سرور به نظر من خوب است.
آتش زدن a terminal، یک دایرکتوری جدید ایجاد کنید و تایپ کنید:
$ npm init && npm install --save express body-parser
بیایید با ساختار پوشه آشنا شویم.
> app // folder that will hold all of our files for the SPA
> node_modules
- app.js
- package-lock.json
- package.json
- server.js
ساختار مانند مثال ارائه فایل استاتیک است، با تفاوت در نام پوشه ای که فایل های ثابت خود را در آن نگهداری می کنیم.
در اینجا چند کد وجود دارد:
// app.js
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
/**
* API
*/
app.get('/api', function(req, res, next) {
let data = {
message: 'Hello World!'
};
res.status(200).send(data);
});
app.post('/api', function(req, res, next) {
let data = req.body;
// query a database and save data
res.status(200).send(data);
});
/**
* STATIC FILES
*/
app.use('/', express.static('app'));
// Default every route except the above to serve the index.html
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname + '/app/index.html'));
});
module.exports = app;
این ساختار در حال حاضر آشنا به نظر می رسد. ما REST API را با فایل‌های استاتیک ارائه‌شده ترکیب کرده‌ایم. تنها استثنا آخرین مورد است .get() روی پایین این * منطبق با هر مسیر به جز موارد بالا به طور پیش فرض برای ارسال خواهد بود index.html برگشت به مشتری به این معنی که هر مسیری در خدمت اصلی خواهد بود index.html. دقیقا همان چیزی که ما می خواهیم!
اکنون زمانی که می‌خواهیم برخی از داده‌ها را از API بازیابی کنیم، به سادگی می‌توانیم روی آن ضربه بزنیم /api مسیر و داده های JSON را برگردانید. در غیر این صورت برنامه همیشه فایل HTML اصلی واقع در پوشه برنامه را ارائه می دهد.
اگر می‌خواهید به جزئیات بیشتری وارد شوید، می‌توانید با استفاده از Angular.js نمونه کامل را بررسی کنید. اینجا.
چه زمانی از چه چیزی استفاده کنیم؟
هیچ نوع برنامه ای در هر سناریویی بهترین نیست. همه آنها جایگاه خود را در دنیای برنامه نویسی دارند. همش بستگی دارد روی مورد استفاده شما و آنچه می خواهید بسازید.
اگر می‌خواهید یک بک‌اند قوی و بدون نگرانی بیش از حد در مورد قسمت جلویی داشته باشید، واقعاً عاشق برنامه‌های رندر شده سرور خواهید بود. آنها موتورهای قالب سازی عالی دارند که روش نوشتن HTML را ساده می کند و ایجاد قالب های پیچیده را بسیار آسان می کند. آنها همچنین پشتیبانی بسیار خوبی برای ذخیره و بازیابی داده ها ارائه می دهند.
REST APIها برنامه‌های انتخابی زمانی هستند که چندین قسمت جلویی برای مدیریت دارید. داده‌هایی که دریافت می‌کنید می‌توانند هم از برنامه‌های موبایل و هم از برنامه‌های وب درخواست شوند. آیا این عالی نیست که بتوانید یک بک اند بسازید که بتواند توسط همه برنامه های سمت کلاینت مورد نظر شما مصرف شود؟ من مطمئنم فکر می کنم اینطور است!
سرویس فایل های استاتیک در موارد مختلفی استفاده می شود. ارائه فایل های HTML، تصاویر، شیوه نامه های CSS و اسکریپت های جاوا اسکریپت. همه به عنوان فایل های ثابت مشاهده می شوند و همه آنها می توانند با Express ارائه شوند. این بیشتر برای ایجاد صفحات فرود و سایر برنامه های کاربردی مانند برنامه های صفحه تک استفاده می شود. با خیال راحت از این تکنیک برای همه برنامه های خود استفاده کنید. دانستن روش سرویس دهی فایل های ثابت مانند تصاویر و CSS همیشه مفید خواهد بود!
در مورد برنامه های هیبریدی چه می توان گفت؟ خب اول از همه لطفاً اگر به دو وب سرور دسترسی دارید، برنامه ها را جدا نگه دارید. REST API را ایجاد کنید روی یک، و SPA روی دیگری. اما اگر آن تجملات را ندارید، خوب است که آن را حفظ کنید روی یکی در غیر این صورت، این ترکیب برنامه از نظر عملکرد بهترین است.
برو شروع کن به ساختن وسایل!
همه این تکنیک ها معتبر هستند و استفاده از آنها کاملاً خوب است. فقط یکی را انتخاب کنید و شروع به ساختن کنید! با انجام این کار خودتان بیشترین چیزی را خواهید آموخت.
امیدوارم شما دختران و پسران از خواندن این متن به همان اندازه که من از نوشتن آن لذت بردم لذت ببرید. تا دفعه بعد کنجکاو باشید و لذت ببرید.
آیا فکر می کنید این آموزش به کسی کمک می کند؟ در اشتراک گذاری دریغ نکنید. اگر دوست داشتید، در نظرات زیر به من اطلاع دهید.
(برچسب‌ها به ترجمه)# استراحت
منتشر شده در 1403-01-27 14:19:04
