HTTP node静态资源请求加载demo

MIME type的缩写为(Multipurpose Internet Mail Extensions)代表互联网媒体类型(Internet media type),MIME使用一个简单的字符串组成,最初是为了标识邮件Email附件的类型,在html文件中可以使用content-type属性表示,描述了文件类型的互联网标准。

自己总结的小demo:贴出server部分的代码,每一行代码都有注释,有不对的地方,希望大家多多指正哈

var http=require("http");
var url=require("url");
var fs=require("fs");
var path=require("path");
var MIME_TYPE = {
    "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"
};
function start(router,handle){
    function onRequest(request,response){
        var pathname=url.parse(request.url).pathname;
         var filePath;
        request.setEncoding("utf8");
        if(typeof handle[pathname] === ‘function‘){//如果有对应的处理方法
        router(handle,pathname,response);
        }else{         //如果请求的是静态数据。如果没有,判断是否是静态数据
            filePath= "/public" + url.parse(request.url).pathname;
            fs.exists(__dirname +filePath,function(err){
            if(!err){
                response.writeHead(404,{‘content-type‘:‘text/plain‘ });
                response.write(‘The Resourse ‘+pathname+‘ was Not Found!‘);
                response.end();
            }else{//文件存在
                //获取文件的扩展名称,如果没有返回" "
                var ext = path.extname(filePath);
                //如果扩展名称为空,设置扩展名称为unknown
                ext = ext?ext.slice(1) : ‘unknown‘;
                //根据请求文件的扩展名称,设置请求的类型contentType
                var contentType = MIME_TYPE[ext] || "text/html";
                console.log(filePath);
                //因为有图片,默认读取文件是以utf8读取的,获取不到图片,需要读文件是和返回文件时都用binary编码,不然图片不能正常显示
                fs.readFile(__dirname +filePath,"binary",function(err,data){
                    if(err){
                        response.end("<h1>500</h1>服务器内部错误!");
                    }else{//返回不同的页面
                        response.writeHead(200,{‘content-type‘:contentType});
                        response.end(data.toString(),"binary");
                    }
                });//fs.readfile
        }
        });
    }

    }
    http.createServer(onRequest).listen(8888);
    console.log("Server runing at port:8888.");
    }
exports.start=start;
path.exname(filePath),返回filePath路径文件的扩展名,如果filePath以.为结尾,将返回.,如果无扩展名,将返回空

  

时间: 2024-12-29 01:59:25

HTTP node静态资源请求加载demo的相关文章

Hexo博客部署codingNet静态资源无法加载

用Hexo搭建的个人博客,部署到github的pages的话,好像百度搜索不到.所以在国内的codingNet的pages服务也一起部署一下,这样方便国内国外搜索引擎收录进来.具体部署教程我是参考这里但是今天部署到codingNet的pages服务的时候,发现静态资源都加载不到,后来网上搜索了半天,才发现原来你要打算用codingNet的pages服务部署你的博客的话,你创建项目的名字必须和用户名保持一致,不能自己随便自定义.我重新创建了一个和用户名一致的项目,部署到他的pages服务,访问正常

Nginx反向代理Tomcat静态资源无法加载以及请求链接错误

 在使用Nginx实现Tomcat的负载均衡的时候,项目发布到了Tomcat,Nginx也配置好了, 当访问的时候发现了与预期不符 表现为: 静态资源加载失败 链接跳转地址错误 下面是我错误的配置文件 #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; e

web站点优化之使用tengine搭建静态资源服务器和静态资源合并加载案例剖析

在一个项目还是单体架构的时候,所有的js,css,image都会在一个web网站上,看起来并没有什么问题,比如下面这样: 但是当web网站流量起来的时候,这个单体架构必须要进行横向扩展,而在原来的架构中静态资源这羊毛是出在单体架构这头羊身上,所以横向多少 个单体,就有多少个静态资源文件夹,比如下面这样的架构. 那这种架构有什么问题呢? 总的来说会有如下二个问题: 1.   浏览器对单一域名的请求有并发限制. 在同一个域名下,一般来说有js,css,img,media,html等等静态资源,如果资

SpringBoot加载静态资源 无法加载js问题

spring boot thymeleaf 静态资源 默认模板位置为templates , static出现静态资源方在该目录下会出现访问404错误 查了很久发现是 @EnableWebMvc 的问题,我修改方式把注解去掉,用默认的, @Configuration//@EnableWebMvc //添加该注解,则是完全控制MVC,public class CrossConfig extends WebMvcConfigurerAdapter { @Override public void add

Unity开发实战探讨-资源的加载释放最佳策略简要心得

Unity开发实战探讨-资源的加载释放最佳策略简要心得 看过我另外一篇关于Unity资源释放随笔<Unity开发实战探讨-资源的加载释放最佳策略>如果觉得略微复杂,那么下面是一些比较简要的心得体会: 概括 常用资源加载的方法有三种:静态,Resources内部资源,AssetBundle外部资源 资源释放的方式 有二种:立刻释放和统一释放. 静态 静态就是资源直接放场景,静态资源无法立刻释放,但场景关闭由引擎统一释放,开发者无法干预,所以最为无脑. 但静态过于死板,除了整个场景生命周期中必须使

使用nginx处理静态资源请求,其余交给node

由于项目后台使用的是node,然而node不适合对静态资源的处理,因为他的异步处理(事件轮询)机制,所以更擅长的是密集I/O型的应用,所以我就有了一个想法,使用nginx来做反向代理,当请求的是静态资源的时候,直接由nginx(监听80端口)自己处理并返回,其他非静态资源请求转发至node(8080端口),由node来处理.下面是我的nginx配置文档,nginx安装请自行百度,大把资料啦~ #user nobody; worker_processes 1; #error_log logs/er

手把手教你构建 Android WebView 的缓存机制 &amp; 资源预加载方案

前言 由于H5具备 开发周期短.灵活性好 的特点,所以现在 Android App大多嵌入了 Android Webview 组件进行 Hybrid 开发 但我知道你一定在烦恼 Android Webview 的性能问题,特别突出的是:加载速度慢 & 消耗流量 今天,我将针对 Android Webview 的性能问题,提出一些有效解决方案. 目录 1. Android WebView 存在什么性能问题? Android WebView 里 H5 页面加载速度慢 耗费流量 下面会详细介绍. 1.

前端资源预加载并展示进度条

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样: 然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了.尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验.那这种技术是如何实现的呢?其实非常简单,本文就来从基础细节探究一番. 为什么需要资源预加载 大多时候,我们的页面并不是一次渲染完毕的,而是随着用户的操作,不断修改DOM节点,如果你动态插入了一个图片节点,那么浏览器要马上发一个http请求,

Web 前端性能优化 : 如何有效提升静态文件的加载速度

作者:刘轶斌,腾讯应用开发 工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处.原文链接:http://wetest.qq.com/lab/view/345.html 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也