昨天买了一个服务器想着用来测试一些自己的项目，由于是第一次建站，在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</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);

        }

    });

}

这个配置可以对文件的类型，路径进行解析。

因为我的项目静态资源都在public文件下所以这里就写成public。大家可根据自己项目路径来配置

   //这里是是访问项目静态资源的路径 我的项目静态文件都在public下所以我写public可根据自己项目路径来配置

  var filePath = path.resolve("public" + pathName);

这里设置的是端口号，可以根据需要自己来更改

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 () {

    });//这行代码作用是项目运行成功后自动打开项目网页不想要的话可以去掉

});

然后直接启动 node node.js项目就跑起来了，静态文件全部正确加载了，跳转链接也可以用。访问的话直接访问域名或Ip名就能直接打开项目页面了

用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现！的更多相关文章

  1. 搭建nginx静态资源站

    搭建静态资源站包括以下几部分: root指令与alias指令的区别 使用gzip压缩资源 如何访问指定目录下的全部资源文件 如何限制访问流量 如何自定义log日志 root指令与alias指令的区别 ...

  2. nginx系列3：搭建一个静态资源web服务器

    搭建静态资源web服务器 1,创建静态页面 在nginx的安装目录(/usr/local/nginx)下创建文件夹webapplications/helloworld,然后创建一个名为index.ht ...

  3. 从零开始,在windows上用nodejs搭建一个静态文件服务器

    从零开始,在windows上用nodejs搭建一个静态文件服务器 首先安装nodejs: 新建一个node文件夹 下载node.exe到该文件夹 下载npm然后解压到该文件夹 现在node文件夹是这样 ...

  4. 如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课

    序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...

  5. 如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课

    序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...

  6. 利用git+hugo+markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

  7. 使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

    序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...

  8. SpringMVC中css,js,图片等静态资源被拦截的解决办法

    一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...

  9. 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）

    很长一段时间没有写3D库房,3D密集架相关的效果文章了,刚好最近有相关项目落地,索性总结一下 与之前我写的3D库房密集架文章<如何用webgl(three.js)搭建一个3D库房,3D密集架,3 ...

随机推荐

  1. # ACM奇淫技巧

    目录 ACM奇淫技巧 差分操作 坐标旋转 ACM 卡常优化 vsc代码块(头文件模板) 读入输出优化 逗号表达式 内联函数inline 寄存器变量register 条件判断加减代替取模 自增运算符优化 ...

  2. thinkphp5.1 关于加载静态资源路径问题

    和thinkphp5.0不一样,thinkphp5.1的 thinkphp5.0的 直接在config.php文件中加入代码: <?phpreturn [ 'view_replace_str' ...

  3. python 操作mongodb 文件相关

    https://api.mongodb.com/python/current/tutorial.html# 文档地址 from pymongo import MongoClientfrom gridf ...

  4. Python 入门 之 面向对象的三大特性（封装 / 继承 / 多态）

    Python 入门 之 面向对象的三大特性(封装 / 继承 / 多态) 1.面向对象的三大特性: (1)继承 ​ 继承是一种创建新类的方式,在Python中,新建的类可以继承一个或多个父类,父类又可以 ...

  5. python-redis-订阅和发布

    发布:redishelper.py import redis class RedisHelper: def __init__(self): self.__conn = redis.Redis(host ...

  6. nginx配置：静态访问txt文件

    有一个A网站,访问的话会重定向跳转到B网站上,在A网站的nginx配置文件中配置的有如下: location / { rewrite ^/(.*) http://B/$1 redirect; } 现在 ...

  7. 如何在万亿级别规模的数据量上使用Spark

    一.前言 Spark作为大数据计算引擎,凭借其快速.稳定.简易等特点,快速的占领了大数据计算的领域.本文主要为作者在搭建使用计算平台的过程中,对于Spark的理解,希望能给读者一些学习的思路.文章内容 ...

  8. 多线程的些许理解（平台x86，具体考虑linux,windows）

    多线程的些许理解 一.体系架构 1.原子操作 1) 定义 不可中断的一个或者一系列操作,也就是不会被线程调度机制打断的操作,在运行期间不会有任何的上下文切换(context switch). 2) 我 ...

  9. WebAPI跨域问题处理

    1.按照https://dzone.com/articles/access-control-allow-origin-header-and-the-aspnet文章所述,在程序中配置允许跨域请求. 但 ...

  10. python-迭代器与生成器3

    python-迭代器与生成器3 迭代器可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带 ...