node.js学习8--http模块-处理静态资源

http模块-处理静态资源

静态资源指的是html文件中链接的外部资源，如css、js、image文件等等。

处理二次请求

从服务器获取html文件之后，如果这个html文件中还引用了其它的外部资源（图片，样式文件等），则浏览器会重新再发请求。

假设在index.html中还引入了 style.css、 1.png 或者 .js文件，则：

浏览器请求localhost:index.html之后，得到的从服务器反馈的内容，解析的过程中还发现有外部的资源，所以浏览器会再次发出第二次请求，再去请求相应的资源。

一个最朴素的想法是根据不同的请求来返回不同的文件。

const http = require('http');
const fs = require('fs');
const path = require('path');

//创建服务器
const app = http.createServer((req, res) => {

  if (req.url === '/index.html') {
    let htmlString = fs.readFileSync(path.join(__dirname, 'index.html'));
    res.end(htmlString);
  }
  else if (req.url === '/style.css') {
    let cssString = fs.readFileSync(path.join(__dirname, 'style.css'));
    res.setHeader('content-type', 'text/css');
    res.end(cssString);
  } else if (req.url === '/1.png') {
    let pngString = fs.readFileSync(path.join(__dirname, '/1.png'));
    res.end(pngString);
  } else {
    res.setHeader('content-type', 'text/html;charset=utf-8');
    res.statusCode = 404;
    res.end('<h2>可惜了, 找不到你要的资源' + req.url + '</h2>');
  }
}); 
//启动服务器，监听8082端口
app.listen(8082, () => {
  console.log('8082端口启动');
});

为不同的文件类型设置不同的 Content-Type

通过使用res对象中的setHeader方法，可以设置content-type这个响应头。这个响应头的作用是告诉浏览器，本次响应的内容是什么格式的内容。以方便浏览器进行处理。

常见的几种文件类型及content-type如下。

• .html：res.setHeader('content-type', 'text/html;charset=utf-8')
• .css：res.setHeader('content-type', 'text/css;charset=utf-8')
• .js：res.setHeader('content-type', 'application/javascript')
• .png：res.setHeader('content-type', 'image/png')

其它类型参考

批量处理请求

由于开发者无法事先得知一个.html文件中会引用多少个静态资源，所以，不能像处理某个页面一样去处理它们。正确的解决办法有两大类：

1. 把这类静态资源连同所有的.html文件全放在固定的文件夹中。在用户请求时，当判断当前的req.url是在这个文件夹下就是直接读内容，并返回。

2. 分析后缀名，如果是允许的，就直接返回。