08 - 静态资源的设置

• 1. 当加载一个页面的时候,如果里面有对应的资源文件,会自动发送对应的请求,所以我们需要读取文件对应的文件
• 2. 因为路由本身是虚拟的,而且会自动发送请求,所以我们只需要设置对应的读取文件
• 3. 一般情况下,自动请求时候的路径的路由就是我们对应的资源文件的名称

  • 127.0.0.1:/css/comQ.cs3000

  • 经过分析 默认请求的路径的 pathname 就是资源文件的路径

  • 所以我们只需要获取对应的pathname

  var pathName = url.parse(req.url).pathname;

• 4. 因为一般如果当对应的路由是 / 表示加载index.html(这个步骤不能缺少)

 if(pathName == '/'){
        pathName = '/index.html';
    }

• 5. 通过pathname读取对应的文件
     与文件夹拼接构成读取文件的路径

fs.readFile('./static'+pathName,function (err, data) {}

• 6. 当有错误的时候,我们加载对应的错误页面（404页面）

if (err){
            /*当有错误的时候,我们加载对应的错误页面*/
            fs.readFile('./static/404.html',function (err, data) {
                res.writeHead(200,{"Content-Type":"html/css;charset=UTF8"});
                res.end(data);
            })
        }

• 7. 当读取其他的资源文件的时候,因为有不同的资源，所以我们需要设置不同的响应头。

  • 如果是html就设置text/html

  • css :text/css

  • jpg :image/jpg

  • 解决:根据后缀名来判断对应的响应头

  • 因为通过后缀名获取对应的响应头是一个功能，所以我们可以把这个功能封装成一个函数

  • node.js是包的事件，所以应该先想到会有对应的内置包实现相应的功能。

• 获取后缀名的方法：

  • 需要导入 path 包

  • 调用 extname 方法，表示获取对应的传入参数的后缀名

var extName = path.extname(pathName);

• 封装一个函数用来根据后缀名获取对应的响应头设置

function getExtName(extname) {
    switch (extname){
        case '.html':
            return 'text/html';
            break;
        case '.css':
            return 'text/css';
            break;
        case '.jpg':
            return 'image/jpg';
            break;
    }
}

通过封装的函数获取对应的相应头的对应信息

var mine = getExtName(extName);

---

案例：获取网页中的静态资源

var http = require('http');
var fs = require('fs');
var url = require('url');
var path = require('path');

var server = http.createServer(function (req, res) {
    // fs.readFile('./static/index.html',function (err, data) {
    //     res.writeHead(200,{'Content-Type':'text/html;charset = UTF8'});
    //     res.end(data);
    // })

    /*当加载一个页面的时候,如果里面有对应的资源文件,会自动发送对应的请求
     * 所以我们需要读取文件对应的文件
     * 因为路由本身是虚拟的,而且会自动发送请求
     * 所以我们只需要设置对应的读取文件
     * 一般情况下,自动请求时候的路径的路由就是我们对应的资源文件的名称
     * 127.0.0.1:/css/comQ.cs3000
     * 经过分析默认请求的路径的pathname就是资源文件的路径
     * 所以我们只需要获取对应的pathname*/

    var pathName = url.parse(req.url).pathname;

    /*因为一般如果当对应的路由是/表示加载index.html（这一步骤不可或缺）*/
    if(pathName == '/'){
        pathName = '/index.html';
    }
    /*获取对应的后缀名
     * extname方法:表示获取对应的传入参数的后缀名*/
    var extName = path.extname(pathName);

    /*通过pathname读取对应的文件*/
    fs.readFile('./static'+pathName,function (err, data) {
        if (err){
            /*当有错误的时候,我们加载对应的错误页面*/
            fs.readFile('./static/404.html',function (err, data) {
                res.writeHead(200,{"Content-Type":"html/css;charset=UTF8"});
                res.end(data);
            })
        }
        else{
            /*读取其他的资源文件
             * 当读取其他的资源文件的时候,因为有不同的资源
             * 所以我们需要设置不同的响应头
             *如果是html就设置text/html
             * css :text/css
             * jpg :image/jpg
             * 解决:根据后缀名来判断对应的响应头
             * 因为通过后缀名获取对应的响应头是一个功能
             * 所以我们可以把这个功能封装成一个函数*/

            var mine = getExtName(extName);

            /*在这种情况下,我们不需要关心文字,所以我们可以不设置编码格式*/
            res.writeHead(200,{'Content-Type':mine});
            res.end(data);
        }
    })

});
server.listen(3000,'127.0.0.1');

/*封装一个函数用来根据后缀名获取对应的响应头设置*/
function getExtName(extname) {
    switch (extname){
        case '.html':
            return 'text/html';
            break;
        case '.css':
            return 'text/css';
            break;
        case '.jpg':
            return 'image/jpg';
            break;
    }
}