كيفاش تصاوب serveur ب nodeJs


فهاد الدرس الأول من سلسلة node js غادي نشوفو كيفاش نقادو serveur ب node js فكيف كنعرفو باش تصاوب موقع مثلا ب php لازم ميكون عندك serveur apache فين تحط les fichiers ديالك فنفس الشي هنا غادي نقادو serveur وغادي نحطو des fichiers html وcss وغادي نشوفو كيفاش ن démmarer serveur ونشوف les fichiers ديالي.

نظرة سريعة بالفيديو

1- ملف الإعدادات

أول حاجة غادي تطيليشارجي node js من هنا غادي يعطيك ل version على حساب système ديالك من بعد مت installer node js غادي تمشي ل c وزيد dossier سميه لي بغيتي انا سميتو nodejs-server من بعد زيد فيه ملف سميه server.js هنا غادي يكون عندنا الكود الرئيسي غادي نشوفوه من بعد ثم زيد ملف جديد سميه package.json غادي تكون فيه ل configuration ديال serveur فيلا بغيتي ت créer ل fichier ب cmd غادي تمشي ل cmd وتدير :
cd c:\nodejs-server
منبعد دير الكوموند : npm init 
منبعد غادي تدخل المعلومات على هاد الشكل أو يمكنلك تديرلها coller مباشرة فالملف package.json : 


                                {
  "name": "first-server",
  "version": "1.0.0",
  "description": "this is my first node js server",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "belasri imad",
  "license": "GPL-3.0"
}
                            

2- الملف server.js

فالملف server.js عندي الكود لي كنسترجع به les packages url http و path وfs منبعد عندي جدول فيه les types de fichiers لي ممكن انني نعرضهم لي فيهم des fichiers html,css,js منبعد كنحدد ل port ول host منبعد كن créer serveur كن récupérer ل url ومنو كناخد الإسم ديال ل file و كنتحقق واش fichier ولا dossier يلا كان fichier كن récupérer ل extension ديالو باش نعرف type ديالو واش html ولا css ولا js منبعد كنقرا ل contenu ديالو وكن afficher ل fichier كان dossier كنصيفط ل utilisateur ل la page index مكانش كنعرض ميساج بلي الصفحة مكيناش من بعد كنديماري serveur وكنعطيه ل port ول host الكود ديال الملف هو :

                                const http = require('http');
const url = require('url');
const path = require('path');
//get file system
const fs = require('fs');
//array of required types
var fileTypes = {
    "html" : "text/html",
    "jpeg" : "image/jpeg",
    "jpg" : "image/jpg",
    "png" : "image/png",
    "js" : "text/javascript",
    "css" : "text/css"
};
const host = '127.0.0.1';
const port = 1458;

const server = http.createServer((req, res) => {
    //parse url
    var uri = url.parse(req.url).pathname;
    //get filename from working directory
    var fileName = path.join(process.cwd(),unescape(uri));
    console.log("loading ..." + uri);
    // check if file exists
    var fileStatus;
    try {
        //get file status
        fileStatus = fs.lstatSync(fileName);
    } catch(e){
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 file not found');
        return;
    }
    //check if file or directory
    if(fileStatus.isFile){
        //get file type
        var fileType = fileTypes[path.extname(fileName).split(".").reverse()[0]];
        console.log("file type ..." + fileType);
        res.statusCode = 200;
        res.setHeader('Content-Type',fileType);
        //read content from file
        var fileContent = fs.createReadStream(fileName);
        fileContent.pipe(res);
    }else if(fileStatus.isDirectory){
        res.statusCode = 302;
        res.setHeader('Content-Type',{
            'Location':'index.html'
        });
    }else{
        res.statusCode = 500;
        res.setHeader('Content-Type','text/plain');
        res.end('500 server internal error');
    }
});
server.listen(port, host, () => {
    console.log(`Serveur démmaré: http://${host}:${port}/`);
});
                            

3- index.html

هدا ملف عادي كباقي الملفات فيه ل contenu ديال الصفحة الرئيسية الكود ديالو :

                                <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Nodejs-server</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" 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="index.html">Nodejs-server</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">Accueil <span class="sr-only"></span></a></li>
                    <li><a href="about.html">About <span class="sr-only"></span></a></li>
                    <li><a href="contact.html">Contact <span class="sr-only"></span></a></li>
                </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <h3 class="text-info">Accueil</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit orci laoreet, luctus odio ac, luctus urna. Sed a tortor id est bibendum molestie non vel justo. Nulla et purus mauris. Donec efficitur diam dui, ac hendrerit lacus lacinia ut. Donec nec pellentesque est. In sit amet porta enim. Proin id consequat nibh. Vivamus mattis laoreet tempus. Vivamus id ex laoreet, condimentum nulla non, ultricies mauris. Nunc id efficitur erat, eu aliquam velit.
                    
                    Nam aliquet at dui non gravida. Sed sit amet rutrum odio. Pellentesque viverra ullamcorper odio ac auctor. Curabitur quis iaculis lectus. Quisque at nulla in est rhoncus eleifend. Duis id felis tempor urna aliquam mattis nec sit amet nisl. Donec condimentum finibus ex et dapibus. Proin dignissim dapibus ex ac volutpat. Phasellus consectetur fermentum leo, vitae tempus eros hendrerit et.
                    
                    Curabitur fermentum lobortis turpis sit amet vehicula. Nullam vehicula tellus magna, laoreet placerat urna vestibulum at. Praesent vel ante non justo tristique ullamcorper id ac ligula. Donec aliquam dui vitae molestie vehicula. Donec augue nisl, cursus eget pretium quis, interdum a ante. Mauris in fringilla felis, vel laoreet leo. Aenean non arcu vitae dui pulvinar tempus. Integer facilisis fermentum urna, at accumsan lectus feugiat id. Donec ullamcorper mi nec libero rhoncus, at interdum diam volutpat. Suspendisse condimentum sem lorem, sed malesuada nunc porttitor id. Donec cursus orci mauris, non vestibulum massa pretium id. Curabitur in mauris quis sem euismod venenatis in et mauris. Fusce gravida lacus est, sit amet rhoncus urna congue eu. Ut at dui vitae lacus eleifend vestibulum.</p>
        </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
  </html>
                            


بحث في الموقع


إشترك للتوصل بالجديد