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...");                                                                                                
}