详解js静态资源文件请求的处理
本文实例为大家分享了js静态资源文件请求的处理，供大家参考，具体内容如下
html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css" type='text/css' charset='utf-8'> </head> <body> <div class='box' id='box'></div> <script charset='utf-8' src='index.js'></script> </body> </html>
css文件
*{
margin:0;
padding:0;
}
html,body{
font-size:14px;
color:#000;
}
.box{
margin:50px auto;
width:300px;
height:300px;
background:#e3bd83;
border:10px solid #e0f2be;
}
JS文件
var box = document.getElementById('box');
box.onclick = function(){
this.style.background = "red"
}
server文件
var http = require('http'),
fs = require('fs'),
url = require('url');
//创建一个服务
var server1 = http.createServer(function(req,res){
//解析客户端请求地址中的文件的目录名称以及传递给当前服务器的数据内容
var urlObj = url.parse(req.url,true),
pathname = urlObj["pathname"],
query = urlObj["query"];
//简写 try catch捕获异常 防止请求资源文件不存在 我们不加try catch服务会终止。这样不好，所以我们添加try catch捕获异常
//处理静态资源文件的请求(HTML/CSS/JS...) ->前端路由
var reg = /\.(HTML|JS|CSS|JSON|TXT|ICO)/i;
if(reg.test(pathname)){
//获取请求文件的后缀名
var suffix = reg.exec(pathname)[1].toUpperCase();
//根据请求文件的后缀名获取到当前文件的MIME类型
var suffixMIME = "text/plain";//TXT文本对应的
switch(suffix){
case "HTML":
suffixMIME = "text/html";
break;
case "CSS":
suffixMIME = "text/css";
break;
case "JS":
suffixMIME = "text/javascript";
break;
case "JSON":
suffixMIME = "application/json";
break;
case "ICO":
suffixMIME = "application/octet-stream";
break;
}
try{
//按照指定的目录读取文件中的内容或者代码（读取出来的内容都是字符串格式的）
var conFile = fs.readFileSync("."+pathname,"utf-8");
//重写响应头信息:告诉客户端的浏览器我返回的内容是什么样的MIME类型,指定返回的内容的格式是utf-8,避免出现乱码
res.writeHead(200,{'content-type':suffixMIME+';charset=utf-8'})
//服务端向客户端返回的内容也是字符串
res.end(conFile)
}catch(e){
res.writeHead(404,{'content-type':'text/plain;charset=utf-8'});
res.end("request file is not found")
}
/*
MIME类型:
每一种资源文件都有自己的标识类型，例如:HTML文件的MIME
类型是"text/html".css文件的MIME类型是"text/css"
浏览器会按照代码的MIME类型进行渲染
*/
}
// try{
// var con = fs.readFileSync("."+pathname,"utf-8");
// res.end(con);
// }catch(e){
// res.end("request file is not find")
// }
// if(pathname==="/index.html"){
// var con = fs.readFileSync("./index.html","utf-8");
// res.end(con);
// return;
// }
// if(pathname==="/index.css"){
// con = fs.readFileSync("./index.css","utf-8");
// res.end(con);
// return;
// }
// if(pathname==="/index.js"){
// con = fs.readFileSync("./index.js","utf-8");
// res.end(con);
// return;
// }
})
//为当前的这个服务配置端口
server1.listen(80,function(){
console.log("server is success,listening on 80");
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Python的Bottle框架中返回静态文件和JSON对象的方法
代码如下: # -*- coding: utf-8 -*- #!/usr/bin/python # filename: todo.py # codedtime: 2014-8-28 20:50:44 import sqlite3 import bottle @bottle.route('/help3') def help(): return bottle.static_file('help.html', root='.') #静态文件 @bottle.route('/json:json#[0-9
-
使用nodejs、Python写的一个简易HTTP静态文件服务器
日常开发过程中,我们经常需要修改一些放在 CDN 上的静态文件(如 JavaScript.CSS.HTML 文件等),这个过程中,我们希望能有一种方式将线上 CDN 的目录映射为本地硬盘上的某个目录,这样,当我们在本地修改了某个文件时,不需要发布,刷新后马上能看到效果. 比如,我们的 CDN 域名是:http://a.mycdn.com,本地对应的目录是:D:\workassets,我们希望所有对 http://a.mycdn.com/* 的访问被映射到本地的 D:\workassets\* 下
-
Node.js静态文件服务器改进版
首先还是先感谢github,感谢github上提供此段源码的作者.跟昨晚的来比今天的静态文件服务器有点点复杂些,可以学到很多新的东西. 仔细会发现这次的代码多了一个fs.stat函数和ReadStream对象的pipe函数,stat这个函数是用来获取文件信息.第一个参数是传入文件路径,第二个则是回调函数,回调函数的第二个参数stats的属性为文件的基本信息.pipe函数用于将这个可读流和destination目标可写流连接起来,传入这个流中的数据将会写入到destination流中.通过在必要时
-
禁止IIS缓存静态文件的方法(png,js,html等)
禁止IIS缓存静态文件(png,js,html等)背景:IIS为了提高性能,默认情况下会对静态文件js,html,gif,png等做内部缓存,这个缓存是在服务器iis进程的内存中的.IIS这么做在很大程度上可以提高静态文件的访问性能,在正常情况下只要静态文件更新了IIS也会更新缓存.但是如果更新的静态文件很多就有可能出现缓存不更新的情况. 弯路:我遇到这样一个场景,服务器循环更新上万张股票行情图片,IIS也会对图片进行缓存,由于更新的频率很高,文件很多,就出现了IIS缓存文件超过几十分钟都无法更
-
在windows上用nodejs搭建静态文件服务器的简单方法
在windows上用nodejs搭建一个静态文件服务器,即使你一点基础没有也能学会nodejs静态文件服务器的搭建,本文介绍的非常详细,很适合零基础入门的朋友学习. 首先安装nodejs: •新建一个node文件夹 •下载node.exe到该文件夹 •下载npm然后解压到该文件夹 •现在node文件夹是这样的 •把该目录加入到path环境变量 •在命令行执行 node -v npm -v 如果得到了版本号则表示nodejs安装完成 •在命令行中执行 npm config set registry
-
详解js静态资源文件请求的处理
本文实例为大家分享了js静态资源文件请求的处理,供大家参考,具体内容如下 html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css" type=
-
详解vue静态资源打包中的坑与解决方案
本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用
-
详解js静态检查工具eslint配置文件
ESLint 是一个 Javascript 静态检查工具,它可以帮你养成良好的编程习惯 { // 环境定义了预定义的全局变量. "env": { //环境定义了预定义的全局变量.更多在官网查看 "browser": true, "node": true, "commonjs": true, "amd": true, "es6": true, "mocha": true
-
详解vue2.0 资源文件assets和static的区别
Webpacked 资源 我们首先需要理解webpack是怎样处理静态资源的.在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资源的URL. 举个例子,在<img src="./logo.png"> 和 background: url(./logo.png), "./logo.png"中,都是相对资源路径,都会被Webpack解析成模块依赖 . 由于logo.png不是JavaS
-
详解nginx静态资源服务器简单配置
传统的web项目,一般都将静态资源存放在 webroot的目录下,这样做很方便获取静态资源,但是如果说web项目很大,用户很多,静态资源也很多时,服务器的性能 或许就会很低下了.这种情况下一般都会需要一个静态资源的服务器. 搭建nginx服务器首先得安装nginx服务,关于nginx服务的安装可以参考我的另一篇博客<nginx服务安装>这里直接介绍静态服务器的配置 进入nginx安装目录的conf目录下,修改nginx.conf文件,在一个server{}中添加 一个location 部分配置
-
javascript实现动态导入js与css等静态资源文件的方法
本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法.分享给大家供大家参考.具体实现方法如下: /** * 动态导入静态资源文件js/css */ var $import = function(){ return function(rId, res, callback){ if(res && 'string' == typeof res){ if(rId){ if($($('#' + rId), $('head')).length>0){ return; }
-
nginx 多个location转发任意请求或访问静态资源文件的实现
本文主要介绍了nginx 多个location转发任意请求或访问静态资源文件的实现,分享给大家,具体如下: server { #监听的端口 listen 80; #监听的域名 server_name localhost; #监听带后缀的url location ^~\.txt { #文件放到/html文件夹下 root /; } #监听所有url,没有特殊需求就用这一个location就够了 #使用通配符只有在没有匹配上其他location的情况下会进入 location / { #去掉了只有u
-
详解JS浏览器储存
引言 随着对前端的了解越来越深入,了解到了很多种浏览器的存储方案,如 Cookie.LocalStorage等,哪这些存储方案有何异同,分别的适用场景又是什么呢. Cookie Cookie的来源 Cookie 被创造出来的本意并不是本地储存,而是为了辨别用户身份.众所周知,Http 协议是无状态的,也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的,服务器不知道这这些请求来自于谁.比如你向购物车里面添加了一些商品,但是当发送结账请求的时候服务器懵了,我怎么知道你是谁,你买了什么呢.而使
-
详解JS同源策略和CSRF
概述 本文主要涉及三个关键词: 同源策略(Same-origin policy,简称 SOP) 跨站请求伪造(Cross-site request forgery,简称 CSRF) 跨域资源共享(Cross-Origin Resource Sharing,简称 CORS) 同源策略 SOP 同源 先解释何为同源:协议.域名.端口都一样,就是同源. url 同源 https://niconico.com 基准 https://niconico.com/spirit o https://sub.ni
-
详解JS异步加载的三种方式
一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输