اگر به روز هشتم نگاهی بندازید ، می بینید که درآخر ما به برنامه ای رسیدیم که Route ها رو مدیریت می کرد. یعنی با متد ( ) app.get براساس Route دریافتی و همچنین Request دریافت شده یک Response رو به مرورگر بر میگردوند.
گاهی نیاز هست عملیاتی مابین دریافت req از مرورگر و ارسال res به اون انجام شود. برای مثال ثبت اطلاعاتی در پایگاه داده ، اعتبارسنجی تقاضا ، یا بررسی دسترسی کاربر به تقاضایی که داره.
تمام کارهایی که قرار هست در این بین و قبل ارسال پاسخ انجام بشه ، توسط میان افزارها یا Middleware ها اجرا خواهد شد.
یک فایل درست میکنیم به اسم Middleware.js و در اینجا کاری که میخوایم انجام بدیم فقط log کردن .... در کنسول می باشد ، پس محتویات فایلمون به صورت زیر می باشد:
const logger = ( req , res , next ) => { console.log( 'Path is :'+ req.path); next( ); } module.exports = {logger}
یک تابع معمولی هست ، که به جای log کردن ممکنه هر کار دیگه ای انجام بده. یک تابع next استفاده شده که به معنی تمام شدن کار middleware هست و برنامه رو به قسمت بعدی می فرسته. قسمت بعدی می تونه یک middleware دیگه باشه ، ادامه ی برنامه اصلی.
برای استفاده از این middleware در برنامه اصلی باید به این طریق به برنامه معرفی بشه:
const {logger} = require('./middleware'); app.use(logger);
یادته برای ارتباط بین React و Express اومدیم از یه چیزی به اسم cors استفاده کردیم. دقیقا اون رو هم به همین صورت تعریف کردیم( پس اونم یه middleware بوده).
با تعریفی که انجام دادیم با هر تقاضایی که وارد وب سرویس میشه ، قبل از ارسال پاسخ میاد و میان افزار logger رو اجرا میکنه.
برای اینکه یکم بیشتر با middleware ها کار کنیم ، اول بیایم و یک پیش زمینه هایی درست کنیم و بعد کار رو ادامه ، یک فولدر به اسم views درست کنید و فایل login.html رو درست کنید. توی این فایل یک فرم ساده درست میکنیم:
<!DOCTYPE html> <html lang="en"> <head> <title> Login </title> </head> <body> <div> <form action="/api/views/login.html" enctype="application/x-www-form-urlencoded" method="post"> username: <input name="user"> password: <input name="pass"> <button type="submit">submit</button> </form> </div> </body> </html>
و یک تغییری هم توی مسیر signin میدیم که به جای یه تکس ، فایل login.html رو به مرورگر بفرسته:
app.get('/signin',( req , res ) => { res.sendFile (path.join (__dirname,'/views/login.html'))});
تا اینجای کار اگر ادرس signin رو بزنید توی مرورگر فرم رو بهتون نشون میده اما اگر فرم رو سابمیت کنید ، خطا میگیرید چون برای اون مسیر پاسخی مشخص نکردید.
app.post('/api/views/login.html',(req,res)=>{res.redirect('/signin');});
توجه کنید که این خط پاسخ به تقاضای post هست که فرم میفرسته و فقط در صورتی هست که فرم سابمیت میشه. چون خودمون پاسخ فرم رو به صورت post ارسال بشه.
در اینجا لازم هست کمی با بخش body تقاضاهایی که به سمت وب سرویس ارسال میشه هم آشنا بشیم. برای استفاده بهتر از اون ها ابتدا ماژول زیر رو نصب میکنیم:
npm i -s body-parser app.use(bodyParse.urlencoded({extended:false}));
حالا می تونید توی کدتون به req.body دسترسی داشتید ، مثلا:
app.post('/api/views/login.html',(req,res)=>{res.send(req.body)});
نکته ای که هست شما الان می تونید توی middleware که نوشتید به req.body هم دسترسی داشته باشید( به شرطی که در بخش app.use حتما logger رو بعد از body-parser نوشته باشید.
const logger = (req,res,next) =>{ console.log('Username is :'+ req.body.user); console.log('Password is :'+ req.body.user); next(); } module.exports={logger};
