用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 ...
随机推荐
- Git 实习一个月恍然大悟合集
从开始实习到现在大概有一个月了,这个月时间接触了很多新东西,其中就包括了git版本控制.分支管理等等.我在这段时间里,深深地感受到了git对公司项目代码管理和控制.团队合作带来的益处和其重要性.其实在 ...
- mongodb 数据操作(1)
切换/创建数据库 use test 添加数据db.student.save({name:"J33ack",age:25}) 查看数据库show dbs 删除当前数据库 db.dro ...
- Python 入门 之 初识面向对象
Python 入门 之 初识面向对象 1.初识面向对象编程 (核心--对象) (1)观察以下代码: # 面向过程编程 s = "alexdsb" count = 0 for i i ...
- 【笔记】vue实现简单项目和页面跳转
此项目适合不会前端,不会vue的人. 不会vue真正的开发,这里用vue和vant-ui简单搭一个商城app的tabbar和页面跳转. 装vue-cli3.0 根据官网快速上手搭建vant项目,官网 ...
- Codeforces 1201C. Maximum Median
传送门 看到中位数考虑先把数排序一下 然后有个显然的贪心,一个数增加后一定不能比下一个数大,不然我们直接增加下一个数显然更优 所以初始时的中位数操作后也是中位数 那么我们只要考虑中间再往后怎么加使得答 ...
- js中的奇闻异事
- python如何判断字符串是否以某个字母或者数字结尾
1.如果是对某个确定的字符或者数字进行判断,可以直接使用endswith()方法 # 判断str_a是否以‘A’结尾 str_a = '20190813A' print(str_a.endswith( ...
- java 枚举enum的使用（与在switch中的使用）
实际开发中,很多人可能很少用枚举类型.更多的可能使用常量的方式代替.但枚举比起常量来说,含义更清晰,更容易理解,结构上也更加紧密.看其他人的博文都很详细,长篇大论的,这里理论的东西不说了,一起看看在实 ...
- Android官方网站！
Android官方网站,所有Android相关文档.官方工具.示例,全部都在上面!! http://www.android.com/
- mysql如何快速创建相同结构的表
[1]. 快速创建相同结构的表,包括索引: mysql> SHOW CREATE TABLE a; CREATE TABLE `a` ( `name` varchar(50) default N ...