1. 程式人生 > >Nodejs搭建web伺服器

Nodejs搭建web伺服器

使用Nodejs + http 建立web伺服器 1、首先建立一個server.js檔案,建立伺服器,以及對應css和js檔案的引入和判斷 var http=require(‘http’); var fs = require(‘fs’); var url = require(‘url’);

	//建立伺服器
	http.createServer(function(request,response) {
	  //解析請求,包括檔名
	  var pathname= url.parse(request.url).pathname;
	  //輸出請求的檔名
	  console.log("Request for "+ pathname + "  received.");
	//獲取字尾,判斷是js還是css檔案,如果目錄結構不同,此處需要修改
	  var firstDir = pathname && pathname.split('/')[1];
	  var ContentType = {'Content-Type': 'text/html'};

	  // js - application/x-javascript
	  if (firstDir && firstDir === 'static') {
	    ContentType = {'Content-Type': 'text/css'};
	  } 
	  if (firstDir && firstDir === 'js') {
	    ContentType = {'Content-Type': 'application/x-javascript'}
	  }

	  //從檔案系統中去請求的檔案內容
	  fs.readFile(pathname.substr(1),function(err, data) {
	    if(err) {
	      console.log(err);
	      //HTTP 狀態碼 404 : NOT FOUND
	      //Content Type:text/plain
	      response.writeHead(404, {'Content-Type': 'text/html'});
	    }
	    else {
	      //HTTP 狀態碼 200 : OK
	      //Content Type:text/plain
	      response.writeHead(200, ContentType);

	      //寫會回相應內容
	      response.write(data.toString());
	    }
	    //傳送響應資料
	    response.end();
	  });
	}).listen(8080);

	console.log('Server running at http://127.0.0.1:8080/');	

2、 建立一個簡單的html頁面 ,此處是兩個邊框,然後是一個表格,並在第二個邊框新增上一個點選事件, 作為引入另一個js檔案

index <!--

3、css樣式檔案和上面寫的style標籤內容一樣 body { border: 1px solid blue; }

	div {
	    border-radius: 10px;
	    width: 400px;
	    height: 200px;
	    border: 2px solid yellow;
	}

4、這個是js檔案 console.log(’-成功引入js檔案-’); function onClickDiv () { alert(‘second點選事件’); }

整體上就這麼多了!詳細的都有註釋,大家可以自己看看,相對上也比較簡單,具體步驟我也簡單說下:

1、下載安裝nodejs,官網就可以了,此處使用的是http,也有的例子使用的是express(需要在nodejs中下載, 詳細的自己可以百度下看看) 2、進入到此專案中js檔案那層目錄,執行node server.js(此處取名為server,具體看自己的名稱) 3、執行成功會列印伺服器啟動,並顯示ip和埠號 4、開啟瀏覽器http://127.0.0.1:8080/index.html即可檢視效果

最後上圖: 在這裡插入圖片描述

在這裡插入圖片描述