详解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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
element-ui表格合并span-method的实现方法
May 21 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
js new Date()实例测试
Oct 31 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
JS严格模式原理与用法实例分析
Apr 27 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python中字典和集合学习小结
2017/07/07 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
django ajax json的实例代码
2018/05/29 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python后端接收前端回传的文件方法
2019/01/02 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python 使用shutil复制图片的例子
2019/12/13 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
Python新手学习标准库模块命名
2020/05/29 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
strstr()的简单实现
2013/09/26 面试题
募捐倡议书
2014/04/14 职场文书
工商管理自荐书
2014/07/06 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
先进教师个人总结
2015/02/11 职场文书
起诉意见书范文
2015/05/19 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
Redis命令处理过程源码解析
2022/02/12 Redis