用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!
昨天买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在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正确加载 跳转也完美实现!的更多相关文章
- 搭建nginx静态资源站
搭建静态资源站包括以下几部分: root指令与alias指令的区别 使用gzip压缩资源 如何访问指定目录下的全部资源文件 如何限制访问流量 如何自定义log日志 root指令与alias指令的区别 ...
- nginx系列3:搭建一个静态资源web服务器
搭建静态资源web服务器 1,创建静态页面 在nginx的安装目录(/usr/local/nginx)下创建文件夹webapplications/helloworld,然后创建一个名为index.ht ...
- 从零开始,在windows上用nodejs搭建一个静态文件服务器
从零开始,在windows上用nodejs搭建一个静态文件服务器 首先安装nodejs: 新建一个node文件夹 下载node.exe到该文件夹 下载npm然后解压到该文件夹 现在node文件夹是这样 ...
- 如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课
序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...
- 如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课
序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...
- 利用git+hugo+markdown 搭建一个静态网站
利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...
- 使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课
序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...
- SpringMVC中css,js,图片等静态资源被拦截的解决办法
一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...
- 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室(升级版)
很长一段时间没有写3D库房,3D密集架相关的效果文章了,刚好最近有相关项目落地,索性总结一下 与之前我写的3D库房密集架文章<如何用webgl(three.js)搭建一个3D库房,3D密集架,3 ...
随机推荐
- Luogu P5221 Product
题目 注意一下空间限制. 令\(f(n)=\prod\limits_{i=1}^n\prod\limits_{j=1}^nij,g(n)=\prod\limits_{i=1}^n\prod\limit ...
- Feign声明式服务调用
Feign是一种声明式.模板化的HTTP客户端(仅在Application Client中使用).声明式调用是指,就像调用本地方法一样调用远程方法,无需感知操作远程http请求. Spring Clo ...
- ELK电子书籍
Elasticsearch in Action(英文版).pdfElasticsearch实战 in action(中文版).pdfElasticsearch技术解析与实战.pdfElasticsea ...
- luogu题解 P2212 【浇地Watering the Fields】
题目链接: https://www.luogu.org/problemnew/show/P2212 思路: 一道最小生成树裸题(最近居然变得这么水了),但是因为我太蒻,搞了好久,不过借此加深了对最小生 ...
- 提升scrapy的爬取效率
增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100值为100,并发设置成了为100. 降低日志级别 ...
- 关于redis的几件小事(十)redis cluster模式
redis cluster是redis提供的集群模式. 1.redis cluster的架构 ①可以有多个master node,每个master node 都可以挂载多个slave node. ②读 ...
- Android官方网站!
Android官方网站,所有Android相关文档.官方工具.示例,全部都在上面!! http://www.android.com/
- leetcode240 搜索二维矩阵 II
题目: 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 ma ...
- Java LinkedHashMap学习
以前一直使用HashMap,今天学习一下LinkedHashMap JavaDoc 注解: Hash table and linked list implementation of the Map i ...
- 2019-2020-1 20199319《Linux内核原理与分析》第五周作业
系统调用的三层机制(上) 基础知识 1.通过库函数的方式进行系统调用,库函数用来把系统调用给封装起来. 2.CPU有四种不同的执行级别:0.1.2.3,数字越小,特权越高.Linux操作系统中采用了0 ...