• 静态资源服务器功能


    /**
     * 静态服务器功能:核心模块HTTP
     * 初步实现服务器功能
     */
    const http = require('http');
    //创建服务器实例对象
    let server = http.createServer();
    //绑定请求事件
    server.on('request',(req,res) => {
        res.end('hello');
    });
    //监听端口  访问地址:localhost:3000
    server.listen(3000);
    //=========================================
    http.createServer((req,res) => {
        res.end('ok');
    }).listen(3000,'196.167.0.8',() => {
        //此时不能再用localhost访问了,只能用IP地址:3000
        console.log('running...');
    });
    /**
     * 处理请求路径的分发
     * 因为访问localhost:3000、localhost:3000/index.html、localhost:3000/about.html等页面时,显示内容都一样
     * 1.req对象是Class:http.IncomingMessage的实例对象
     * 2.res对象是Class:http.ServerResponse的实例对象
     */
    const http = require('http');
    http.createServer((req,res) => {
        //req.url可以获取URL中的路径(端口之后的路径)
        //res.end(req.url);
        if(req.url.startsWith('/index')){
            //write向客户端相应内容,可多次写回,拼写到一起
            res.write('hello');
            res.write('welcome');
            //end用来完成响应,可以带参数也可以不带,只能执行一次
            res.end('index');      
        }else if(req.url.startsWith('/about')){
            res.end('about');
        }else{
            res.end('no content');
        }
    }).listen(3000,'196.167.0.8',() => {
        //此时不能再用localhost访问了,只能用IP地址:3000
        console.log('running...');
    });
    /**
     * 响应完整的页面信息,先创建多个文件,利用路径分发功能分别对不同页面进行响应
     */
    const http = require('http');
    const path = require('path');
    const fs = require('fs');
    //根据路径读取文件的内容,并且相应到浏览器
    //抽取出来作为单独的一个方法
    let readFile = (url,res) => {
        fs.readFile(path.join(__dirname,url),'utf8',(err,fileContent) => {
            if(err){
                res.end('server error');
            }else{
                res.end(fileContent);
            }
        });
    }
    //处理路径分发
    http.createServer((req,res) => {
        if(req.url.startsWith('/index')){
            readFile('index.html',res);
        }else if(req.url.startsWith('/about')){
            readFile('about.html',res);
        }else if(req.url.startsWith('/list')){
            readFile('list.html',res);
        }else{
            //设置相应类型和编码,否则没有响应投不能正常跳转
            res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf8'});
            res.end('404 not found');
        }
    }).listen(3000,'196.167.0.8',() => {
        //此时不能再用localhost访问了,只能用IP地址:3000
        console.log('running...');
    });

    随着页面分支越来越多,上述方式不够灵活,应该根据url去获取这个文件(利用req.url获取到的是端口号后面的路径)

    /**
     * 路径分发的改进
     */
    const http = require('http');
    const path = require('path');
    const fs = require('fs');
    //引入mime模块,作用就是根据url的后缀,返回对应的Content-Type,或者你传递Content-Type,它返回对应的文件类型的后缀
    //安装mime模块:npm install mime --save
    const mime = require('mime');
    //处理路径分发
    http.createServer((req,res) => {
        fs.readFile(path.join(__dirname,req.url),(err,fileContent) => {
            if(err){
                //没有找到对应文件
                //设置响应头信息,避免出现乱码
                res.writeHead(404,{
                    'Content-Type':'text/plain;charset=utf8'
                });
                //res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf8'});
                res.end('页面丢失了');
            }else{
                //获取请求文件的后缀
                //默认类型:
                //let dType = 'text/html';
                //let ext = path.extname(req.url);
                //console.log(ext);
                //console.log(mime[ext]);
                //console.log(mime.getType(path.join(__dirname,req.url)));
                //如果哟请求的文件后缀合理,就获取到标准的响应格式
                //如果mime里面存在这个后缀,则覆盖默认的后缀类型
                //这种做法不行,一直处在默认类型,进不了这个循环
                /* if(mime[ext]){
                    dType = mime[ext];
                } */
           //mime.getType(filePath)
                let dType = mime.getType(path.join(__dirname,req.url));
                //如果是文本类型,则需要设置其编码类型
                if(dType.startsWith('text')){
                    dType += ';charset=utf8'
                }
                //设置响应头信息
                res.writeHead(200,{'Content-Type':dType});
                res.end(fileContent);
            }
        });
    }).listen(3000,() => {
      console.log('running...');
    });

    为了对静态资源服务器这个功能进行优化,可以将这部分功能抽取成一个独立的模块,方便以后使用。

    /**
     * 抽取模块:01.js文件
     */
    const http = require('http');
    const path = require('path');
    const fs = require('fs');
    const mime = require('mime');
    //root表示文件的根路径
    exports.staticServer = (req,res,root) => {
        fs.readFile(path.join(root,req.url),(err,fileContent) => {
            if(err){
                //没有找到对应文件
                //设置响应头信息,避免出现乱码
                res.writeHead(404,{
                    'Content-Type':'text/plain;charset=utf8'
                });
                //res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf8'});
                res.end('页面丢失了');
            }else{let dType = mime.getType(path.join(__dirname,req.url));
                //如果是文本类型,则需要设置其编码类型
                if(dType.startsWith('text')){
                    dType += ';charset=utf8'
                }
                //设置响应头信息
                res.writeHead(200,{'Content-Type':dType});
                res.end(fileContent);
            }
        });
    }
    /**
     * 测试模块:02.js文件
     */
    const http = require('http');
    const path = require('path');
    const ss = require('./03.js');
    http.createServer((req,res) => {
        ss.staticServer(req,res,path.join(__dirname));
    }).listen(3000,() => {
        console.log('running...');
      });
  • 相关阅读:
    简简单单的 JavaScript简写技巧
    常用的前端小知识
    nuxt项目部署对静态页重编译问题
    docker 容器部署nuxt项目
    mysql数据库损坏修复问题
    storm supervisor和nimbus启动自动消失的问题
    MATLAB基础知识
    音视频入门-20-BMP、PNG、JPG、GIF静态图生成GIF动态图
    处理树状结构数据以及 React渲染
    React Hooks 获取最新数据问题
  • 原文地址:https://www.cnblogs.com/zcy9838/p/11616751.html
Copyright © 2020-2023  润新知