Node.js搭建本地静态服务器

了解网络

HTTP(超文本传输协议)

主要内容

请求

请求头
请求体

响应

响应头
响应体

连接(三次握手)

断开(四次挥手)

基于Node.js静态服务器

url模块

• url是node.js的内建模块
• url模块中最重要的方法是parse()方法，用于将url字符串解析成为对象
• 基础语法:url.parse(url:string);

举例_url

var http = require('http');
var url = require('url');
//url为node.js中的内置模块，主要用于解析或者封装url地址
var server = http.createServer(function (req, res) {
    console.log(url.parse('http://localhost:4000/img.jpg'));
});

server.listen(4000, function () {
    console.log('server is running at 4000 666');
});

$ node index.js
server is running at 4000 666
Url {
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: 'localhost:4000',
  port: '4000',
  hostname: 'localhost',
  hash: null,
  search: null,
  query: null,
  pathname: '/img.jpg',
  path: '/img.jpg',
  href: 'http://localhost:4000/img.jpg' }

举例_fs

fs模块:fs->files system缩写
fs.readFile(); 读取文件内容
fs.state(); 读取文件状态

index.js

var fs = require('fs');
fs.readFile('./test.txt', function(error,data) {
    if(error){
        console.log(error);
    }else {
        console.log(data.toString());
    }
});

输出

$ node index.js
server is running at 4000 666
这是一个txt文本文件

返回对应的页面

var server = http.createServer(function (req, res) {
    // 得到用户访问了哪个地址
    var path = '.'+url.parse(req.url).pathname;
    // 发送用户访问了哪个网址
    fs.readFile(path, function(err, data) {
        if(err){
            console.log(err);
        }else{
            var html = data.toString();
            res.end(html);
        }
    });
});

url.parse(req.url).pathname 会解析到对应的路径

js.stat文件状态

fs.stat('public/test.txt', function (err,stat) {
    if(err){
        console.log(err);
    }else{
        console.log(stat);
    }
});

$ node index.js
server is running at 4000 厉害了
{ dev: 535335,
  mode: 33206,
  nlink: 1,
  uid: 0,
  gid: 0,
  rdev: 0,
  blksize: undefined,
  ino: 1407374883560421,
  size: 29,
  blocks: undefined,
  atime: 2017-02-14T01:50:56.535Z,
  mtime: 2017-02-14T02:20:15.197Z,
  ctime: 2017-02-14T02:51:00.394Z,
  birthtime: 2017-02-14T01:50:56.535Z }
这是一个txt文本文件

注意：fs.stat会先于fs.readFile执行。显示了异步执行。

综合应用：

var server = http.createServer(function (req, res) {
    // 得到用户访问了哪个地址
    var path = './public'+url.parse(req.url).pathname;
    fs.stat(path, function (err, stat) {
        if(!stat){
            // 如果访问的文件不存在，则进入分支
            fs.readFile("./public/404.html", function(err,data) {
                var html = data.toString();
                res.end(html);
            });
        }else{
            // 发送用户访问了哪个网址
            fs.readFile(path, function(err, data) {
                    var html = data.toString();
                    res.end(html);
            });
        }
    });
});

MIME信息

添加之后

var path = require('path');//处理一些文件目录、路径一类的信息
var MIME = {
    html:'text/html',
    css:'text/css'
}

发送内容的代码

var server = http.createServer(function (req, res) {
    // 得到用户访问了哪个地址
    var pathname = './public'+url.parse(req.url).pathname;
    fs.stat(pathname, function (err, stat) {
        if(!stat){
            // 如果访问的文件不存在，则进入分支
            fs.readFile("./public/404.html", function(err,data) {
                if(err){
                    console.log(err);
                }else{
                    var html = data.toString();
                    res.end(html);
                }
            });
        }else{
            // 发送用户访问了哪个网址
            fs.readFile(pathname, function(err, data) {
                if(err){
                    console.log(err);
                }else{
                    var html = data.toString();
                    var extname = (path.extname(pathname)).split('.')[1];
                    res.writeHead(200,{"Content-Type":MIME[extname]});
                    res.end(html);
                }
            });
        }
    });
});

修改，可以传图片

var MIME = {
    "":"text/html",
    html:'text/html',
    css:'text/css',
    jpg:"image/jpeg",
    png:"image/png",
    ico:"image/x-icon"
}

var server = http.createServer(function (req, res) {
    // 得到用户访问了哪个地址
    var pathname = './public'+url.parse(req.url).pathname;
    fs.stat(pathname, function (err, stat) {
        if(!stat){
            // 如果访问的文件不存在，则进入分支
            fs.readFile("./public/404.html", function(err,data) {
                if(err){
                    console.log("stat readFile" + err);
                }else{
                    var extname = (path.extname(pathname)).split('.')[1];
                    res.writeHead(200,{"Content-Type":MIME[extname]});
                    res.write(data);
                    res.end();
                }
            });
        }else{
            // 发送用户访问了哪个网址
            fs.readFile(pathname, function(err, data) {
                //访问根目录，就进入index.html
                if(err){
                    fs.readFile("./public/index.html", function(err,data) {
                        if(err){
                            console.log("stat readFile" + err);
                        }else{
                            //1.不能转字符串
                            //2.不用end转
                            var extname = (path.extname(pathname)).split('.')[1];
                            res.writeHead(200,{"Content-Type":MIME[extname]});
                            res.write(data);
                            res.end();
                        }
                    });
                }else{
                    var extname = (path.extname(pathname)).split('.')[1];
                    res.writeHead(200,{"Content-Type":MIME[extname]});
                    res.write(data);
                    res.end();
                }
            });
        }
    });
});

页面修改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页</title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <h1>这是HTML网页</h1>
        <h2>OK,没毛病</h2>
        <img src="./img/01.png" alt="">
    </body>
</html>

运行即可查看网页看到效果