码迷,mamicode.com
首页 > Web开发 > 详细

用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!

时间:2018-10-15 23:12:49      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:rect   fun   目录   video   建立   not   inf   服务   OLE   

昨天刚买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在tomcat,linux,node.js间想了好久最终因为node搭建比较方便没那么麻烦就决定用node.js来搭建网站项目。

搭建服务器也很简单首先下载完安装node.js后,建立一个项目文件夹在文件夹下建一个js文件可任意取名,这个文件对项目进行配置

"use strict";
//加载所需要的模块
var http = require(‘http‘);
var url = require(‘url‘);
var fs = require(‘fs‘);
var path = require(‘path‘);
var cp = require(‘child_process‘);

//创建服务
var httpServer = http.createServer(processRequest);
// 这是端口号
var port = 80;

//指定一个监听的接口
httpServer.listen(port, function() {
    console.log(`app is running at port:${port}`);
    console.log(`url: http://localhost:${port}`);
    cp.exec(`explorer http://localhost:${port}`, function () {
    });
});

//响应请求的函数
function processRequest (request, response) {
    //mime类型
    var mime = {
        "css": "text/css",
        "gif": "image/gif",
        "html": "text/html",
        "ico": "image/x-icon",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "js": "text/javascript",
        "json": "application/json",
        "pdf": "application/pdf",
        "png": "image/png",
        "svg": "image/svg+xml",
        "swf": "application/x-shockwave-flash",
        "tiff": "image/tiff",
        "txt": "text/plain",
        "wav": "audio/x-wav",
        "wma": "audio/x-ms-wma",
        "wmv": "video/x-ms-wmv",
        "xml": "text/xml"
    };
    
    //request里面切出标识符字符串
    var requestUrl = request.url;
    //url模块的parse方法 接受一个字符串,返回一个url对象,切出来路径
    var pathName = url.parse(requestUrl).pathname;

    //对路径解码,防止中文乱码
    var pathName = decodeURI(pathName);

    //解决301重定向问题,如果pathname没以/结尾,并且没有扩展名
    if (!pathName.endsWith(‘/‘) && path.extname(pathName) === ‘‘) {
        pathName += ‘/‘;
        var redirect = "http://" + request.headers.host + pathName;
        response.writeHead(301, {
            location: redirect
        });
        //response.end方法用来回应完成后关闭本次对话,也可以写入HTTP回应的具体内容。
        response.end();
    }

    //获取资源文件的绝对路径
  /*  var filePath = path.resolve(__dirname + pathName);*/
   //__dirname是访问项目静态资源的路径 我的项目静态文件都在public下所以我写public可根据自己项目路径来配置哦
  var filePath = path.resolve("public" + pathName);
    console.log(filePath);
    //获取对应文件的文档类型
    //我们通过path.extname来获取文件的后缀名。由于extname返回值包含”.”,所以通过slice方法来剔除掉”.”,
    //对于没有后缀名的文件,我们一律认为是unknown。
    var ext = path.extname(pathName);
    ext = ext ? ext.slice(1) : ‘unknown‘;

    //未知的类型一律用"text/plain"类型
    var contentType = mime[ext] || "text/plain";

    fs.stat(filePath, (err, stats) => {
        if (err) {
            response.writeHead(404, { "content-type": "text/html" });
            response.end("<h1>404 Not Found</h1>");
        }
        //没出错 并且文件存在
        if (!err && stats.isFile()) {
            readFile(filePath, contentType);
        }
        //如果路径是目录
        if (!err && stats.isDirectory()) {
            var html = "<head><meta charset = ‘utf-8‘/></head><body><ul>";
            //读取该路径下文件
            fs.readdir(filePath, (err, files) => {
                if (err) {
                    console.log("读取路径失败!");
                } else {
                    //做成一个链接表,方便用户访问
                    var flag = false;
                    for (var file of files) {
                        //如果在目录下找到index.html,直接读取这个文件
                        if (file === "index.html") {
                            readFile(filePath + (filePath[filePath.length-1]==‘/‘ ? ‘‘ : ‘/‘) + ‘index.html‘, "text/html");
                            flag = true;
                            break;
                        };
                        html += `<li><a href=‘${file}‘>${file}</a></li>`;
                    }
                    if(!flag) {
                        html += ‘</ul></body>‘;
                        response.writeHead(200, { "content-type": "text/html" });
                        response.end(html);
                    }
                }
            });
        }

        //读取文件的函数
        function readFile(filePath, contentType){
            response.writeHead(200, { "content-type": contentType });
            //建立流对象,读文件
            var stream = fs.createReadStream(filePath);
            //错误处理
            stream.on(‘error‘, function() {
                response.writeHead(500, { "content-type": contentType });
                response.end("<h1>500 Server Error</h1>");
            });
            //读取文件
            stream.pipe(response);
        }
    });
}

 

这个配置可以对文件的类型,路径进行解析。应为我的项目路径是

技术分享图片

所以我这个js配置这个写的是public大家可根据自己项目路径来配置

   //__dirname是访问项目静态资源的路径 我的项目静态文件都在public下所以我写public可根据自己项目路径来配置
  var filePath = path.resolve("public" + pathName);

然后直接启动 node node.js项目就跑起来了,静态文件全部正确加载了,跳转链接也可以用.

用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!

标签:rect   fun   目录   video   建立   not   inf   服务   OLE   

原文地址:https://www.cnblogs.com/zimengxiyu/p/9794997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!