详解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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python修改操作系统时间的方法
2015/05/18 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python循环输出三角形图案的例子
2019/11/22 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
同学会邀请书大全
2014/01/12 职场文书
个人简历中自我评价
2014/02/11 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
委托证明模板
2014/09/16 职场文书
获奖感言范文
2015/07/31 职场文书
开网店计划分析
2019/07/30 职场文书
python urllib库的使用详解
2021/04/13 Python