超简单nodejs静态网页服务器

超简单的nodejs静态网页服务器

使用 nodejs 进行后端开发有一个非常方便的地方是它可以不依赖于其他的服务器软件，比如 tomcat 之类的。这里对我使用 nodejs 写的一个静态网页服务器做一个简单的总结

在这里使用到了以下模块：

• http：相应基本的 http 请求
• fs：读取文件并返回
• path：获取文件的路径
• url：解析 url

第一步，创建一个最基本的服务器

let http = require('http');
let server = http.createServer(function(request, response){
  response.end();
})
server.listen(8000);

这个服务器监听着 8000 端口的请求，但是由于没有任何处理函数，所以只是一个空架子

第二步，确定文件的路径

这一步就要依赖于我们的 fs、path和url 模块了

首先，我们通过 path 模块确定静态页面和资源文件所在的目录：

__dirname 可以直接获得当前目录的绝对路径，针对下面所示的目录结构可以写如下语句

|- serve.js
|- public
    |- index.html
    |- CSS
    |- JS
    |- Image

let staticPath = path.resolve(__dirname, 'public');

然后，我们要通过 url 模块，得到我们要访问的页面，利用我们的url模块进行解析
同时我们在访问目录的时候通常会直接访问到 index.html 我们也可以知青其中默认打开的页面：

let pathname = url.parse(request.url, true).pathname;
if (pathname == '/') {
    pathname = '/index.html';
}

如此一来就可以得到要访问的页面的绝对路径

let filePath = path.join(staticPath, pathname);

第三步，读入文件并相应

读入文件依赖于 fs 模块，值得一提的是我们可以通过 fs.readFileSync 同步读入，也可以用 fs.readFile 异步读入，后者性能相对更高

fs.readFile 的回调函数有两个参数，第一个参数是错误，第二个参数是 String 或者一个 Buffer ：

//异步读取file
fs.readFile(filePath, function (err, data) {
    if (err) {
        console.log(err);
        // 如果找不到文件资源报错可以显示准备好的 404页面
        let errPath = path.join(staticPath, '/404.html');
        fs.readFile(errPath, (err, data404) => {
            if (err) {
                console.log('error');
                response.write('404 Not Found');
                response.end();
            } else {
                response.writeHead(404, { "Content-Type": "text/html;charset='utf-8'" });
                response.write(data404);
                response.end();
            }
        })
    } else {
        console.log('');
        response.write(data);
        response.end();
    }
})

如果有提前准备好的错误页面，可以在文件读取错误的时候呈现出来，比如上面的例子

The End

综合以上内容得到代码如下，在 node 环境中运行就可以同于 8000端口访问和 serve.js同级的 public 目录下的静态页面了！

const http = require('http')
const fs = require('fs')
const url = require('url')
const path = require('path')
let server = http.createServer(function (request, response) {
    //获取输入的url解析后的对象
    let pathname = url.parse(request.url, true).pathname;
    if (pathname == '/') {
        pathname = '/index.html';
    }
    //static文件夹的绝对路径
    let staticPath = path.resolve(__dirname, 'public');
    //获取资源文件绝对路径
    let filePath = path.join(staticPath, pathname);
    console.log(filePath);


    //异步读取file
    fs.readFile(filePath, function (err, data) {
        if (err) {
            console.log(err);
            // 如果找不到文件资源报错可以显示准备好的 404页面
            let errPath = path.join(staticPath, '/404.html');
            fs.readFile(errPath, (err, data404) => {
                if (err) {
                    console.log('error');
                    response.write('404 Not Found');
                    response.end();
                } else {
                    response.writeHead(404, { "Content-Type": "text/html;charset='utf-8'" });
                    response.write(data404);
                    response.end();
                }
            })
        } else {
            console.log('ok');
            response.write(data);
            response.end();
        }
    })
})
server.listen(8000)
console.log('visit http://localhost:8000')