分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 02:18责任编辑:胡小海关键词:js

昨天刚买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在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正确加载 跳转也完美实现!

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved