• node.js简单的页面输出


    在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...");                                                                                                
    }
  • 相关阅读:
    mock 接口
    mybatis批量插入
    使用vscode小技巧之解决前端import导入@开头路径无法跳转和路径补全问题
    大学
    英语邮件
    MongoDB的使用
    Windows安装MongoDB
    英语汇报项目进展模板
    Plotly数据可视化
    1、10个办公室英语表达
  • 原文地址:https://www.cnblogs.com/qhorse/p/4679659.html
Copyright © 2020-2023  润新知