nodejs基礎 用http模塊 搭建一個簡單的web服務器 響應JSON、html


前端在開發中,大多會想瀏覽器獲取json數據,下面來用nodejs中的http模塊搭建一個返回json數據的服務器

 

var http = require("http");

var onRequest = function(request,response){
    console.log("request received");
    response.writeHead(200,{"Content-Type":"application/json"});//application/json:代表響應的是json
    // response.write("傳回瀏覽器的內容");
    var jsonObj={
        name:"lili",
        job:"coder",
        age:18 }
    response.end(JSON.stringify(jsonObj));//將json傳回瀏覽器
}

var server = http.createServer(onRequest);

//最后讓服務器監聽一個端口
server.listen(3000,"127.0.0.1");//還可以加第二個參數 127.0.0.1代表的是本地

console.log("server started on localhost port 3000");//加一個服務器啟動起來的提示

然后運行 node app  啟動服務器

在瀏覽器訪問localhost:3000   發現瀏覽器會顯示 響應的json數據

 如果瀏覽器的json數據沒有 格式化  我們需要裝一個瀏覽器插件 JSON Formatter   安裝過之后,顯示的json數據就是格式化的

 

 

 

下面來創建一個響應html的web服務器:將Content-type的值改成text/html就行

var http = require("http");

var onRequest = function(request,response){
    console.log("request received");
    response.writeHead(200,{"Content-Type":"text/html"});//application/json:代表響應的是json
    // response.write("傳回瀏覽器的內容");
    var htmlFile = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html</title>
        <style>
            div{
                color:red;
                font-size:50px;
            }
        </style>
    </head>
    <body>
       <div>我是從服務器傳回來的html頁面</div> 
    </body>
    </html>`;
    response.end(htmlFile);//將json傳回瀏覽器
}

var server = http.createServer(onRequest);

//最后讓服務器監聽一個端口
server.listen(3000,"127.0.0.1");//還可以加第二個參數 127.0.0.1代表的是本地

console.log("server started on localhost port 3000");//加一個服務器啟動起來的提示

然后啟動服務器  頁面訪問localhost:3000   發現會出現html頁面樣式什么的都有!!!

 

但是這樣 將html代碼這樣寫在代碼中 顯的太粗暴了,我們可以將html頁面寫在一個文件中,然后用讀取流讀取過來

var http = require("http");
var fs = require("fs");

var onRequest = function(request,response){
    console.log("request received");
    response.writeHead(200,{"Content-Type":"text/html"});
    // response.write("傳回瀏覽器的內容");
    var myReadStream = fs.createReadStream(__dirname+"/index.html","utf8");//用讀取流,讀取其它文件內的html內容
    myReadStream.pipe(response);//將流讀取到的內容寫在響應中 注意這樣不需要用寫在response.end()中了
}

var server = http.createServer(onRequest);

//最后讓服務器監聽一個端口
server.listen(3000,"127.0.0.1");//還可以加第二個參數 127.0.0.1代表的是本地

console.log("server started on localhost port 3000");//加一個服務器啟動起來的提示

 

 

 

app.js是項目的入口,如果把代碼都寫在其中,越寫月臃腫,我們可以用模塊化的思想,來整理一下我們的代碼,我們可以將這個服務器相關的代碼單獨寫在一個文件中,然后用require引入到app.js入口文件中執行:

我們創建一個server.js文件:

var http = require("http");
var fs = require("fs");

var startServer = function(){
    var onRequest = function(request,response){
        console.log("request received");
        response.writeHead(200,{"Content-Type":"text/html"});//application/json:代表響應的是json
        // response.write("傳回瀏覽器的內容");
        var myReadStream = fs.createReadStream(__dirname+"/index.html","utf8");//用讀取流,讀取其它文件內的html內容
        myReadStream.pipe(response);//將流讀取到的內容寫在響應中 注意這樣不需要用寫在response.end()中了
    }

    var server = http.createServer(onRequest);

    //最后讓服務器監聽一個端口
    server.listen(3000,"127.0.0.1");//還可以加第二個參數 127.0.0.1代表的是本地

    console.log("server started on localhost port 3000");//加一個服務器啟動起來的提示
}

module.exports.startServer=startServer;

然后在app.js中引入

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

server.startServer();

這樣看着app.js就干凈了許多

這就是模塊化的思想,也可以稱為重構。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM