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

時間 2019-12-11

標籤 nodejs 基礎 http 模塊搭建一個簡單 web 服務器響應 json html 欄目 HTTP/TCP 简体版

原文原文鏈接

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

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數據node

若是瀏覽器的json數據沒有格式化咱們須要裝一個瀏覽器插件 JSON Formatter 安裝過以後，顯示的json數據就是格式化的web

下面來建立一個響應html的web服務器：將Content-type的值改爲text/html就行json

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入口文件中執行：app

咱們建立一個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中引入ui

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

server.startServer();

這樣看着app.js就乾淨了許多

這就是模塊化的思想，也能夠稱爲重構。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

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