Node.js配置服务器(3-静态资源文件夹)

适用场景：上一章我们根据客户端请求路径读取对应的html文件并返回给用户，但是这个写法存在一个问题，一般前端页面都会引入很多css层叠样式表和js脚本，当我通过服务器返回html页面时，它里面所有相对的引入路径都会变为服务器路径，这时候我们想要引入的东西服务器没有配置的话就无法引入，如果一个一个配置的话需要配置很多的路由，费事不说，还造成了代码冗余，难以阅读，这时候就需要配置静态资源。

第一步：创建静态资源文件夹

在服务器脚本同级目录创建一个文件夹，命名为public(这个位置和命名是不固定的，看个人习惯了)，然后在public下创建你需要的文件夹，比如html、css、js、image等等。

现在我们创建三个html文件，分别是1.html、2.html、3.html，它们分别引入x.css\js 

第二步：编写服务器代码

我们继续在上次编写的代码基础上添加静态资源配置。

const http = require('http');
const fs = require('fs');
const PORT = 8080;
// 响应类型对象配置项
const mime = {
	".jpg" : "image/jpeg",
	".jpeg" : "image/jpeg",
	".gif" : "image/gif",
	".png" : "image/png",
	".html" : "text/html;charset=UTF-8",
	".css" : "text/css",
	".js" : "application/x-javascript",
	".mp3" : "audio/mpeg",
	".mp4" : "video/mpeg"
};

http.createServer((req,res)=>{
    if(req.url === '/'){
        fs.readFile(__dirname+'/public/html/index.html','utf-8',(err,data)=>{
            if(err){
                res.statusCode = 500;
                res.end('error');
            }else{
                res.setHeader('Content-Type',mime['.html']);
                res.end(data);
            }
        });
    }else if(req.url === '/home'){
        fs.readFile(__dirname+'/public/html/home.html','utf-8',(err,data)=>{
            if(err){
                res.statusCode = 500;
                res.end('error');
            }else{
                res.setHeader('Content-Type',mime['.html']);
                res.end(data);
            }
        });
    }else if(req.url === '/shopping'){
        fs.readFile(__dirname+'/public/html/shopping.html','utf-8',(err,data)=>{
            if(err){
                res.statusCode = 500;
                res.end('error');
            }else{
                res.setHeader('Content-Type',mime['.html']);
                res.end(data);
            }
        });
    }else{
        fs.readFile(__dirname+'/public'+req.url,'utf-8',(err,data)=>{
            if(err){
                res.statusCode = 404;
                res.end('404 not Found');
            }else{
                const suffix = '.'+req.url.split('.').pop();
                if(mime[suffix]){
                    res.setHeader('Content-Type',mime[suffix]);
                    res.end(data);
                }else{
                    res.statusCode = 416;
                    res.setHeader('Content-Type','text/plain;charset=UTF-8');
                    res.end('该类型文件不支持访问！');
                }
            }
        });
    }
}).listen(PORT,()=>{
    console.log('open server');
    console.log(`http://127.0.0.1:${PORT}/`);
})

在访问路径不符合我们配置的所有路由时，把访问路径和静态资源文件夹路径拼接，然后去读取文件，读取不到说明没有这个文件，返回404即可，读取到了就进行下一步处理。读取到客户端请求的文件之后，通过请求路径获取出文件后缀名，然后判断我们是否有对应后缀名的配置项，如果有，就设置该响应头，然后返回响应数据，如果不是，就返回提示信息。

我们来看一下效果：

服务器静态资源的配置到这里就结束了，感谢观看