بزرگترین تفریح برای من یادگیری هست.
8. راه اندازی سرور با Express
خیلی یهویی تصمیم گرفتم که از Front-end به برنامه نویسی Back-end سرکی بکشم. چون پروژه بعدی که میخوام بنوسیم یک صفحه ثبت نام کاربر هست و برای اون نیاز هست کمی با دیتابیس کار کرده باشیم.
اینجا جایی هست که نیاز پیدا میکنیم یک سری کدها رو برای انجام عملیات Back-end بنویسیم. که قراره با استفاده از Node.js و Express.js پیاده سازی کنیم. عملیات نصب اکسپرس رو با دستور زیر انجام میدیم:
npm init -y
npm i -S express
یک فایل app.js می سازیم و که شامل :
const express = require('express');
const app = express( );
app.listen(8000,( )=>{
console.log('server is runing on 8000'); } )
حالا با اجرای این فایل با دستور node app.js عبارت ما در کنسول نمایش داده می شود. این ساده ترین برنامه Express هست که در واقع وب سرویس http یا همون http handler هست.
فایل app.js رو فقط مخصوص اکسپرس و بخش های مربوط به اکسپرس در نظر میگیریم و با ساخت یک فایل دیگه به اسم server.js سایر کارهای مربوط به سرور رو در اونجا انجام میدیم. پس لازم هست که بتونیم فایل app رو در سایر فایل ها فراخوانی کنیم. پس برای اینکه ExportAble باشه میایم و کد رو به این صورت تغییر میدیم:
const express = require('express');
const app = express();
const mainApp = () => {
app.listen(8000,()=>{
console.log('server is runing on 8000'); } ) }
module.exports = mainApp;
برای مثال یک فایل Server.js هم میسازیم و فایل app رو فراخوانی و اجرا می کنیم:
const mainApp = require('./app')
mainApp();
و با اجرای node server.js همان نتیجه قبل حاصل خواهد شد.
Routing:
تا اینجا برنامه ما هیچ کاری انجام نمیده اما به درستی اجرا شده. در فایل App.js مسیریابی رو به صورت زیر انجام میدهیم:
const express = require('express');
const app = express();
app.get('/',(req,res)=>{ res.send('Home page'); } )
const mainApp = ( ) => { app.listen(8000,( )=>{
console.log('server is runing on 8000'); } ) }
module.exports = mainApp;
حالا با اجرای برنامه و رفتن به مسیر زیر عبارت Home page نمایش داده می شود.
http://localhost:8000/
به این کاری که کردیم میگن Routing ، حالا میام و یک سری Route دیگه هم براش تعریف میکنیم:
const express = require('express');
const app = express();
app.get('/',(req,res)=>{res.send('Home page');})
app.get('/signin',(req,res)=>{res.send('Sign In Page');})
app.get('/signup',(req,res)=>{res.send('Sign Up Page');})
const mainApp = ( ) => { app.listen(8000,( )=>{ console.log('server is runing on 8000'); } ) }
module.exports = mainApp;
حالا مرورگر ما به آدرس های زیر پاسخی خواهد داد.
http://localhost:8000/signup
http://localhost:8000/signin
دریافت اطلاعات به شیوه Get از مرورگر:
اطلاعاتی که به صورت get در یک درخواست به سرور ارسال میکنیم از طریق پارامتر req به آن دسترسی خواهیم داشت.
app.get('/signup',(req,res)=>{
res.send('Sign Up Page');
var username = req.query.user;
var password = req.query.pass;
console.log('User:' + username + ' Pass:' + password);
})
در برنامه ی کاربردی که بعدا می نویسیم اطلاعات رو از یک فرم میگیریم و در یک دیتابیس ذخیره می کنیم. اما الان فقط اطلاعات دریافتی رو در کنسول نشون میدیم. ارسال متغییرها به صورت Get هم به صورت زیر خواهد بود:
http://localhost:8000/signup?user=amir&pass=123
خب چیزی که از Express یاد گرفتیم امروز شامل:
راه اندازی سرور
Routing
Get Method
مطلبی دیگر از این انتشارات
13. کار با Routerها در Express
مطلبی دیگر از این انتشارات
4. آشنایی با UseEffect در React
مطلبی دیگر از این انتشارات
7. پروژه اول : ساخت تایمر (اپیزود سه)