رندر کردن فایل HTML در ExpressJS

ترجمه و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 13 خرداد 98
خواندن در 1 دقیقه
دسته بندی ها : نود جی اس

ExpressJS به شما اجازه میده وب سرورهای سفارشی با توجه به نیازتون توسعه بدید. لازم نیست چندین پکیج نصب کنید تا بتونید فایل های HTML رو مدیریت کنید. اگر Node.js نصب هست همین به اندازه ی کافی خوبه.

در این آموزش می خواهیم درمورد اینکه چطور فایل های HTML در ExpressJS رندر می شوند, توضیح بدیم.

درباره تابع ()sendFile

ExpressJS تابعی به نام ()sendFile داره که اساسا فایل های HTML رو به مرورگر می فرسته که بعد از اینکار بصورت خودکار توسط مرورگر تفسیر بشوند. تمام چیزی که ما نیاز داریم تا انجام بدیم اینه که در هرمسیر فایل HTML مناسب رو ارائه بدیم.

برای مثال :

وقتی ما URL اصلی رو وارد می کنیم فایل index.html رو تحویل بده :

//assuming app is express Object.

app.get('/',function(req,res){

     res.sendFile('index.html');

});

این یک کد آزمایشی بود. این ممکنه منجر به خطای resolution مسیر بشه.

پروژه ی ما

ما قصد داریم یک پروژه ساده شامل سه صفحه ی Home, About, Site link بسازیم. من برای طراحی از بوت استرپ و برای مدیریت رویدادها از Jquery استفاده می کنم.

ساختار مسیرها :

----- node_modules

     |--+express

---+ index.html

---+ about.html

---+ index.html

--- Server.js

----package.json

فایل package.json :

{

  "name": "express-html",

  "version": "0.0.1",

  "dependencies": {

    "express": "^4.11.0"

  }

}

نصب وابستگی ها با استفاده از :

npm install

اجرای پروژه :

npm Server.js

این سرور Express ماست :

var express = require("express");

var app     = express();

var path    = require("path");


app.get('/',function(req,res){

  res.sendFile(path.join(__dirname+'/index.html'));

  //__dirname : It will resolve to your project folder.

});

app.get('/about',function(req,res){

  res.sendFile(path.join(__dirname+'/about.html'));

});

app.get('/sitemap',function(req,res){

  res.sendFile(path.join(__dirname+'/sitemap.html'));

});


app.listen(3000);


console.log("Running at Port 3000");

و این فایل های HTML که درنظر گرفتیم. من میخواهم فقط فایل index.html رو نمایش بدم :

<html>

<head>

  <title>Express HTML</title>

  <script class='lozad' data-src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

  <script class='lozad' data-src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>

</head>

<body>

  <div style="margin:100px;">

    <nav class="navbar navbar-inverse navbar-static-top">

  <div class="container">

    <a class="navbar-brand" href="/">Express HTML</a>

    <ul class="nav navbar-nav">

      <li class="active">

        <a href="/">Home</a>

      </li>

      <li>

        <a href="/about">About</a>

      </li>

      <li>

        <a href="/sitemap">Sitemap</a>

      </li>

    </ul>

  </div>

</nav>

    <div class="jumbotron"  style="padding:40px;">

      <h1>Hello, world!</h1>

      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

    </div>

  </div>

</body>

</html>

و این هم خروجی :

رندر کردن فایل HTML در ExpressJS

صحبت پایانی 

ما میتونیم کد رو بهینه تر کنیم. Expresss دارای متغیرهای پیکربندی هست که به شما اجازه میده مسیر فایل ثابت (static) تعریف کنید. بنابراین شما لازم نیست در هر مسیر یکی وارد کنید. اینجا میتونید نحوه ی انجامش رو مشاهده کنید :

var express = require("express");

var app     = express();

app.use(express.static(__dirname + '/View'));

//Store all HTML files in view folder.

app.use(express.static(__dirname + '/Script'));

//Store all JS and CSS in Scripts folder.



app.get('/',function(req,res){

  res.sendFile('index.html');

  //It will find and locate index.html from View or Scripts

});



app.get('/about',function(req,res){

  res.sendFile('/about.html');

});



app.get('/sitemap',function(req,res){

  res.sendFile('/sitemap.html');

});

app.listen(3000);

console.log("Running at Port 3000");

این کد در مسیر مشابه مثل بالا کار میکنه.

نتیجه گیری

مواقع زیادی وجود داره که شما میخواهید وب سرورهایی رو توسعه بدید که فایل HTML ارائه کنند, دقیقا مثل کاری که apache انجام میده. هرچند استفاده از خود Node.js بهینه ترین راه نیست اما میتونید از این ویژگی ها برای رسیدن به وب سرور دلخواه تون استفاده کنید.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید