node.js簡單的頁面輸出

時間 2019-11-29

原文原文鏈接

在node.js基本上沒有兼容問題（若是你不是從早期的node.js玩起來），並且原生對象又加了這麼多擴展，再加上node.js自帶的庫，每一個模塊都提供了花樣繁多的API，若是還嫌不夠，github上還有上千個插件。對於想向嘗試一下後端編程的JSer來講，這是極具誘惑力的。可能有人說，後端不是涉及數據庫操做嗎？這與比前端的DOM兼容比起來，不值一提。還有什麼文件夾與文件操做，你就當成是一種特殊的數組操做就是。所以你徹底能夠憤憤不平！

好了，咱們來點實質的內容吧。node.js原本就是一個http服務器，它是要與前端交互的，所以少不了兩個對象：請求(request)與響應(response)。請求與響應顯然一種異步的東西，由於咱們不知道前端何時發請求過來，響應也不能當即給前端，還要作日誌，讀寫數據庫等操做呢。所以對於javascript來講，這用回調函數來實現最好。那麼由誰來接受這個回調呢？一個服務器對象！

var http = require("http");
http.createServer(function(request, response) {
  response.writeHead(200, {"Content-Type":"text/plain"});
  response.write("Hello node.js");
  response.end();
}).listen(8888);

node.js有個特殊的require，用於同步加載其餘模塊的對象，這與其餘語言的require, import差很少。能同步就是好，不像前端那樣一層套一層。而後利用一個函數去實例化一個服務器對象，而後監聽8888端口。這是node.js官網最初的例子，你們都寫爛了。但這樣的程序在現實中一無可取，咱們在地址欄上輸入URL，你起碼要返回一個完整頁面給我吧！

對此，咱們首先要進行模塊化。模塊化是以文件爲單位的，把example.js改名爲server.js，而後再把裏面的內容改成一個模塊。對於一個node.js的文件，其實它裏面的內容是在一個封閉的環境中執行。要想共享給其餘模塊使用，就必須綁定在exports對象上。

var http = require("http");
  
exports.start = function(){
    http.createServer(function(request, response) {
        console.log("Request received...");
        response.writeHead(200, {"Content-Type":"text/plain"});
        response.write("Hello node.js");
        response.end();
    }).listen(8888);
    console.log("server start...");
}

而後咱們再建一個index.js做爲入口（index.js與server.js放在同一目錄下）。

var server = require("./server");
  
server.start();

而後建一個index.html頁面。

<!doctype html>
<html>
    <head>
        <title>index</title>
        <metacontent="IE=8"http-equiv="X-UA-Compatible"/>
  
        <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
         
  
    </head>
    <body>
        <h2>這是首頁</h2>
  
    </body>
</html>

如今咱們就在要請求過來時，把此頁的內容讀出來，返給用戶。這時咱們就要用到fs模塊的方法了。

var http = require("http");
var fs = require('fs');
exports.start = function(){
    http.createServer(function(request, response) {
        fs.readFile('./index.html','utf-8',function(err, data) {//讀取內容
            if(err) throw err;
            response.writeHead(200, {"Content-Type":"text/html"});//注意這裏
            response.write(data);
            response.end();
        });
    }).listen(8888);
    console.log("server start...");
}

好了，這時咱們重啓再次輸入地址，就看到一個完整的頁面了。

但一個頁面除了HTML結構層外，還有javascript與css。那麼，咱們在當前目錄建一個文件夾javascripts，裏面建index.js，內容以下：

window.onload = function(){
   varp = document.createElement("p");
   p.innerHTML ="這是動態添加的"
   document.body.appendChild(p);
}

再建一個styles目錄，裏面建index.css，內容以下：

html,body{
   background:#3671A5;
   height: 100%
}

而後在index.html引入這兩個文件：

<!doctype html>
<html>
    <head>
        <title>index</title>
        <metacontent="IE=8"http-equiv="X-UA-Compatible"/>
        <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
        <linktype="text/css"rel="stylesheet"href="styles/index.css"/>
        <scriptsrc="/javascripts/index.js"></script>
   
    </head>
    <body>
        <h2>這是首頁</h2>
   
    </body>
</html>

從新打開，發現沒有改變，google，說要處理js與css文件的請求。沒有辦法，取得request.url屬性，再斷定後綴名，爲它進行文件讀取與設置首部。

var http = require("http");
var fs = require('fs');
var url = require('url');
exports.start = function(){
    http.createServer(function(request, response) {
        varpathname = url.parse(request.url).pathname;
        varext = pathname.match(/(\.[^.]+|)$/)[0];//取得後綴名
        switch(ext){
            case".css":
            case".js":
                fs.readFile("."+request.url,'utf-8',function(err, data) {//讀取內容
                    if(err) throw err;
                    response.writeHead(200, {
                        "Content-Type": {
                             ".css":"text/css",
                             ".js":"application/javascript",
                      }[ext]
                    });
                    response.write(data);
                    response.end();
                });
                break;
            default:
                fs.readFile('./index.html','utf-8',function(err, data) {//讀取內容
                    if(err) throw err;
                    response.writeHead(200, {
                        "Content-Type":"text/html"
                    });
                    response.write(data);
                    response.end();
                });
  
        }
  
    }).listen(8888);
    console.log("server start...");                                                                                                
}