2019-10-29静态资源

什么是静态资源？
客户端向服务器端请求的这个资源，服务器端不需要做任何的处理，可以直接响应给客户端的资源，就是静态资源（主要是CSS、JS、images文件、html文件，就是浏览器能够直接运行的文件）

什么是动态资源？
相同的请求地址，可以传递不同的请求参数，得到不同的请求结果，那么这个响应结果就是动态资源，例如网址：http://www.lbb8.con/?id=1和http://www.lbb8.com/?id=2”

如何实现静态资源访问功能？
在服务器端创建一个专门的文件夹，用来放置这些静态资源，当客户端请求某个静态资源文件时，服务器端将这个静态资源文件直接响应给客户端，这就是静态资源访问功能。

为什么不通过双击文件的形式直接打开静态文件？
通过双击的形式打开文件，只能说明这个文件在你自己的电脑上，这个文件只要你自己能访问到，别人访问不到，如果希望在服务器端这些文件能被用户访问到，我们就需要实现这样一个静态资源访问功能。

实现：
新建文件夹static(静态文件)，目录下新建文件夹public(放置静态资源)→将静态资源拷贝在该文件夹下。
在static目录下新建文件app.js（创建网站服务器，并实现静态资源访问功能
app.js

const http = require('http');
const app = http.creatServer();
app.on('request',(req,res)=>{
    res.end('ok');
});
app.listen(3000);
console.log('服务器启动成功');

启动服务器，实现网站的访问
命令行窗口 :

nodemon app.js

浏览器地址栏中输入：

localhost:3000

返回：ok
思考：静态资源如何访问，到用户在地址栏中想要访问首页面，要访问default.html页面，它应该如何访问？
想法①：在服务器当中，default.html在public文件夹中，地址栏访问：localhost：3000/public/default.html(PS:请求地址只是一个字符串标识，它这个地址看起来像路径，但仅仅是看起来，也就是说这个地方请求的路径，和服务器真实的路径是可以不一样的)
想法②：用户访问的时候不需要输入public，仅仅只需要输入localhost：3000/default.html就能访问到这个页面（是可以实现的）
1.通过req.url获取到用户的请求路径，也就是说获取到/default.html，然后再把请求路径转换为文件在服务器上的真实物理路径，然后读取文件的内容，最终把读取的内容，返回到客户端，接下来开始做
切换到app.js中

const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const app = http.creatServer();
app.on('request',(req,res)=>{
    // 获取用户的请求路径
    let pathname = url.parse(req.url).pathname;
    // 获得绝对路径（将用户的请求路径转换为实际的服务器硬盘路径）
    let realPath = path.join(__dirname ,'piblic' + pathname);
    // 读取文件(PS：严谨，读取失败要做错误处理)
    fs.readFile(realPath,(error,result)=>{
            if(error != null){
            // 响应报文处理
           res.writeHead(404,{
                  'content-type':'text/html;charset=utf8'
           });
           res.end('文件读取失败')；           
           return;
           };
           res.end(result);
    })
    
});
app.listen(3000);
console.log('服务器启动成功');

以上就是一个最近被的静态资源访问代码。
=================================================.
优化
问题①：如果用户什么都没有输入的情况如何访问到index页面。
当客户端的请求路径是‘/’时，就去读index文件就可以了
问题②：当服务器端向客户端做出响应的时候，我们要告诉客户端当前给你的资源类型是什么？在浏览器执行代码时，源代码中会碰到link、image、script标签，他们具有共同的特点，他们可以去外链一些文件。此时html文件和那些文件是不同的文件，当前只是请求了html文件，没有请求link，image,script文件，就会失败，要怎么去指定当前的请求类型呢？该值不可能固定！
引入第三方模块：mime（功能：可以根据你当前请求的路径，分析出资源的类型，然后把类型通过返回值的方式传递给你）
问题③：为什么没有cont-type页面也能正常执行？因为现在使用的是高级浏览器，当你使用一些旧版本浏览器可能会出现问题，这就是网页中可能出现的隐患，所以要指定返回资源的类型
切换命令行工具下载mime模块

npm install mime
// 开启服务器
nodemon app.js

切换到app.js中

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

const app = http.creatServer();

app.on('request',(req,res)=>{
    // 获取用户的请求路径
    let pathname = url.parse(req.url).pathname;
    if(pathname == '/'){
           pathname = '/default.html';
    }else{
           pathname = pathname;
    }
    // 获得绝对路径（将用户的请求路径转换为实际的服务器硬盘路径）
    let realPath = path.join(__dirname ,'piblic' + pathname);
    // 利用mime模块，返回资源类型
    let type = mime.getType(realPath);
    // 读取文件(PS：严谨，读取失败要做错误处理)
    fs.readFile(realPath,(error,result)=>{
           if(error != null){
            // 响应报文处理
           res.writeHead(404,{
                  'content-type':'text/html;charset=utf8'
           });
           res.end('文件读取失败')；           
           return;
           };
           // 服务器端响应客户端，告诉客户端资源类型
          res.writeHead(200,{
               'content-type':type
          })
          res.end(result);
    });
    
});
app.listen(3000);
console.log('服务器启动成功');