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 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 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>
و این هم خروجی :
صحبت پایانی
ما میتونیم کد رو بهینه تر کنیم. 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 بهینه ترین راه نیست اما میتونید از این ویژگی ها برای رسیدن به وب سرور دلخواه تون استفاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید