قبل از خواندن این مقاله، توصیه می کنم مقالات قبلی من را مطالعه کنید.
- ساخت برنامه وب با استفاده از Node.js - قسمت اول
- ساخت برنامه وب با استفاده از Node.js - قسمت دوم
- ساخت برنامه وب با استفاده از Node.js - قسمت سوم
- ساختن برنامه وب با استفاده از Node.js - قسمت چهارم
- ساخت برنامه وب با استفاده از Node.js - قسمت پنجم
- ساخت برنامه وب با استفاده از Node.js - قسمت ششم
- ساخت برنامه های وب با استفاده از Node.js - قسمت هفتم
در دو مقاله قبلی خود توضیح داده ام -
- نحوه شروع کار با برنامه وب node.js
- چگونه یک پروژه node.js را مقداردهی اولیه کنیم
- درباره Package.json
- چارچوب اکسپرس
- نحوه استفاده از دستور "npm start".
- استفاده از قالب های HTML
- بوور
- موتور قالب
حال در این مقاله به شما توضیح می دهم که چگونه می توانیم منوی Navigation را به صورت پویا ایجاد کنیم. سپس با استفاده از ناوبری مسیریابی را انجام می دهیم و سپس صفحه خود را رندر می کنیم. پس از آن، بخش های خود و بسیاری دیگر را جدا خواهیم کرد.
بنابراین، من فایل index.ejs را که در آخرین مقاله خود ایجاد کرده ام باز می کنم و کد HTML کامل را از فایل index.html خود در فایل index.ejs کپی می کنم.
index.ejs
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="">
- <meta name="author" content="">
- <title>1 Col Portfolio - Start Bootstrap Template</title>
- <!-- Bootstrap Core CSS -->
- <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
- <!-- Custom CSS -->
- <link href="css/1-col-portfolio.css" rel="stylesheet">
- <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
- <![endif]-->
- </head>
- <body>
- <!-- Navigation -->
- <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
- <div class="container">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Start Bootstrap</a>
- </div>
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <li>
- <a href="#">About</a>
- </li>
- <li>
- <a href="#">Services</a>
- </li>
- <li>
- <a href="#">Contact</a>
- </li>
- </ul>
- </div>
- <!-- /.navbar-collapse -->
- </div>
- <!-- /.container -->
- </nav>
- <!-- Page Content -->
- <div class="container">
- <!-- Page Heading -->
- <div class="row">
- <div class="col-lg-12">
- <h1 class="page-header">Page Heading
- <small>Secondary Text</small>
- </h1>
- </div>
- </div>
- <!-- /.row -->
- <!-- Project One -->
- <div class="row">
- <div class="col-md-7">
- <a href="#">
- <img class="img-responsive" src="http://placehold.it/700x300" alt="">
- </a>
- </div>
- <div class="col-md-5">
- <h3>Project One</h3>
- <h4>Subheading</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
- <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
- </div>
- </div>
- <!-- /.row -->
- <hr>
- <!-- Project Two -->
- <div class="row">
- <div class="col-md-7">
- <a href="#">
- <img class="img-responsive" src="http://placehold.it/700x300" alt="">
- </a>
- </div>
- <div class="col-md-5">
- <h3>Project Two</h3>
- <h4>Subheading</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
- <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
- </div>
- </div>
- <!-- /.row -->
- <hr>
- <!-- Project Three -->
- <div class="row">
- <div class="col-md-7">
- <a href="#">
- <img class="img-responsive" src="http://placehold.it/700x300" alt="">
- </a>
- </div>
- <div class="col-md-5">
- <h3>Project Three</h3>
- <h4>Subheading</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
- <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
- </div>
- </div>
- <!-- /.row -->
- <hr>
- <!-- Project Four -->
- <div class="row">
- <div class="col-md-7">
- <a href="#">
- <img class="img-responsive" src="http://placehold.it/700x300" alt="">
- </a>
- </div>
- <div class="col-md-5">
- <h3>Project Four</h3>
- <h4>Subheading</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
- <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
- </div>
- </div>
- <!-- /.row -->
- <hr>
- <!-- Project Five -->
- <div class="row">
- <div class="col-md-7">
- <a href="#">
- <img class="img-responsive" src="http://placehold.it/700x300" alt="">
- </a>
- </div>
- <div class="col-md-5">
- <h3>Project Five</h3>
- <h4>Subheading</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, quo, minima, inventore voluptatum saepe quos nostrum provident ex quisquam hic odio repellendus atque porro distinctio quae id laboriosam facilis dolorum.</p>
- <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
- </div>
- </div>
- <!-- /.row -->
- <hr>
- <!-- Pagination -->
- <div class="row text-center">
- <div class="col-lg-12">
- <ul class="pagination">
- <li>
- <a href="#">«</a>
- </li>
- <li class="active">
- <a href="#">1</a>
- </li>
- <li>
- <a href="#">2</a>
- </li>
- <li>
- <a href="#">3</a>
- </li>
- <li>
- <a href="#">4</a>
- </li>
- <li>
- <a href="#">5</a>
- </li>
- <li>
- <a href="#">»</a>
- </li>
- </ul>
- </div>
- </div>
- <!-- /.row -->
- <hr>
- <!-- Footer -->
- <footer>
- <div class="row">
- <div class="col-lg-12">
- <p>Copyright © Your Website 2014</p>
- </div>
- </div>
- <!-- /.row -->
- </footer>
- </div>
- <!-- /.container -->
- <!-- jQuery -->
- <script src="lib/jquery/dist/jquery.js"></script>
- <!-- Bootstrap Core JavaScript -->
- <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
- </body>
- </html>
بنابراین، اکنون خروجی فایل index.ejs من به شکل زیر است.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/1.gif)
اول از همه، من می خواهم نوار منوی ناوبری را به صورت پویا ایجاد کنم و همچنین عنوان صفحه را تغییر می دهم. برای انجام این کار، فایل app.js را اصلاح می کنم و کد زیر را می نویسم.
- app.get('/',function(req,res){
- res.render('index', {
- title:'Node.js By Sourabh Somani',
- menu:[
- {
- href:'/articles',
- text:'Article'
- },
- {
- href:'/projects',
- text:'Projects'
- },
- {
- href:'/books',
- text:'books'
- },
- {
- href:'/contact',
- text:'Contact Us'
- },
- ]
- });
- });
حالا میخواهم فایل index.ejs را اصلاح کنم و کد منوی پیمایش پویا و عنوان صفحه را بنویسم.
برای عنوان، خط کد زیر را می نویسم.
- <title><%=title%></title>
برای منوی ناوبری، خط کد زیر را می نویسم.
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- <%for(var i=0;i<menu.length;i++){%>
- <li>
- <a href="<%=menu[i].href%>"><%=menu[i].text%></a>
- </li>
- <%}%>
- </ul>
- </div>
حالا وقتی پروژه ام را اجرا می کنم، خروجی من به شکل زیر خواهد بود.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/2.gif)
من همچنین متن لوگو را با استفاده از خط کد زیر تغییر می دهم.
- <a class="navbar-brand" href="/">Node.js Web App</a>
خروجی
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/3.gif)
اکنون، من قصد دارم از مسیریابی با استفاده از تابع Express Router استفاده کنم . قبلاً با استفاده از تابع app.get مسیریابی می شد اما اکنون با استفاده از روتر این کار را انجام خواهیم داد. بنابراین، من قصد دارم فایل "app.js" خود را تغییر دهم.
اول از همه متغیرهای روتر ایجاد کنید.
- //routing using Router
- var articlesRouter=express.Router();
- var projectsRouter=express.Router();
- var booksRouter=express.Router();
- var contactRouter=express.Router();
اکنون مسیریابی را برای هر روتر مانند شکل زیر تعریف کنید.
- //Defining Routes
- articlesRouter.route("/");
- projectsRouter.route("/");
- booksRouter.route("/");
- contactRouter.route("/");
اکنون باید به برنامه خود بگوییم که از کدام روتر برای هر مسیر مختلف استفاده می شود. برای انجام این کار، کد را مطابق شکل زیر بنویسید.
- app.use('/articles',articlesRouter);
- app.use('/projects',projectsRouter);
- app.use('/books',booksRouter);
- app.use('/contact',contactRouter);
بنابراین، خط کد بالا به برنامه ما می گوید که وقتی درخواست از /articles می آید، از articlesRouter استفاده کنید. وقتی درخواست از /projects می آید، از projectsRouter استفاده کنید. هنگامی که درخواست از /books می آید، سپس از booksRouter استفاده کنید. و هنگامی که درخواست از /contact می آید، از contactRouter استفاده کنید.
app.js کد کامل
- var express=require('express');
- var app=new express();
- var port=3000;
- app.listen(port,function(err){
- if(typeof(err)=="undefined"){
- console.log('Your application is running on : '+ port+' port');
- }
- });
- //routing using Router
- var articlesRouter=express.Router();
- var projectsRouter=express.Router();
- var booksRouter=express.Router();
- var contactRouter=express.Router();
- app.use(express.static('public'));//making public directory as static diectory
- app.set('views','./src/views');
- app.set('view engine','ejs');
- articlesRouter.route("/");
- projectsRouter.route("/");
- booksRouter.route("/");
- contactRouter.route("/");
- app.use('/articles',articlesRouter);
- app.use('/projects',projectsRouter);
- app.use('/books',booksRouter);
- app.use('/contact',contactRouter);
- app.get('/',function(req,res){
- res.render('index', {
- title:'Node.js By Sourabh Somani',
- menu:[
- {
- href:'/articles',
- text:'Article'
- },
- {
- href:'/projects',
- text:'Projects'
- },
- {
- href:'/books',
- text:'Books'
- },
- {
- href:'/contact',
- text:'Contact Us'
- },
- ]
- });
- });
خروجی
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/4.gif)
اکنون، من قصد دارم به ترتیب برای مسیریابی های مختلف، نماهای مختلفی ایجاد کنم. بنابراین، من در حال ایجاد 4 فایل EJS در پوشه Views هستم.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/5.gif)
الان در همه فایل ها کد را از index.ejs کپی می کنم و در همه فایل ها پیست می کنم. پس از چسباندن همه این کدها، من قصد دارم تمام نماهایی را که از فایل "app.js" ایجاد کرده ام، رندر کنم.
رندر کردن مسیر مقالات
- articlesRouter.route("/")
- .get(function(req,res){
- res.render('articles', {
- title:'Articles',
- menu:navMenu
- });
- });
رندر مسیر پروژه ها
- projectsRouter.route("/")
- .get(function(req,res){
- res.render('projects', {
- title:'Projects',
- menu:navMenu
- });
- });
مسیر رندر کتاب
- booksRouter.route("/")
- .get(function(req,res){
- res.render('books', {
- title:'Books',
- menu:navMenu
- });
- });
رندر مسیر تماس
- contactRouter.route("/")
- .get(function(req,res){
- res.render('contact', {
- title:'Contact Us',
- menu:navMenu
- });
- });
در بالا، می بینید که من از منو به عنوان navMenu استفاده می کنم، بنابراین یک آرایه برای navMenu ایجاد کرده ام. که شبیه شکل زیر است.
- //Navigation Menu
- var navMenu=[
- {
- href:'/articles',
- text:'Articles'
- },
- {
- href:'/projects',
- text:'Projects'
- },
- {
- href:'/books',
- text:'Books'
- },
- {
- href:'/Contact',
- text:'Contact Us'
- },
- ];
اکنون پروژه خود را اجرا کرده و بر روی نوار منو کلیک کنید. خروجی زیر را دریافت خواهید کرد.
خروجی صفحه اصلی
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/6.gif)
صفحه خروجی مقالات
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/7.gif)
صفحه خروجی پروژه ها
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/8.gif)
خروجی صفحه کتاب ها
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/9.gif)
خروجی صفحه تماس
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/10.gif)
حالا می بینید که همه کدها را داخل یک فایل نوشته ایم که "app.js" است و وقتی پروژه ایجاد می کنیم، همیشه فایل های خود را جدا می کنیم. ما فقط در یک فایل کد نمی نویسیم زیرا درک فایل را بسیار پیچیده می کند.
بنابراین اکنون، ما می خواهیم فایل های مسیریابی را در پوشه های مختلف جدا کنیم. بیایید یک پوشه با نام "routes" در فهرست src ایجاد کنیم که در آن همه فایل های مسیریابی قرار خواهند گرفت.
بنابراین، در این پوشه، من قصد دارم چندین فایل JS برای مسیریابی ایجاد کنم.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/building-web-application-using-node-js-part-3/Images/11.gif)
اکنون در هر فایل کد زیر را می نویسم.
articlesRoute.js
- var express=require('express');
- var articlesRouter=express.Router();
- var navMenu=[
- {href:'/articles',text:'Articles'},
- {href:'/projects',text:'Projects'},
- {href:'/books',text:'Books'},
- {href:'/Contact',text:'Contact Us'}
- ];
- articlesRouter.route("/")
- .get(function(req,res){
- res.render('articles', {
- title:'Articles',
- menu:navMenu
- });
- });
- module.exports=articlesRouter;