详解js静态资源文件请求的处理


Posted in Javascript onAugust 01, 2017

本文实例为大家分享了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");
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 #Javascript
jQuery上传插件webupload使用方法
Aug 01 #jQuery
js实现鼠标拖拽多选功能示例
Aug 01 #Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
js下拉菜单生成器dropMenu使用方法详解
Aug 01 #Javascript
简述jQuery Easyui一些用法
Aug 01 #jQuery
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
帝国cms常用标签汇总
2015/07/06 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python运算符重载用法实例分析
2015/06/01 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python的flask框架难学吗
2020/07/31 Python
Python中pass的作用与使用教程
2020/11/13 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
社团2014年植树节活动总结
2014/03/11 职场文书
专家推荐信模板
2014/05/09 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
优秀员工自荐书
2015/03/06 职场文书
妇产科护理心得体会
2016/01/22 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android